複数のHTML5オーディオプレーヤー。

Question

私はこれについていくつかの援助を期待していました。 1つのページに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'); 
});