2017-05-26 16 views
0

我希望得到這方面的幫助。我在一個頁面上有3個音頻實例。處理音頻播放和暫停不是問題。問題是音頻播放時,我點擊播放另一個,我不能讓其他音頻實例停止播放。所以最後我有這些曲目全部播放,我必須手動停止每個人。我的代碼到目前爲止。多個HTML5音頻播放器。當點擊另一個播放時停止播放其他音頻實例

老實說,我不知道如何去做這個檢查。第一次做這樣的事情。

任何幫助,將不勝感激:)謝謝

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'); 
     }); 
    }); 

回答

2

只是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'); 
}); 
+1

這會暫停音頻,但不會重置樣式。您還需要顯示/隱藏播放/停止按鈕並刪除「正在播放」類。 – Robert

+0

謝謝@羅伯特;)我改進了我的答案。 –

+0

謝謝你們!會給這個鏡頭 – KD1