Create a Custom JavaScript Audio Player [Part 2] With Progress Bar
In part 2 of our JavaScript audio player tutorial, we'll add some more features as a progress bar component which shows time elapsed, seek bar and next and previous buttons.
Thanks to @Pendona Music for the suggestions!
👉 Check out part one here: • Create a Custom JavaScript Audio Player wi...
👉 Get the source code here: https://github.com/codebubb/javascrip... (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/d...
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: / codebubb
Facebook: / 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: Channel Handle @codebubb
On this page of the site you can watch the video online Create a Custom JavaScript Audio Player [Part 2] With Progress Bar with a duration of hours minute second in good quality, which was uploaded by the user Code With Bubb 29 July 2020, share the link with friends and acquaintances, this video has already been watched 6,553 times on youtube and it was liked by 85 viewers. Enjoy your viewing!
