如何在页面中拥有一个 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);