多个音频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 将不那么混乱。

此解决方案适用于页面中任意数量的音频

注意 - 我还添加了一个 Pure 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>