當一個頁面中包含了多個<audio>標簽時，我們想要用戶點擊其中一個<audio>標簽時其他的聲音都停止播放，也就是說我們希望當前頁面永遠都是只有一個聲音在播放，不會存在兩個或多個聲音同時播放。

思路：

當我們點擊頁面中的任意一個<audio>標簽時，我們要獲取到其他的所有<audio>標簽，然后把它們都暫停播放，然后開始播放當前<audio>標簽的音樂。

編碼：

首先我們獲取到所有的<audio>標簽：

var audios = document.getElementsByTagName("audio");

我們通過getElementsByTagName()來獲取全部的<audio>標簽，其返回元素的順序是它們在文檔中的順序。
如果把特殊字符串 "*" 傳遞給 getElementsByTagName() 方法，它將返回文檔中所有元素的列表，元素排列的順序就是它們在文檔中的順序。

然后我們編寫函數(shù)來暫停掉其他的 <audio> :

function pauseAll() {
    var self = this;
    [].forEach.call(audios, function (i) {
        // 將audios中其他的audio全部暫停
        i !== self && i.pause();
    })
}

在這個函數(shù)中，我們通過forEach來循環(huán)遍歷所獲取到的所有的<audio>標簽，然后判斷是否是當前點擊的標簽，如果不是，我們通過pause()來將其暫停。

綁定函數(shù)

還有非常重要的一步就是給所有的<audio>標簽綁定上我們的暫停函數(shù)：

[].forEach.call(audios, function (i) {
    i.addEventListener("play", pauseAll.bind(i));
})

我們還是采用forEach來給所有的<audio>標簽綁定上我們的暫停函數(shù)。

完整代碼：

var audios = document.getElementsByTagName("audio");
// 暫停函數(shù)
function pauseAll() {
    var self = this;
    [].forEach.call(audios, function (i) {
        // 將audios中其他的audio全部暫停
        i !== self && i.pause();
    })
}
// 給play事件綁定暫停函數(shù)
[].forEach.call(audios, function (i) {
    i.addEventListener("play", pauseAll.bind(i));
})