自定义监听audio播放暂停事件
vue有自己的audio组件，网上也有很多人自己封装了一些组件，都可以引入来用，此文档只是记录我在本次需求中使用的方案，不做争论。
背景
需求：网站页面加入音频播放，用户必须登录才能进行播放
框架：vue+nuxt.js
方案
1、使用原生的audio标签
<audio src="******" controls="controls"/>
2、设置样式
即css渲染，这里自主选择，我这里也是copy网上大神的样式(毕竟别人写的好看)，代码如下：
audio {
width: 100%;
height: 40px;
outline: none;
filter: invert(180); //c3 filter(滤镜) 属性
}
audio::-webkit-media-controls-enclosure {
background: rgb(129, 73, 200);
/* 滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8) #7eb637 10,10,10 #757575 */
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8) #7eb637
border-radius: 4px;
}
audio::-webkit-media-controls-play-button {
height: 22px;
width: 22px;
min-width: 22px;
border-radius: 50%;
flex-basis: 22px;
}
// 音量隐藏
audio::-webkit-media-controls-volume-control-container {
display: none;
}
audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #000;
text-shadow: unset;
}
audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: rgba(0, 0, 0, 0.6);
text-shadow: unset;
}
3、这样就已经完成了网站页面加入音频播放的需求了，如图：
播放/暂停按钮、进度条、倍速播放和下载、时间显示已经具有；
4、但需求里要求，必须要用户登录后才能播放，所以，我们得在用户点击播放按钮的时候，进行判断，此时就需要添加自定义监听播放/暂停事件；
那么之前第1点就改成了：
<audio src="********.mp3" controls="controls" id="audio_1" />
<span class="playButton" @click="bf()">播放/暂停</span>
样式将透明度设置为0，然后定位到原生的播放按钮上方：
.playButton{
position: fixed;
width: 40px;
height: 40px;
background-color: red;
margin-top: -40px;
opacity : 0;
cursor: pointer;
}
最重要的，添加监听事件，js代码如下：
bf() {
var audio = document.getElementById('audio_1');
//此处可添加用户是否登录判断
if(audio!==null){
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
if(audio.paused){
audio.play();//audio.play();// 这个就是播放
}else{
audio.pause();// 这个就是暂停
}
}
}
这样一来，用户点击的其实是我们给他的播放/暂停按钮，并非是audio的播放/暂停按钮。
需求完成。
