多个HTML5音频播放器。当点击另一个播放时停止播放其他音频实例

Question

我希望得到这方面的帮助。我在一个页面上有3个音频实例。处理音频播放和暂停不是问题。问题是音频播放时，我点击播放另一个，我不能让其他音频实例停止播放。所以最后我有这些曲目全部播放，我必须手动停止每个人。我的代码到目前为止。

老实说，我不知道如何去做这个检查。第一次做这样的事情。

任何帮助，将不胜感激:)谢谢

HTML：

<div class="voting-artist"> 
    <audio class="audio"> 
     <source src="{{ song.url }}" type="audio/mpeg"> 
    </audio> 

    <audio class="audio"> 
     <source src="{{ song.url }}" type="audio/mpeg"> 
    </audio> 

    <audio class="audio"> 
     <source src="{{ song.url }}" type="audio/mpeg"> 
    </audio> 
</div> 

的jQuery/JavaScript的：

$votingArtist.each(function(i, value) { 

     var $this = $(this); 
     var thisAudioPlayBtn = $this.find('.play-btn', $this); 
     var thisAudioStopBtn = $this.find('.stop-btn', $this); 
     var thisSelectionCont = $this.find('.selection--play-btn', $this); 
     var thisAudio = $this.find('.audio', $this); 

     thisAudioPlayBtn.on('click', function(e) { 
     thisAudio[0].play(); 
     thisAudioPlayBtn.hide() 
     thisAudioStopBtn.show(); 
     thisSelectionCont.addClass('is-playing'); 
     }); 

     thisAudioStopBtn.on('click', function() { 
     thisAudio[0].pause(); 
     thisAudioPlayBtn.show() 
     thisAudioStopBtn.hide(); 
     thisSelectionCont.removeClass('is-playing'); 
     }); 
    }); 

Answer 1

只是pause()他们！

thisAudioPlayBtn.on('click', function(e) { 
    $("audio").pause();  // Add this to pause them all. 
    $(".selection--play-btn").removeClass("is-playing"); // And remove the playing class everywhere too! 
    $(".play-btn").hide(); // Reset play/pause button 
    $(".stop-btn").show(); 

    thisAudio[0].play(); 
    thisAudioPlayBtn.hide() 
    thisAudioStopBtn.show(); 
    thisSelectionCont.addClass('is-playing'); 
});