Create a Custom JavaScript Audio Player [Part 2] With Progress Bar

Originally published here on YouTube.
(Give me a thumbs up and subscribe if you found this useful 🙏).

👉 Check out part one here

👉 Get the source code here: https://github.com/codebubb/javascript-audio-player (checkout the master branch for starting point and progress--bar branch for the completed project

👉 The visualisations article on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

01:58 Refactoring original app
03:51 Progress bar elements
09:55 Styling
12:32 Next / Previous Buttons
18:14 Timer (elapsed time)
21:52 Adding progress bar animation
26:08 Configuring progress as a 'Seek bar'
28:47 Play next track
30:29 Completed Project & Wrap-up

— Follow Me —
Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.juniordevelopercentral.com/
— Thanks! —

So in this follow up tutorial, we'll be adding some more features to our custom JavaScript audio player including a custom progress bar, next and previous buttons as well as adding a seek component to the progress bar and also a continuation feature that moves to the next song when the previous one has finished playing.

In the first tutorial we created a customised audio player but I hadn't really planned on having some of the features that were suggested (in particular the next/previous buttons) and to make life easier we'll start off by doing a bit of refactoring to get our audio player to work the way we'd like it to.

Then we'll move on to adding all of the progress bar elements via JavaScript so we don't need to add any more HTML to our basic placeholder for the app.

Then we'll update our styling for the new progress bar component and work on implementing the next and previous buttons.

Once the buttons are working the way we want them to, we'll create a method that will update the elapsed time for the currently playing audio file and add some animation to our progress bar.

With most of the hard work set up we'll look at creating the 'seek' functionality of the progress bar so that the user can navigate between sections of the song and we'll add some events to make the next song in the playlist play after the current one has ended.

So I hope you find this follow up tutorial for our custom JavaScript audio player to be useful and don't forget to checkout the first tutorial and the rest of the Junior Developer Central web development tutorials here: