多个音频 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 Version

const playButton = document.querySelectorAll('section .play')

playButton.forEach(el => {

  const currentAudio = el.nextElementSibling.querySelector('audio')

  el.addEventListener('click', e => {

    if (currentAudio.paused) {

      document.querySelectorAll('audio').forEach(el => el.pause())

      currentAudio.play()

      playButton.forEach(el => el.classList.remove('active'))

      e.currentTarget.classList.add('active')

    } else {

      e.currentTarget.classList.remove('active')

      currentAudio.pause()

    }

  })

})

//jQuery Version

//const playButton = $('section .play')

//playButton.each((_, el) => {

//  const currentAudio = $(el).next().find('audio')[0]

//  $(el).on('click', e => {

//    if (currentAudio.paused) {

//    $('audio').each((_, el) => el.pause())

//      currentAudio.play()

//      playButton.removeClass('active')

//      $(e.currentTarget).addClass('active')

//    }

//    else {

//        e.currentTarget.classList.remove('active')

//        currentAudioJs.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"></p>

  <p>

    <audio>

      <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"></p>

  <p>

    <audio>

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

</audio>

  </p>

</section>