使用HTML5和javascript在背景中顺序或随机播放多个音频文件

Question

我正在尝试播放3个在后台运行的音频文件（以后可能还会有更多声音）。 在这一点上，我只是想按顺序播放它们，并在播放最后一个音频文件时将其循环回到第一个音频文件。 我相信我已经尝试了几乎所有的解决方案或功能组合，但我无法使其正常工作。 我遇到两个问题之一：

1. 如果我尝试对存储在数组中的每个音频使用重复播放，则页面将成功播放第一个，然后尝试同时而不是顺序播放后两个。 当然，它不会回到第一个。 此外，如果您在我的html中注意到，则每个玩家都有一个单独的ID。 将它们全部放在样本播放器ID中会更好吗？

    jQuery(document).ready(function (){ var audioArray = document.getElementsByClassName('playsong'); var i = 0; var nowPlaying = audioArray[i]; nowPlaying.load(); nowPlaying.play(); while(true){ $('#player').on('ended', function(){ if(i>=2){ i=0; } else{ i++; } nowPlaying = audioArray[i]; nowPlaying.load(); nowPlaying.play(); }); } }); 

2. 另一方面，我可以按顺序播放，但每次播放都必须进行硬编码，并且无法循环回到第一个

    jQuery(document).ready(function (){ var audioArray = document.getElementsByClassName('playsong'); var i = 0; var nowPlaying = audioArray[i]; nowPlaying.load(); nowPlaying.play(); $('#player').on('ended', function(){ // done playing //alert("Player stopped"); nowPlaying = audioArray[1]; nowPlaying.load(); nowPlaying.play(); $('#player2').on('ended', function(){ nowPlaying = audioArray[2]; nowPlaying.load(); nowPlaying.play(); }); }); }); 

这是我的html

<audio id="player" class = "playsong">
<source src="1.mp3" /> 
</audio>

<audio id="player2" class = "playsong">
<source src="2.mp3" /> 
</audio>

<audio id="player3" class = "playsong">
<source src="3.mp3" /> 
</audio>

我对javascript并不十分熟悉，我想知道是否我没有在JS中内置另一个事件触发函数？ 非常感谢您的帮助。

Answer 1

HTML

<audio id="song-1" preload class="songs">
    <source src="1.mp3" type="audio/mpeg" />
</audio>
<audio id="song-2" preload class="songs">
    <source src="2.mp3" type="audio/mpeg" />
</audio>
<audio id="song-3" preload class="songs">
    <source src="3.mp3" type="audio/mpeg" />
</audio>
<audio id="song-4" preload class="songs">
    <source src="4.mp3" type="audio/mpeg" />
</audio>  

JS

jQuery(document).ready(function (){
var audioArray = document.getElementsByClassName('songs');
var i = 0;
audioArray[i].play();
for (i = 0; i < audioArray.length - 1; ++i) {
    audioArray[i].addEventListener('ended', function(e){
        var currentSong = e.target;
        var next = $(currentSong).nextAll('audio');
        if (next.length) $(next[0]).trigger('play');
    });
}
});