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

YouTube Excerpt: 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: https://youtu.be/jZL9gVwxO-U 👉 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: Channel Handle @codebubb

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...

Read Full Article 🔍

Curious about Create A Custom JavaScript Audio Player [Part 2] With Progress Bar's Color? Explore detailed estimates, income sources, and financial insights that reveal the true scope of their profile.

Source ID: _EDAEboZRMU

Category: color style guide