如何让多个mp3文件一个接一个地点击使用javascript或jquery的按钮？

Question

我有以下的html和脚本来通过单击按钮来播放/暂停音频。

我需要编辑它以这样一种方式为在确定的顺序播放多个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秒，因此，如果您的测试上面的（你自己的理智）控件属性设置为音频标记，以便您可以通过大部分跳过。