jquery乘以音频按钮停止兄弟姐妹玩

Question

我有4个音频按钮。当我点击其中一个时，我想停止其他3个。我试过兄弟姐妹的功能，但我认为它找不到其他音频。如何停止其他音频播放？

$(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>