如何使用 javascript 或 jquery 单击按钮使多个 mp3 文件一个接一个地播放？答案

【问题标题】：How to make multiple mp3 files play one after another on the click of a button using javascript or jquery?如何使用 javascript 或 jquery 单击按钮使多个 mp3 文件一个接一个地播放？
【发布时间】：2017-06-05 10:05:52
【问题描述】：

我有以下 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 文件，并且仅在播放完最后一个音频时停止。

我只是不知道如何使它工作。有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery audio mp3 media

【解决方案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 秒，因此如果您测试上述内容（为了您自己的理智），请将控件属性设置为音频标签，以便您可以跳过大部分内容。

【讨论】：