Javascript 多个HTML5音频播放器。单击其他音频实例上的“播放”时停止播放其他音频实例

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

只要

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

只要

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；）我改进了我的答案。谢谢大家！这将暂停音频，但不会重置样式。您还需要显示/隐藏播放/停止按钮并删除“正在播放”类。谢谢@Robert；）我改进了我的答案。谢谢大家！我可以试一试吗