如何停止使用 jQuery 播放其他音频元素

Posted 2023-02-25

【中文标题】如何停止使用 jQuery 播放其他音频元素

【英文标题】：How to stop other audio elements from playing with jQuery

【发布时间】：2014-04-30 20:06:52

【问题描述】：

我在一个 html 页面上有多个默认的 HTML5 音频播放器。我正在努力做到这一点，当您播放一个文件然后播放另一个文件时。第一个文件将暂停。

我开始并创建了一个函数如下：

allAudioEls = $('audio');

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

下一步是什么？

【问题讨论】：

你好，尝试使用$(this)[0].pause();而不是$(this).get(0); a.pause();

@Nicolai 我必须在单击音频播放器播放按钮和暂停按钮时调用该函数。我不知道如何绑定播放或暂停事件来调用该函数并播放单个音频。

检查this和this

第一个链接将向您展示如何将侦听器添加到“播放”事件。因此，您可以将 pauseAllAudio 函数代替“foo”放置

@Nicolai 我正处于如果我按下播放所有内容都会暂停的地步，并且那个单独的音频不会播放。我需要运行停止所有音频的功能，然后开始播放单击播放按钮的音频。这是我的代码： allAudioEls = $('audio'); $('audio').bind('play', function(e) allAudioEls.each(function() var a = $(this).get(0); a.pause(); ); ) ;

【参考方案1】：

我认为这是最适合您的答案：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

【参考方案2】：

我认为这就是您要寻找的： 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();
        
    );

【参考方案3】：

使用 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();
    );
);