如何使用javascript或jquery單擊按鈕使多個mp3文件一個接一個播放？

Question

我有以下 html 和腳本可以通過單擊按鈕來播放/暫停音頻。

<audio id="testAudio" hidden src="sample.mp3" type="audio/mpeg">
</audio>

<button id="playAudio">Play</button>


<script>
document.getElementById("playAudio").addEventListener("click", function(){
    var audio = document.getElementById('testAudio');
  if(this.className == 'is-playing'){
    this.className = "";
    this.innerHTML = "Play"
    audio.pause();
  }else{
    this.className = "is-playing";
    this.innerHTML = "Pause";
    audio.play();
  }

});
</script>

我需要對其進行編輯，以便按照定義的順序一個一個地播放多個 mp3 文件，並且僅在播放最后一個音頻時停止。

我只是不知道如何使它起作用。 任何人都可以幫忙嗎？

Answer 1

您可以為音頻標簽注冊一個事件處理程序，首先是在當前文件完成后；

document.getElementById("testAudio").addEventListener("ended",function(e) {
  // Play next track 
});

如果您有一個要在數組中播放的曲目列表，則只需在當前曲目結束后播放下一個曲目即可。 使用 setTimeout 函數，您可以在曲目之間設置延遲。 一個簡單的例子如下；

<script>
var playlist= [
  'https://api.twilio.com/cowbell.mp3',
  'https://demo.twilio.com/hellomonkey/monkey.mp3'
];
var currentTrackIndex = 0;    
var delayBetweenTracks = 2000;

document.getElementById("playAudio").addEventListener("click", function(){  
  var audio = document.getElementById('testAudio');
  if(this.className == 'is-playing'){
    this.className = "";
    this.innerHTML = "Play"
    audio.pause();
  }else{
    this.className = "is-playing";
    this.innerHTML = "Pause";
    audio.play();
  }
});

document.getElementById("testAudio").addEventListener("ended",function(e) {
  var audio = document.getElementById('testAudio');      
  setTimeout(function() { 
    currentTrackIndex++;
    if (currentTrackIndex < playlist.length) { 
      audio.src = playlist[currentTrackIndex];
      audio.play();
    }
  }, delayBetweenTracks);
});
</script>

請注意，牛鈴音軌的長度為 52 秒，因此如果您測試上述內容（為了您自己的理智），請將控件屬性設置為音頻標簽，這樣您就可以跳過其中的大部分內容。