如何从同一个插件中拥有多个玩家实例

Question

我正在尝试创建一个音乐播放器插件，在同一页面中会有多个它的实例。所有实例的"音频"对象都是相同的。

这是我的代码：DEMO

HTML:

<div class="player" data-track="https://rjmediamusic.com/media/mp3/Masih-Arash-AP-Bia-Bazam.mp3">
<div class="playBtn"></div>
</div>
<div class="player" data-track="https://rjmediamusic.com/media/mp3/Masih-Arash-AP-Hanooz-Hamoonam.mp3">
<div class="playBtn"></div>
</div>

JS:

audio = new Audio();
audio.src= $('.player').data("track");
$(".player").click(function(){
$(".playBtn").toggleClass('active');
if($(".playBtn").hasClass('active')){
audio.play();
}else{
audio.pause();
}
})

选择播放一首歌曲时，不应播放其他歌曲。有什么解决方案可以让它工作，这样每个实例都有自己的功能，但所有实例都共享同一个Audio对象？

Answer 1

我在这个jsFiddle中为您举了一个例子：https://jsfiddle.net/mgaskill/zLgpq9dy/

困难在于，您使用的所有实例都具有相同的CSS类，但没有ID。如果你小心的话，这是可行的，这就是我所做的。神奇之处来自事件处理程序中的jQuery$(this)对象。

找到正确的播放按钮

var playButton = $(this).find(".playBtn");

检查播放按钮的类别

if (playButton.hasClass('active')) {

重新分配音频源

audio.src= $(this).data("track");

这允许在多个玩家之间重新使用源。

这是更新后的Javascript：

audio = new Audio();
$(".player").click(function(){
var playButton = $(this).find(".playBtn");
if (!playButton.hasClass('current')) {
$(".playBtn").removeClass("active");
$(".playBtn").removeClass("current");
playButton.addClass("current");
audio.src= $(this).data("track");
}
playButton.toggleClass('active');
if (playButton.hasClass('active')) {
audio.play();
} else {
audio.pause();
}
});

这些更改将玩家是否正在主动播放与是否为当前玩家区分开来，从而允许从暂停状态恢复音频。当从一个玩家切换到另一个玩家时，所有其他玩家都被设置为非活动，从而使每个玩家的视觉状态都能得到正确的表示。

当播放器切换时，音频源现在被分配给当前播放器。这将阻止任何以前的玩家继续玩游戏，并允许新玩家在激活时开始。