Success! I finally figured it out, with a little help from everyone.
I've been diving into the world of Audio Playlists in HTML and attempted to follow a tutorial on the topic found here: https://www.youtube.com/watch?v=vtZCMTtP-0Y. However, I encountered an issue where the playlist wouldn't play correctly. After a song finished, it would always revert back to the second song on the list. Additionally, I received a "Uncaught (in promise) DOMException" error in the console which left me stumped.
function audioPlayer() {
var currentSong = 0;
$("#audioPlayer")[0].src = $("playlist li a")[0];
$("#audioPlayer")[0].play();
$("#playlist li a").click(function(e) {
e.preventDefault();
$("#audioPlayer")[0].src = this;
$("#audioPlayer")[0].play();
$("#playlist li").removeClass("current-song");
currentSong = $(this).parent().index();
$(this).parent().addClass("current-song");
});
$("#audioPlayer")[0].addEventListener("ended", function() {
currentSong++;
if (currentSong == $("#playlist li a").length) {
currentSong = 0;
}
$("#playlist li").removeClass("current-song");
$("#playlist li:eq(" + currentSong + ")").addClass("current-song");
$("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
$("#audioPlayer")[0].play();
});
}
In addition, I tried styling the currently playing song in blue using CSS. However, instead of just the active song being highlighted, all clicked songs turned blue.
#audioPlayer {
display: block;
margin-left: auto;
margin-right: auto;
}
#playlist li a {
color: white;
text-decoration: none;
}
#playlist .current-song a {
color: #0b80f7;
}
If anyone has any insight or suggestions on how to resolve these issues, I would be extremely grateful for your assistance.
Success! I finally figured it out, with a little help from everyone.