HTML - Audio Playlist
Why Stack Overflow recommends it
Stack Overflow users cite it as the tutorial they followed when asking why their audio playlist code does not advance to the next track, fire the ended event, or block default link behaviour.
Recommended by 0 people across 0 different months, 2017 to 2022.
What it is
A 2016 beginner tutorial that builds an HTML5 audio player with a playlist from scratch using the audio element, jQuery and JavaScript. The presenter walks through the markup and script and links a demo and download on GitHub.
What people said
Cites james_D · 2017-11 · Stack Overflow · on “HTML/JS Audio playlist pause/resume on page exit”
I'm not sure if what I'm being asked to do is possible, I still don't have much expertise in JS, so I've been googling and so far came up short. We're using a program called RiseVision to run a presentation, it's basically automated & beefed-up Powerpoint. So we've got a slideshow, and I managed to get music running in the background on a playlist, however, sometimes we will set these presentations to exit, then switch to a youtube video, then start the presentation over again. What I'm being asked to do is get the music to resume from the point that it was at, or at least skip to the next song, once the slideshow starts up again after the video. due to the nature of the RiseVision program,
Cites Pedro Souto · 2018-12 · Stack Overflow · on “Audio Playlist in HTML”
I Just solved it, thanks to everyone. I'm trying to understand how to do Audio Playlists in html so I tried to follow the tutorial in here: [this video] (code presented below), to achieve my goal. The only problem is that it doesn't work, when a song ends it returns always to the second song on the list, also the console tells me there's a "Uncaught (in promise) DOMException", that I don't know how to solve. 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");
Cites HanSolo0001 · 2019-11 · Stack Overflow · on “JavaScript not preventing the default function for audio player”
So I've been following this video [this video] , and for the life of me, I cannot figure out why my code is doing the default new page with my audio files and not preventing the default. Once I figure that part out, I should be able to test the event listener at the bottom of my code when my song ends. JavaScript audioPlayer(); function audioPlayer() { var currentSong = 0; $("#audioPlayer")[0].src = $("#playlist li a")[0]; $("#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].addE
Cites fausdv · 2022-10 · Stack Overflow · on “ended event not firing in a playlist”
I've been following and personalizing this youtube video [this video] to create a playlist. My problem is that when an audio ends, the event listener does not detect it, so the following audio is not automatically played. I think this may be because my audios are played on clic (with "onclick" in the html), and not loaded in the player. Here is the html : <body> <audio controls id="audioPlayer" autoplay="false"> Sorry, your browser doesn't support html5! </audio> <ul id="playlist"> <li class="current-song" > <a class="audio song" src="test.wav" onclick="playAudio('test.wav')"> test </a></li> <li><a class="audio song" src="algebrasuicide_fathersbythedoor.wav" onclick= "playAudio('algebrasuicide_fa