javascript - Html5如何只允许播放一首歌曲并重启

Question

您好，我一直在寻找答案，但找不到答案。我想做的是在网站上拥有多个音频文件，并且一次只允许播放一首歌曲。但是如果你播放一首歌然后播放另一首歌曲然后回到第一首歌我希望那首歌从头开始而不是从我离开的地方开始。到目前为止，这是我的代码

 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

我认为您的 eventListener 已关闭，不确定循环。先试试这个:

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

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

<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>

旁注我不认为<I>是一个属性 html 标记。改为<span>