Javascript 仅在网页上启用一个音频流

我正在建立一个乐队网站的早期阶段，那里有许多音频流样本。每个流由单独的播放和暂停按钮触发或停止。页面上还有许多视频，它们有自己的控件。我使用以下代码设置音频样本：

$("#play0").click(function() {

    $("#audio0").trigger('play');

});


$("#pause0").click(function() {

    $("#audio0").trigger('pause');

});

---

audio0标识用于每个音频流（最多可达audio9），而play0和pause0标识（最多可达play/pause9）用于按钮。如何确保在任何时候，无论是音频还是视频，都只能播放一个音频文件。换句话说，用户不能同时触发多个音频流播放。谢谢。

试试这样的

 var media = $('audio, video');

    function pauseAll() {
       media.each(function() {
          var element = $(this).get(0);
          element.pause();
       });
    }


    $("#play0").click(function(){
        pauseAll();
        $("#audio0")[0].play();
    });

---

谢谢，坦波。你的代码非常有效。但是，我必须删除每个视频中的控件属性，并定义单独的播放和暂停按钮。这样做，我就失去了让用户将视频转换为全屏显示的能力，而全屏显示是控件属性的一部分。我尝试手动插入allowfullscreen属性，但似乎不起作用。所以现在我需要一个解决方案，让用户可以选择全屏观看视频。除此之外，你的代码是守护者！我回到我的页面，现在我意识到如果你右键点击视频，有一个选项可以在显示和隐藏控件之间切换。如果显示控件，则可以在视频中看到整个控件面板，包括要全屏显示的图标。但是，这并不是一个非常优雅的解决方案，特别是因为它还显示控件属性附带的播放和暂停按钮。这可能会让用户感到非常困惑。