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

Question

我有以下 html 和脚本 play/pause 通过单击按钮生成音频。

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

请注意，cowbell 曲目有 52 秒长，因此如果您要测试以上内容（为了您自己的理智），请将控件属性设置为音频标签，这样您就可以跳过大部分内容。

如何使用 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

audio

mp3

media