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

Posted 2023-02-25

【中文标题】多个音频html：当前播放时自动停止其他

【英文标题】：multiple audio html : auto stop other when current is playing

【发布时间】：2020-12-04 20:23:54

【问题描述】：

我在一个页面上有 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"   />
<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"   />
<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>

【参考方案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"   />
  <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"   />
  <p class="play btn"></p>
  <p>
    <audio>
      <source src="https://room1015.com/img/cms/MP3/HOLLYROSE.mp3" type="audio/mpeg" />
</audio>
  </p>
</section>