如何阻止其他音频元素与jQuery一起播放

Question

我在一个HTML页面上有多个默认的HTML5音频播放器。当你播放一个文件然后播放另一个文件时，我正试图这样做。第一个文件将暂停。

我开始创建了一个函数，如下所示：

allAudioEls = $('audio');

    function pauseAllAudio() {
       allAudioEls.each(function() {
          var a = $(this).get(0);
          a.pause();
       });
    }

下一步是什么？

Answer 1

我认为这是您正在寻找的： 的 JsFiddle link

<强> HTML

<audio id="audio" controls>
</audio>
<audio id="audio1" controls>    
</audio>

<强>使用Javascript：

$("audio").each(function(){
  $(this).bind("play",stopAll);
});

function stopAll(e){
    var currentElementId=$(e.currentTarget).attr("id");
    $("audio").each(function(){
        var $this=$(this);
        var elementId=$this.attr("id");
        if(elementId!=currentElementId){
            $this[0].pause();
        }
    });
}

Answer 2

用jquery很容易。下面是音频和视频的示例

$("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 3

我认为这是最适合您的答案： Stop other Audio ...

您只需要使用JQuery添加以下脚本。

JavaScript：

$("audio").bind("play",function (){
  $("audio").not(this).each(function (index, audio) {
    audio.pause();
  });
});
//Must be added at the bottom in HTML CODE