[前端功能] 同一頁面只允許一個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全都關了一遍。