Custom MUSIC PLAYER in JavaScript

How to create your own custom music and audio player in JavaScript, Sass (SCSS), and HTML. With a few modifications, this can also be used for other forms of media, like video.

GeekLaunch produces educational videos covering such topics as Linux, web development (including HTML5, CSS 3, JavaScript, and PHP), Java programming, tips for power users, among many others. Subscribe: New video every Wednesday!

Not a geek? Start today!

[TheYakMaster]

Thanks for putting this video together. Love the straight forward explanation. Learned a lot : )

[rahulbm]

I loved the way you explain things clearly. You are Awesome.

[johnkerry]

You are the best man! Keep making this type of videos. Love you.

[clementmaonga]

Thanks for the video. When i previewed the player in my mobile browser. holding the handle to seek to the next position doesn't week. the only gesture that works is tapping the seek bar to a preferred seek position. i tried in chrome and uc browser. NB: on PC it does work as intended.

[baranidharanmurali]

u r just awesome.. continue the good work..🤗

[edwardchovaklinov]

If anyone wants to use it in React, don't forget to import the file i.e. import song from and have it in ogg format!

[natesims]

how would i get this to work for multiple audio players? i'm using this code for a current project of mine

[Yumako]

Ive been trying to build a similiar player, however the problem i have is that, once i start draggin the progress bar, and it leaves its parent container, it looses focus, any idea what that is?

[justina]

How do i have multiple music players for different sounds?

[rahulbm]

Can you please show how to create a sliding volume controller using this type of fill and handle.