[前端功能] 同一页面只允许一个audio播放，一个播放其他全部停止

参考：一个页面中有多个audio标签，播放其中一个时暂停其他，只允许一个audio播放

 

var audios = document.getElementsByTagName("audio");
// 暂停函数
function pauseAll() {
    var self = this;
    [].forEach.call(audios, function (i) {
        // 将audios中其他的audio全部暂停
        i !== self && i.pause();
    })
}
// 给play事件绑定暂停函数
[].forEach.call(audios, function (i) {
    i.addEventListener("play", pauseAll.bind(i));
})

 

在项目中遇到的问题是audio本身是遍历出来的，而且和参考前台的绑定不同，代码如下：

<p style="margin-top:5px;" v-if="item.VoicePath && item.QResult != 'FTP:DOWNLOAD' && item.VoicePath.length != 0">
      <audio class="audio" :src="item.VoicePath" controls="controls" @play="(e) => audioPlay(e, item, index)"></audio>
</p>

audioPlay(e, item, index) {
            const audios = document.getElementsByTagName('audio');

            [].forEach.call(audios, function (i) {
                i !== e.target && i.pause();
　　　　　　　　// i !== audios[index] && i.pause();
　　　　　　　　//!= 优先级高于&&，所以本代码的意思为遍历内容 i 与当前目标e.target不一致则返回true并且执行i.pause();即停止所有播放，如果一致则返回false，不执行后一步
}) }

 

e.target用法

jquery:this 与 e.target区别:

js中事件是会冒泡的，故this会冒泡而 e.target 不冒泡，它就是指向事件触发的dom。所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素。

 

所以最后用e.target代替同样可行，问题主要是在于在项目中查了半天id和name因为audio是系统组件始终找不到比对项，现在的方法相当于是查看了所有的audio组件，不是当前点击的audio全都关了一遍。