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

时间:2016-06-21 13:03:19

标签: jquery html5-audio audio-player

我有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();

    });
});

1 个答案:

答案 0 :(得分:1)

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

请检查以下代码段:



.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>
&#13;
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                switch (state){
                    case ViewPager.SCROLL_STATE_IDLE:
                        fab.show();
                        break;
                    case ViewPager.SCROLL_STATE_DRAGGING:
                    case ViewPager.SCROLL_STATE_SETTLING:
                        fab.hide();
                        break;
                }

            }
        });
&#13;
&#13;
&#13;