How to create Music player with pure HTML, CSS, JS

How to create Music player with pure HTML, CSS, JS

In this video, you'll learn to create awesome music player with pure HTML, CSS and JS. Our music player has modern looking designs, with cool animations like play/pause animation, disk rotating animation and pulse animation. Our music player has working forward/backward buttons with seek-able song slider.

Buy Me a coffee -

If you like this tutorial make sure to hit like button and show your support by subscribing my channel.

Time Stamps -
00:00 - Intro
00:16 - Demo
02:05 - Next Tutorial Topic
02:28 - Folder Structure
03:11 - Desigin the music player
35:25 - Done

👇Subscribe My Channel👇

👇Follow me on Instagram👇

--Music Credit--
––––––––––––––––––––––––––––––
Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0
Music promoted by Audio Library

• Soaring – Ghostri...
––––––––––––––––––––––––––––––

❤❤ Have a nice day ❤❤

Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

[ModernWeb]

How it this ? Can we hit 2k+ views on this. And also, who want tutorial on "visiting card designer", "full e-commerce website"

[KingGoatNaldo]

I subscribed because of this video, I have searched and watched different YouTube videos but this is the best for me, coz u explained everything and you touched every angle

[DiamondBoy]

If anyone had an error with the $ sign use at 26:28. Use the backtick key. Depending on what keyboard you have its underneath the escape key and left of the 1 key. it should look like this: `url('${song.cover}')`;

Hope it helps
👍

[erlendglads]

Omg AMAZING video. This was the only turorial that worked for me😊. Great job!!

[shinalee]

Thank you for this awesome tutorial! I learned loads! <3

[ibrahimsuleiman]

Wonderful brother exceptional tutorial

[jeffreyclaybrook]

33:17 sounds exactly like the voice in my head anytime I can't get something to work 🤣

[ncodigital]

Great video! built it right along with your instruction.

[HemantakumarPaswan]

Kunal Bhai i Love you❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
you tutorial is very neat and clean
it helps me a lot

[baboon_hero]

This is a really great tutorial, thank you very much 😊

[danielspark]

are you awesome !! i love this tutorial, thank you for the video :)

[pavanpendyala]

Keep Going.. I want to learn more from you😊😊

[inyekakampekobokota]

this video is very helpful thank you
, in the other video you were not explaining like in this one

[johnbunol]

theres problem in 26:18 mins why in my project the sigb "$" is error?

[shinigami]

When i add next and previous button the play/pause button disappears. What should i do? Plz reply fast i have to complete this project asap.

[nrityakala]

hey, you did splendid work i am even trying to make this music player with your help but can you please clear me one thing that is, you added img in backward and forward buttons, which image did you use ?

[imlispeak]

Could you please tell me why do you use content property?

[therealpepeu]

If you click next song it won't start spinning. So I made it like this:
const playMusic = () => {
music.play();



disk.classList.add('play');
}
}
If the disk class doesn't contain the play class, add it.

[The_Study_Bug]

Awesome tutorial!!!Could you make a tutorial teaching how to create a dictionary using JS?

[neon-okoh]

my disk sort of 'collapses' and rotates without the cover whenever i press play + i can't seem to put the duration inside the music player, it just goes to the very edge of the page. yes, i did follow everything and made sure my code was correct