Question

我希望得到一些帮助。我在一个页面上有3个音频实例。处理要播放和暂停的音频不是问题。问题是当音频播放时我点击另一个播放，我无法让其他音频实例停止播放。所以最后我将这些曲目全部播放，我必须在每个曲目上手动点击停止。我的代码到目前为止。

老实说，我不知道如何进行检查。第一次做这样的事情。

任何帮助将不胜感激:)谢谢

HTML：

<div class="voting-artist">
    <audio class="audio">
      <source src="{{ song.url }}" type="audio/mpeg">
    </audio>

    <audio class="audio">
      <source src="{{ song.url }}" type="audio/mpeg">
    </audio>

    <audio class="audio">
      <source src="{{ song.url }}" type="audio/mpeg">
    </audio>
</div>

的jQuery / JavaScript的：

    $votingArtist.each(function(i, value) {

      var $this = $(this);
      var thisAudioPlayBtn = $this.find('.play-btn', $this);
      var thisAudioStopBtn = $this.find('.stop-btn', $this);
      var thisSelectionCont =  $this.find('.selection--play-btn', $this);
      var thisAudio = $this.find('.audio', $this);

      thisAudioPlayBtn.on('click', function(e) {
        thisAudio[0].play();
        thisAudioPlayBtn.hide()
        thisAudioStopBtn.show();
        thisSelectionCont.addClass('is-playing');
       });

       thisAudioStopBtn.on('click', function() {
         thisAudio[0].pause();
         thisAudioPlayBtn.show()
         thisAudioStopBtn.hide();
         thisSelectionCont.removeClass('is-playing');
       });
   });

Answer 1

只需pause()他们！

thisAudioPlayBtn.on('click', function(e) {
  $("audio").pause();       // Add this to pause them all.
  $(".selection--play-btn").removeClass("is-playing");    // And remove the playing class everywhere too!
  $(".play-btn").hide();    // Reset play/pause button
  $(".stop-btn").show();

  thisAudio[0].play();
  thisAudioPlayBtn.hide()
  thisAudioStopBtn.show();
  thisSelectionCont.addClass('is-playing');
});

多个HTML5音频播放器。点击另一个

1 个答案: