多个音频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-audio-tags

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

Answer 4

$("audio").on("play", function() {
    var id = $(this).attr('id');

    $("audio").not(this).each(function(index, audio) {
        audio.pause();
    });
});

$("video").on("play", function() {
    var id = $(this).attr('id');

    $("video").not(this).each(function(index, video) {
        video.pause();
    });
});

Answer 5

我不知道是不是因为Chrome更新，但以前的答案对我不起作用。我在这里修改了一些代码并想出了这个：

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

我不知道为什么，但widow.addEventListener不适合我，但我喜欢将currentPlaying变量存储在window元素中而不是在使用它之前必须在侦听器之外创建它的想法。

Answer 6

如果您不想循环，您甚至可以尝试此解决方案

var previuosAudio;
document.addEventListener('play', function(e){
    if(previousAudio && previousAudio != e.target){
        previousAudio.pause();
    }
    previousAudio = e.target;
}, true);