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

multiple audio html : auto stop other when current is playing with javascript

提问by hedi

I have 10 audio players with simple html audio tags on a html5 page. No jquery, no special audio js plugins, etc...

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

Does anyone has a simple script in js to pause all other players when the current player is playing ?

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

I don't want to use js plugins because i want to keep a simple audio html code.

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

回答by alexander farkas

you can use event delegation. Simply listen to the play event in the capturing phase and then pause all video file, but not the target one:

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

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

回答by bryc

Instead of looping over all audio tags on a page and pausing them, you can store a referenceto the currently playing element, and have only thatone pause when playing another.

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

This makes a bit more sense, unless you intend to start with multiple elements playing at the same time.

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

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

回答by m3nda

Mixing both previous answers that didn't work, i've used that. I just added && window.$_currentlyPlaying != evt.targetand all is working. Also i've created a gist with this and other goodies for audio tags. javascript-audio-tags

混合以前不起作用的两个答案，我已经使用了它。我刚刚添加&& 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);

回答by Canaan Etai

$("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();
    });
});

回答by Boyd Cyr

I don't know if it is because of Chrome updates, but the previous answers did not work for me. I modified a bit of the code here and came up with this:

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

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

I don't know why, but the widow.addEventListenerwas not working for me, but I liked the idea of having the currentPlayingvariable stored in the windowelement instead of having to create it outside of the listener prior to using it.

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

回答by Sony Choudhary

You can even try this solution, if you don't want to loop through

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

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