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

在你的小提琴中的第6行之后

。

这标识了基于它们的可播放div，它们具有数据轨道属性，以及当前基于它们播放的包含文本“播放”的div。然而，这两者似乎都不稳定。添加一个css类可能会更好，以便唯一地标识可播放的div。此外，您可以让另一个班级确定它是否正在播放。

这条线就会变成这样：

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

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

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

完全小提琴：https://jsfiddle.net/kghm7djf/

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

1 个答案: