多个 HTML5 音频播放器。单击另一个音频实例时停止播放其他音频实例

Posted 2023-02-25

【中文标题】多个 HTML5 音频播放器。单击另一个音频实例时停止播放其他音频实例

【英文标题】：Multiple HTML5 Audio players. Stop other audio instances from playing when clicking play on another

【发布时间】：2017-05-26 07:40:55

【问题描述】：

我希望得到一些帮助。我在一个页面上有 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');
       );
   );

【参考方案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');
);

【讨论】：

这将暂停音频，但不会重置样式。您还需要显示/隐藏播放/停止按钮并删除“正在播放”类。

谢谢@Robert ;) 我改进了我的答案。

谢谢大家！会试一试