Actualmente estoy tratando de reproducir otro audio si el audio actual está terminado, pero no obtengo ningún resultado exitoso. Se agradecería si se dan sugerencias, aquí está el siguiente código: -
document.addEventListener('DOMContentLoaded', () => { ms(); }); function ms() { var btns = document.getElementsByClassName("pas"); for (var j = 0; j < btns.length; j++) { document.addEventListener('play', function(e) { var songs = document.getElementsByClassName("pas"); for (var i = 0; i < songs.length; i++) { if (songs[i] != e.target) { songs[i].pause(); } } }, true); } } <audio class="pas" controls loop autoplay> <source src="https://www.mboxdrive.com/Drake_-_One_Dance_(Lyrics)_ft._Wizkid_&_Kyla(128k).m4a" type="audio/mp3"> Your browser dose not Support the audio Tag </audio> <audio class="pas" controls loop autoplay> <source src="https://www.mboxdrive.com/Coobie_-_Miss_You_(Official_Lyric_Video)(256k).mp3" type="audio/mp3"> Your browser dose not Support the audio Tag </audio>El js anterior es para permitir que solo se reproduzca un audio una vez. De todos modos, ¿es posible agregar alguna función para reproducir otro audio si el primero está terminado?
Puede probar el código de demostración aquí https://jsfiddle.net/mt1koznd/2/
Utilice el evento timeupdate y las propiedades .duration y .currentTime . Si tiene la intención de cambiar de jugador, debe eliminar el atributo de loop y eliminar el atributo de autoplay en todos menos uno o todos los jugadores jugarán al mismo tiempo. El ejemplo funcionará para una cantidad ilimitada de jugadores y regresará al jugador inicial si el jugador actual es el último.
Los detalles se comentan en el ejemplo.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style></style> </head> <body> <audio class="song" controls> <source src="https://www.mboxdrive.com/Drake_-_One_Dance_(Lyrics)_ft._Wizkid_&_Kyla(128k).m4a" type="audio/mp3"> </audio> <audio class="song" controls> <source src="https://www.mboxdrive.com/Coobie_-_Miss_You_(Official_Lyric_Video)(256k).mp3" type="audio/mp3"> </audio> <script> // Collect all .song into a NodeList then convert it into a real array const songs = [...document.querySelectorAll('.song')]; // Bind the timeupdate event to each .song songs.forEach(song => song.ontimeupdate = nextSong); // Event handler function nextSong(e) { // Get player's full duration in seconds const end = this.duration; // Get the current time spent playing in seconds let now = this.currentTime; // If the time playing reaches the duration... if (end <= now) { // Get the index position of player const position = songs.indexOf(this); // If the player is the last one start play on the first player if (position === songs.length - 1) { songs[0].play(); // Otherwise start ply on the next player } else { songs[position + 1].play(); } } } </script> </body> </html>