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

当一个页面中包含了多个<audio>标签时，我们想要用户点击其中一个<audio>标签时其他的声音都停止播放，也就是说我们希望当前页面永远都是只有一个声音在播放，不会存在两个或多个声音同时播放。

思路：

当我们点击页面中的任意一个<audio>标签时，我们要获取到其他的所有<audio>标签，然后把它们都暂停播放，然后开始播放当前<audio>标签的音乐。

编码：

首先我们获取到所有的<audio>标签：

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

我们通过getElementsByTagName()来获取全部的<audio>标签，其返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

然后我们编写函数来暂停掉其他的 <audio> :

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

在这个函数中，我们通过forEach来循环遍历所获取到的所有的<audio>标签，然后判断是否是当前点击的标签，如果不是，我们通过pause()来将其暂停。

绑定函数

还有非常重要的一步就是给所有的<audio>标签绑定上我们的暂停函数：

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

我们还是采用forEach来给所有的<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));
})