多个html5音频播放器播放控制

Question

我的页面上有多个 HTML5 音频播放器，问题是当我同时播放它们时，它们会同时播放彼此重叠的声音。基本上我想要做的是一个玩家正在播放，另一个被点击播放前一个停止播放。

以下是我的html

  <div>
     <audio controls="controls">
         <source src="./public/audio/tiesto.mp3" type="audio/mpeg">
     </audio>
  </div>
  <div>
     <audio controls="controls">
          <source src="./public/audio/123.mp3" type="audio/mpeg">
     </audio>
 </div>

这是我从某处复制的 js，但不确定它如何应用于音频元素。

var curPlaying;
$(function () {
    $(".playback").click(function (e) {
        e.preventDefault();
        var song = $(this).next('audio')[0];
        if (song.paused) {
            if (curPlaying) {
                $("audio", "#" + curPlaying)[0].pause();
            }
            song.play();
            curPlaying = $(this).parent()[0].id;
        } else {
            song.pause();
            curPlaying = null;
        }
    });
});

他们使用的是自定义播放按钮，而我想使用 ausio 控件，它是内置的功能。有可能吗？

Answer 1

只需将以下 javascript 添加到我的自定义 js 中

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