Menu
I have this little html text where I can choose some songs I want to listen to. How is it that from here I can make pressing the Play button, my selected songs play one after the other. In other words, by order and the second only starts after the first is finished. Thanks ´
NEW HTML AND SCRIPT
<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/rNmLYRp
900
There are quite a few things to take into account. I prepared an updated code for you, but please try to understand what is going on there. Let's start from the 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>
Nothing too fancy, I wrapped the checkboxes with their <label> to overcome the need of using id. Also, I'm having the path to the file as the value, because we're gonna use it to keep track which song is currently playing. Just one of the ways to do it. As you can see, I'm keeping the audio in a sound/ folder, so please update the values if you're gonna keep the audio files elsewhere.
Now, the harder part. Here's the updated JavaScript in playlist.js file with comments:
'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();
}
}
});
As you can see, we keep updating the content of the playlist array when interacting with the checkboxes. It plays the next song after the current one is finished, but only if there's a next song in the playlist.
I know we usually don't post full solutions on Stack Overflow, but since you're a beginner and you want to do something quite involved (and interesting!), I decided to help you with it. I hope you'll learn from it :)
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
