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