如果正在播放，如何全局暂停页面中的所有曲目

Question

我正在制作一个音频播放器，该用户可以拥有同一播放器的多个实例。因此该插件可以在同一页面内多次使用。我可以做到，但问题是各种 Audio 对象可以一起玩。所以我正在寻找一种解决方案来全局暂停其他声音并播放被点击的声音。

这是我的代码：JSFiddle

$.fn.MusicPlayer = function() {

  var audio = new Audio();
  this.click(function() {
    if (audio.paused) {
      audio.play();
      $(this).text('player >> playing...');
    } else {
      audio.pause();
      $(this).text('player >> paused!');
    }
  });

  this.each(function() {
    audio.src = $(this).data('track');
  });
};

$("#obj1").MusicPlayer();
$("#obj2").MusicPlayer();

有什么方法可以让它发挥作用吗？

Answer 1

根据您当前的 html 最简单的解决方案如下：

$('[data-track]:contains("playing")').click();

在您的 fiddle.

中的 js 第 6 行之后

这根据具有数据轨道属性的可播放 div 以及当前正在播放的包含文本 "playing" 的 div 来识别它们。然而，这两者似乎都不稳定。最好添加 css class 以唯一标识可播放的 div。此外，您可以让另一个 class 确定它当前是否正在播放。

那一行会变成这样：

$('.playable.playing').click();
$(this).addClass("playing");

该方法的暂停部分将收到此消息：

$(this).removeClass("playing");

完整 fiddle: https://jsfiddle.net/kghm7djf/

如果正在播放，如何全局暂停页面中的所有曲目

How to globally pause all tracks in a page if one is playing

javascript

audio

jquery

javascript-objects