javascript - 如何在页面中拥有一个 jQuery 播放器对象的多个实例(音频对象)

Question

我制作了一个自定义的音频播放器，但问题是每个 HTML 页面中只能有一个播放器。因为js代码与例如类.play相关联，所以如果页面上有2个.play类，则两个类都可以工作。虽然唯一按下的那个应该可以工作。这是播放器的一个非常简化的版本。我知道这个例子可以通过在代码的某些部分使用 this 来解决，但想象它是一个具有很多功能的完整插件。

(function($) {
  var audio, src;
  src = $(".player").attr("data-src");
  audio = new Audio();
  audio.src = src;

  $(".play").on("click", function() {
    if (audio.paused) {
      audio.play();
      $(".play").css("background", "url(https://goo.gl/w4q23U) no-repeat");
    } else {
      audio.pause();
      $(".play").css("background", "url(https://goo.gl/xOkUZm) no-repeat");
    }
  });

})(jQuery);

div.player{
  width:200px;
  height:50px;
  border:dashed 1px black;
  margin:5px;
}
div.player > .play {
  width: 48px;
  height: 48px;
  background: url(https://goo.gl/xOkUZm) no-repeat;
  float:left;
}
div.player > .title{
  line-height:50px;
  margin-left:60px;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="player" data-src="https://goo.gl/aBJE48">
  <div class="play"></div>
  <div class="title">track 1</div>
</div>

<div class="player" data-src="https://goo.gl/4arvDT">
  <div class="play"></div>
  <div class="title">track 2</div>
</div>

如您所见，如果您按下按钮进行播放，两个图标都会起作用，而只有按下的那个图标才应该起作用。我正在寻找一种正确的解决方案，以便在单个页面中包含同一插件的各种实例。

这个标题也有类似的问题，但是这个问题的要点是考虑页面只能播放其中一个的音频对象，无论是否有多个播放器的一个实例。

Answer 1

为 CSS 传递一个“目标”，并将每个实例推送到一个数组中，以便您可以使用索引位置调用它们的方法。然后控件将应用于您选择的实例。

(function($) {
  var player = [];
  var audio, src;
  src = $(".player").attr("data-src");
  audio = new Audio();
  audio.src = src;
  player.push(audio);
  $(".play").on("click", function(target) {
     $.each( player, function( key, value ) {
      if (audio[key].paused() {
      audio[key].play();
      $(target).css("background", "url(https://goo.gl/w4q23U) no-repeat");
    } else {
      audio[key].pause();
      $(target).css("background", "url(https://goo.gl/xOkUZm) no-repeat");
    }

  });

  });

})(jQuery);