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

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

1 个答案: