使用HTML5和javascript在后台顺序或随机播放多个音频文件

我正在尝试播放在后台运行的3个音频文件（可能会更晚）。 此时我只是尝试按顺序播放它们并让它在播放最后一个时循环回第一个音频文件。 我相信我已经尝试了几乎所有的解决方案或function组合，而我却无法让它发挥作用。 我遇到两个问题之一：

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

我对javascript并不十分熟悉，我想知道是否还有一个内置于JS的事件触发器函数，我没有使用它？ 非常感谢一些帮助。

Answer 1

HTML

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'); }); } });