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');
});
});
這會暫停音頻,但不會重置樣式。您還需要顯示/隱藏播放/停止按鈕並刪除「正在播放」類。 – Robert
謝謝@羅伯特;)我改進了我的答案。 –
謝謝你們!會給這個鏡頭 – KD1