Originally published here on YouTube.
(Give me a thumbs up and subscribe if you found this useful 🙏).
👉 Check out part one here
👉 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
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
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 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.