Complete Music Player From Scratch w Javascript

Learn how to make a complete music player from scratch using HTML, CSS & Javascript. A great way to customize and display an album for an artist or band, or to just move from the boring default HTML audio player design.

Get The Source Code From All Of My Videos:

What you will learn:
How to-
- Build a clean neumorphic music player design
- Create and customize range sliders
- Create a slider to switch between tracks
- Display the current time of the audio and its duration
- Create a working timeline slider
- Create a working volume slider
- Build a mute button
- Automatically start the next song
- And much more...

Project Dependencies:
-----------------
Image And Audio Files:

Google Icons:
-----------------

I do not own any of the images or music used in this video. All images and audio files are simply used as placeholders for the design.

Don't hesitate to ask for help if you face any trouble re-creating a project from any of my videos. I will gladly help :)

All of my project are made from scratch by yours truly. I don't take anyone's code as my own, but I do often see my code being copied and pasted into other channels for their tutorials, so of you see an exact copy of a project on another tutorial, just know that the one on my channel is the original one.

Extra Links:
-----------------

Follow me on Instagram:

My Products:

Support Me To Keep Creating And Improving My Content:

Tags:
-----------------
#music
#app
#javascript

music player app from scratch javascript
audio player design with javascript

[emptyios]

Very nice video ! All clear ! i just noticed one thing, when click on volume mute and demute, it dont put the progress bar to 50% again but on last value before muting. So for anyone who searching, by adding : ' let volumeId; ' before click event and add this command : ' volumeId = volumeSlider.value / 100; ' before if volume muted condition, it will keep last progress bar in memory before entering condition and once done when entering in else condition, just set audio.volume = volumeId; and Done ! The player will keep last volume in memory and bring back when unmute player !

[vijayd]

I fully tried till end and worked fine. took me some time to retrofit. finally found it is awesome and amazing feel while playing

[Andrew-Tsegaye]

I've no words to express you. You're the best developer in the world for me.

[iagomene]

nice, i added a cool background, changed colors here and there, some other designs... looks delicious, thanks for the tutorial.

[brr]

Thanks, you helped me a lot with that input styling idea - it works like a charm on my proj

[PervezAlam]

If you are not showing full html code, then when you are using icon name you should display that this icon library we should use to show these text as a icon

Which Icon library you are using to for these icon??

<span

<span

<span

because these are showing as a text at HTML Page.... plz suggest

[julioalbertomolinamazarieg]

It didn't work for me from the beginning from the first play, I wrote all the JS code and nothing worked for me, only the design, I already check line by line and everything is well written, I don't know what went wrong😮‍💨

[Payan]

I’m working on a Shopify beat/producer kits selling store. I need to link an audio player like this so the customer can preview the music. Are you interested in working together? I think I figured out how to link the audio player to the product but I just need the code for the custom audio player.