Play multiple audio files sequentially or randomly

问题:

I am trying to play 3 audio files (with the possibility of more later) that run in the background. At this point I am simply trying to play them sequentially and have it loop back to the first audio file when the last is played. I believe I have tried almost every solution or combination of functions and I just can't get it to work. I run into one of two problems:

1. If I try using repetition with each audio stored in the array, the page will successfully play the first then tries to play the next two simultaneously, rather than sequentially. And it certainly does not go back to the first. Furthermore, if you notice in my html, I have a seperate ID for each player. Would it be better to put them all in the sample player 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. On the other hand, I can play each sequentially but each play needs to be hardcoded for and I cannot loop back to the first

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

Here is my 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>

I am not terribly familiar with javascript, I am wondering if there is another event trigger function built into JS that I am not using? Some help is greatly appreciated.

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