jquery 多音频按钮停止兄弟姐妹播放

Question

我有 4 个音频按钮。当我点击其中一个时，我想停止其他 3 个。我尝试使用 siblings 功能，但我认为它找不到其他音频。我怎样才能停止播放其他音频？

$(document).ready(function() {
    var playing = false;

    $('.audio-button').click(function() {
        var audio = $(this).find('audio')[0]; 

        if (playing !== true) {
            audio.play();
        } else {
            audio.pause();
        }

        $(this).toggleClass('playing');
        playing = !playing;
        $(this).siblings().find('audio').stop();

    });
});

Answer 1

问题是您在 jquery 元素上调用了 "stop()" 函数。我只是遍历音频元素以阻止它们。要模拟停止，您需要调用 pause 方法并将 currentTime 设置为 0。顺便说一句，您的 js 脚本的其余部分看起来很好 =)

请检查下面的代码片段：

var playing = false;

$('.audio-button').click(function() {
  var audio = $(this).find('audio')[0]; 

  if (playing !== true) {
    audio.play();
  } else {
    audio.pause();
  }

  $(this).toggleClass('playing');
  playing = !playing;
  $(this).siblings().find('audio').each(function(index, elem){

    elem.pause();
    elem.currentTime = 0;

  });

});

.audio-button{
  width: 150px;
  height: 150px;
  background: orange;
  text-align: center;
  margin: 10px;
}

<div class="audio-button">
  Click here
  <audio src="http://www.nasa.gov/mp3/741263main_Bob.mp3">
  </audio>
</div> 
<div class="audio-button">
  Click here
  <audio src="http://www.nasa.gov/mp3/741261main_Charlie.mp3">
  </audio>
</div> 
<div class="audio-button">
  Click here
  <audio src="http://www.nasa.gov/mp3/741262main_Lori.mp3">
  </audio>
</div>
  <div class="audio-button">
  Click here
  <audio src="http://www.nasa.gov/mp3/739272main_Cut%201.mp3">
  </audio>
 </div> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

jquery 多音频按钮停止兄弟姐妹播放

jquery multiply audio button stop siblings playing

jquery

audio-player

html5-audio