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

Question

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

有没有人在js中有一个简单的脚本来暂停所有其他玩家当前玩家？

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

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);

Answer 2

您可以存储对当前播放元素的引用,而不是循环播放页面上的所有音频标记并暂停它们,并且在播放另一个元素时只有一个暂停.

这更有意义,除非您打算从同时播放多个元素开始.

window.addEventListener("play", function(evt)
{
    if(window.$_currentlyPlaying)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);

Answer 3

混合以前不起作用的两个答案，我已经使用了它。我刚刚添加&& window.$_currentlyPlaying != evt.target，一切正常。我还为音频标签创建了一个包含这个和其他好东西的要点。javascript-音频标签

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