Html5 1曲だけを再生して再起動する方法

Question

こんにちは、私は年齢を重ねていて、答えを見つけることができません。何をしようとしているのは、複数のオーディオファイルをWebサイトに用意し、一度に1つの曲だけを再生できるようにすることです。しかし、もしあなたが曲を演奏したら、別の曲を弾いて最初の曲に戻ってください。ここに私のコードは、私はあなたのEventListenerがループわからない、オフだと思う今のところ

document.addEventListener('play', function(e){ 
 
     var audios = document.getElementsByTagName('audio'); 
 
     for(var i = 0, len = audios.length; i < len;i++){ 
 
      if(audios[i] != e.target){ 
 
       this.currentTime = 0; 
 
       audios[i].pause(); 
 
      } 
 
     } 
 
    }, true); 
 
     
 

 

<div> 
 
    <p class="song"><h3><strong>#1 Intro - The Oath</strong></h3><p> 
 
     <audio class="playback" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none"> 
 
      <I>Your browser does not support the audio element.</I> 
 
     </audio> 
 
     </div> 
 
     <div> 
 
      <p class="song"><h3><strong>#2 A State Of Trance Year Mix 2013</strong></h3></p> 
 
      <audio class="playback" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none"> 
 
       <I>Your browser does not support the audio element.</I> 
 
      </audio> 
 
     </div>

Answer 1

です。私は<I>がpropertのhtmlタグではないと思います追記で

var myAudio = document.querySelectorAll('audio'); 
 

 
for(var i=0; i<myAudio.length; i++) { 
 
    \t myAudio[i].addEventListener('play', function() { 
 
\t \t this.currentTime = 0; 
 
\t \t this.play(); 
 
\t }); 
 
}

<div> 
 
    <p class="song"> 
 
    <h3><strong>#1 Intro - The Oath</strong></h3> 
 
    <p> 
 
     <audio class="playback" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none"> 
 
<span>Your browser does not support the audio element.</span> 
 
</audio> 
 
</div> 
 
<div> 
 
    <p class="song"> 
 
    <h3><strong>#2 A State Of Trance Year Mix 2013</strong></h3> 
 
    </p> 
 
    <audio class="playback" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none"> 
 
    <span>Your browser does not support the audio element.</span> 
 
    </audio> 
 
</div>

：最初にこれを試してみてください。 <span>

Answer 2

（伝搬された）再生イベントのためにドキュメントをリッスンしているので、thisがドキュメントです。

this.currentTime = 0;からaudios[i].currentTime=0に変更してください。