如何从同一个插件中获得多个播放器实例

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

When one song is selected to play, no other should play.是否有任何解决方案可以使其工作，使每个实例都有自己的功能，但所有实例共享相同的音频对象？

Answer 1

我已经在这个 jsFiddle 中制作了你的示例：https://jsfiddle.net/mgaskill/zLgpq9dy/

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

找到正确的播放按钮

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

检查播放按钮的 class

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

这些更改将玩家是否正在播放与是否是当前玩家区分开来，允许从暂停状态。当从一个玩家切换到另一个玩家时，所有 other 玩家都设置为 not active，允许每个玩家正确表示视觉状态。

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

如何从同一个插件中获得多个播放器实例

How to have multiple player instances from the same plugin

html

javascript

jquery

html5-audio