Tengo este pequeño texto html donde puedo elegir algunas canciones que quiero escuchar. Como es que desde aquí puedo hacer que presionando el botón Play, mis canciones seleccionadas se reproduzcan una tras otra. En otras palabras, por orden y el segundo solo comienza después de que finaliza el primero. Gracias
NUEVO HTML Y GUIÓN
<table id="tblsounds"> <tr> <td><input id="chk1" type="checkbox" value="1" /><label for="chk01">Song nº 1</label></td> </tr> <td><input id="chk2" type="checkbox" value="2" /><label for="chk02">Song nº 2</label></td> </tr> <tr> <td><input id="chk3" type="checkbox" value="3" /><label for="chk03">Song nº 3</label></td> </tr> <tr> <td><input id="chk4" type="checkbox" value="4" /><label for="chk04">Song nº 4</label></td> </tr> <tr> <td><input id="chk5" type="checkbox" value="5" /><label for="chk05">Song nº 5</label></td> </tr> <tr> <td><input id="chk6" type="checkbox" value="6" /><label for="chk06">Song nº 6</label></td> </tr> <tr> <td><input id="chk7" type="checkbox" value="7" /><label for="chk07">Song nº 7</label></td> </tr> <tr> <td><input id="chk8" type="checkbox" value="8" /><label for="chk08">Song nº 8</label></td> </tr> <tr> <td><input id="chk9" type="checkbox" value="9" /><label for="chk09">Song nº 9</label></td> </tr> <br><br> </table> <input type = "button" value = "Get" onclick = "GetSelected()" /> <button onClick="window.location.reload();">Remake your Playlist</button> <script type="text/javascript"> function GetSelected() { //Create an Array. var selected = new Array(); //Reference the Table. var tblsounds = document.getElementById("tblsounds"); //Reference all the CheckBoxes in Table. var chks = tblsounds.getElementsByTagName("INPUT"); // Loop and push the checked CheckBox value in Array. for (var i = 0; i < chks.length; i++) { if (chks[i].checked) { selected.push(chks[i].value); } } //Display the selected CheckBox values. if (selected.length > 0) { alert("Selected values: " + selected.join(",")); } }; </script> Like this i get a array as result. https://codepen.io/luis-pedro-the-sans/pen/rNmLYRpHay bastantes cosas a tener en cuenta. Preparé un código actualizado para usted, pero trate de entender qué está pasando allí. Empecemos por el HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Playlist</title> <script src="playlist.js" defer></script> </head> <body> <table id="tblsounds"> <tr> <td> <label> <input type="checkbox" value="sound/1.mp3"> Song nº 1 </label> </td> </tr> <tr> <td> <label> <input type="checkbox" value="sound/2.mp3"> Song nº 2 </label> </td> </tr> <tr> <td> <label> <input type="checkbox" value="sound/3.mp3"> Song nº 3 </label> </td> </tr> <tr> <td> <label> <input type="checkbox" value="sound/4.mp3"> Song nº 4 </label> </td> </tr> <tr> <td> <label> <input type="checkbox" value="sound/5.mp3"> Song nº 5 </label> </td> </tr> <tr> <td> <label> <input type="checkbox" value="sound/6.mp3"> Song nº 6 </label> </td> </tr> <tr> <td> <label> <input type="checkbox" value="sound/7.mp3"> Song nº 7 </label> </td> </tr> <tr> <td> <label> <input type="checkbox" value="sound/8.mp3"> Song nº 8 </label> </td> </tr> <tr> <td> <label> <input type="checkbox" value="sound/9.mp3"> Song nº 9 </label> </td> </tr> </table> <button id="clear" type="button"> Remake your Playlist </button> </body> </html> Nada demasiado elegante, envolví las casillas de verificación con su <label> para superar la necesidad de usar id . Además, tengo la ruta al archivo como el value , porque lo usaremos para realizar un seguimiento de qué canción se está reproduciendo actualmente. Solo una de las formas de hacerlo. Como puede ver, guardo el audio en una carpeta sound/ , así que actualice los valores si va a guardar los archivos de audio en otro lugar.
Ahora, la parte más difícil. Aquí está el JavaScript actualizado en el archivo playlist.js con comentarios:
'use strict'; const audio = new Audio(); const playlist = []; document.getElementById('tblsounds').addEventListener('click', event => { const isCheckbox = event.target.matches('input[type=checkbox]'); if (!isCheckbox) return; const songFileName = event.target.value; if (event.target.checked) { // Adding the song to the playlist playlist.push(songFileName); if (playlist.length === 1) { audio.src = songFileName; audio.play(); } } else { // Removing the song from the playlist const songIndex = playlist.indexOf(songFileName); if (songIndex >= 0) { const audioSrc = audio.getAttribute('src'); if (audioSrc === songFileName) { audio.pause(); const nextSongIndex = songIndex + 1; if (nextSongIndex < playlist.length) { audio.src = playlist[nextSongIndex]; audio.play(); } } playlist.splice(songIndex, 1); } } }); document.getElementById('clear').addEventListener('click', () => { // Clear all checkboxes document.getElementById('tblsounds').querySelectorAll('input[type=checkbox]').forEach(checkbox => { checkbox.checked = false; }); // Empty the playlist playlist.splice(0, playlist.length); audio.pause(); }); audio.addEventListener('ended', event => { // Play the next song if available const audioSrc = event.currentTarget.getAttribute('src'); const playlistIndex = playlist.indexOf(audioSrc); if (playlistIndex >= 0) { const nextSongIndex = playlistIndex + 1; if (nextSongIndex < playlist.length) { audio.src = playlist[nextSongIndex]; audio.play(); } } }); Como puede ver, seguimos actualizando el contenido de la matriz de la playlist de reproducción al interactuar con las casillas de verificación. Reproduce la siguiente canción después de que finaliza la actual, pero solo si hay una próxima canción en la lista de reproducción.
Sé que normalmente no publicamos soluciones completas en Stack Overflow, pero como eres un principiante y quieres hacer algo bastante complicado (¡e interesante!), decidí ayudarte. Espero que aprendas de ello :)