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