多个音频 html：当前播放时自动停止其他音频

Question

我在一个页面上有 2 个音频实例。处理音频的播放和暂停不是问题。问题是当音频正在播放并且我单击另一个音频实例时，我无法通过图标修改让另一个音频实例停止播放

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

$('section .play').click(function(){

    var $this = $(this);

    // starting audio

    var audioID = "sound" + $(this).attr('id');

    $this.toggleClass('active');

    if($this.hasClass('active')){

        $("#" + audioID).trigger('play');       

    } else {

        $("#" + audioID).trigger('pause');

      

    }

});

section {

    display: block;

    margin-bottom: 30px;

    padding: 0 20px;

    text-align: center;

    width: 200px;

    height: 200px;

    position: relative;

}

 

 section .btn {

    background: #ccc;

border: 0 none;

cursor: pointer;

display: block;

height: 60px;

line-height: 60px;

position: absolute;

width: 200px;

z-index: 100;

bottom: 0;

text-align: center;

 }

  section .btn:after {

    content: "play";

    

 }

section .btn.active:after {

    content: "pause";

    

 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section><img src="https://unsplash.it/g/300?image=29" width="200" height="200" />

<p class="play btn" id="7"></p>

<p><audio id="sound7">

<source src="https://room1015.com/img/cms/MP3/Hanging-out-in-room-1015.mp3" type="audio/mpeg" />

</audio></p>

</section>

<section><img src="https://unsplash.it/g/300?image=29" width="200" height="200" />

<p class="play btn" id="6"></p>

<p><audio id="sound6">

    <source src="https://room1015.com/img/cms/MP3/HOLLYROSE.mp3" type="audio/mpeg" />

</audio></p>

</section>

Answer 1

我将循环遍历每个.play按钮并检测音频何时暂停（或停止），如果是这样，则暂停/停止正在播放的每个可能的音频，然后开始播放与按下的按钮匹配的音频play。这样您就不再需要 ID，因此您的 HTML 将不再那么混乱。该解决方案适用于页面中任意数量的音频注意 -我还添加了纯 JS 解决方案。//pure JS Versionconst playButton = document.querySelectorAll('section .play')playButton.forEach(el => {&nbsp; const currentAudio = el.nextElementSibling.querySelector('audio')&nbsp; el.addEventListener('click', e => {&nbsp; &nbsp; if (currentAudio.paused) {&nbsp; &nbsp; &nbsp; document.querySelectorAll('audio').forEach(el => el.pause())&nbsp; &nbsp; &nbsp; currentAudio.play()&nbsp; &nbsp; &nbsp; playButton.forEach(el => el.classList.remove('active'))&nbsp; &nbsp; &nbsp; e.currentTarget.classList.add('active')&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; e.currentTarget.classList.remove('active')&nbsp; &nbsp; &nbsp; currentAudio.pause()&nbsp; &nbsp; }&nbsp; })})//jQuery Version//const playButton = $('section .play')//playButton.each((_, el) => {//&nbsp; const currentAudio = $(el).next().find('audio')[0]//&nbsp; $(el).on('click', e => {//&nbsp; &nbsp; if (currentAudio.paused) {//&nbsp; &nbsp; $('audio').each((_, el) => el.pause())//&nbsp; &nbsp; &nbsp; currentAudio.play()//&nbsp; &nbsp; &nbsp; playButton.removeClass('active')//&nbsp; &nbsp; &nbsp; $(e.currentTarget).addClass('active')//&nbsp; &nbsp; }//&nbsp; &nbsp; else {//&nbsp; &nbsp; &nbsp; &nbsp; e.currentTarget.classList.remove('active')//&nbsp; &nbsp; &nbsp; &nbsp; currentAudioJs.pause()//&nbsp; &nbsp; &nbsp;}//&nbsp; })//})section {&nbsp; display: block;&nbsp; margin-bottom: 30px;&nbsp; padding: 0 20px;&nbsp; text-align: center;&nbsp; width: 200px;&nbsp; height: 200px;&nbsp; position: relative;}section .btn {&nbsp; background: #ccc;&nbsp; border: 0 none;&nbsp; cursor: pointer;&nbsp; display: block;&nbsp; height: 60px;&nbsp; line-height: 60px;&nbsp; position: absolute;&nbsp; width: 200px;&nbsp; z-index: 100;&nbsp; bottom: 0;&nbsp; text-align: center;}section .btn:after {&nbsp; content: "play";}section .btn.active:after {&nbsp; content: "pause";}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><section>&nbsp; <img src="https://unsplash.it/g/300?image=29" width="200" height="200" />&nbsp; <p class="play btn"></p>&nbsp; <p>&nbsp; &nbsp; <audio>&nbsp; &nbsp; &nbsp; <source src="https://room1015.com/img/cms/MP3/Hanging-out-in-room-1015.mp3" type="audio/mpeg" />&nbsp; &nbsp; </audio>&nbsp; </p></section><section>&nbsp; <img src="https://unsplash.it/g/300?image=29" width="200" height="200" />&nbsp; <p class="play btn"></p>&nbsp; <p>&nbsp; &nbsp; <audio>&nbsp; &nbsp; &nbsp; <source src="https://room1015.com/img/cms/MP3/HOLLYROSE.mp3" type="audio/mpeg" /></audio>&nbsp; </p></section>