多个音频 html：当前正在使用 javascript 播放时自动停止其他

Question

我在 html5 页面上有 10 个带有简单 html 音频标签的音频播放器。没有 jquery，没有特殊的音频 js 插件，等等……

有没有人在 js 中有一个简单的脚本来在当前播放器播放时暂停所有其他播放器？

我不想使用 js 插件，因为我想保留一个简单的音频 html 代码。

原文由 hedi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用事件委托。只需在捕获阶段收听播放事件，然后暂停所有视频文件，但不暂停目标文件：

 document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
        }
    }
}, true);

原文由 alexander farkas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

无需遍历页面上的所有音频标签并暂停它们，您可以 存储对当前播放元素的引用，并在播放另一个元素时 仅暂停该 元素。

 document.addEventListener("play", function(evt) {
    if(this.$AudioPlaying && this.$AudioPlaying !== evt.target) {
        this.$AudioPlaying.pause();
    }
    this.$AudioPlaying = evt.target;
}, true);

原文由 bryc 发布，翻译遵循 CC BY-SA 4.0 许可协议