DEV Community

Cover image for How to create Music player with pure HTML, CSS, JS

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

Modern Web on August 17, 2021

Hello, Today we'll see, how we can easily create a music player using HTML, CSS and JS only. No other library. Our music player has three section o...
Collapse
 
iftikhar profile image
iftikhar hussain

Thanks for sharing this great Article, can you please tell me how you generated dirctory structure png above ?

i am working on blogs, i will add this type directory structure which will be very helpfull for readers.

dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
themodernweb profile image
Modern Web

I create these directory image with figma😄

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman

Great write up, you do a good job of taming the complexities of writing a music player👍 Looks great

When you navigate to the different pages after starting the player does the player continue to play?

Can you play an individual mp3 or just pre defined playlists?

Can you add playlists dynamically?

It would be really cool if users could add thier music libraries. I personally have 90,000+ mp3's i've collected over the years and a nice web based solution would be awesome.

Preferably something not cloud based. Hosting that many mp3 in the cloud would cost way to much.

Again great article

Happy Coding

Collapse
 
cristianotrindade profile image
Cristiano Trindade

Parabéns

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
themodernweb profile image
Modern Web

Glad you liked☺️

Collapse
 
dougbug98 profile image
dougbug98

How did you get those pre and nxt images because when I type the same exact code it doesn't work for me. They are just two small narrow lines. I'm using atom btw.

Collapse
 
themodernweb profile image
Modern Web

Have you added the font awesome CDN because those icons are from font awesome

Collapse
 
dougbug98 profile image
dougbug98

No not at all, I never even heard of font awesome. I'm using Atom btw and I'm just learning JavaScript but I can't get the disk to spin or anything like that despite following along so I don't think I have a link with app.js to my index.html. for example the link from css to html is very easy for me to setup and use but linking my JavaScript to my index.html is tricky for me.

I know my message is lengthy lol and I wanna thank you for replying to my original message as well.

Thread Thread
 
themodernweb profile image
Modern Web

No worry, you can find about how to add a script and font awesome in detail below websites☺️

  1. Script- w3schools.com/tags/tag_script.asp
  2. Font awesome- w3schools.com/icons/fontawesome_ic...
Thread Thread
 
dougbug98 profile image
dougbug98

That's dope, hey thanks again for the information and the links as well.

Collapse
 
devpedroa78 profile image
Pedro Antonio

Awesome. Thanks.

Collapse
 
wagaanaa profile image
Wagaana Alex

Great tutorial, but how do I get the assets

Collapse
 
themodernweb profile image
Modern Web

You don't need assets folder you can use your own images and music for this player.

Collapse
 
onedamianocoder profile image
onedamianocoder

I've followed this textual tutorial, and i found it is an awesome project. Well done! Great!!!

Collapse
 
ojamzalayo profile image
ojamzalayo

Great write up

Collapse
 
themodernweb profile image
Modern Web

Thanks ☺️

Collapse
 
prabhukadode profile image
Prabhu

Lovely

Collapse
 
themodernweb profile image
Modern Web

Thanks ☺️

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
themodernweb profile image
Modern Web

Don't post it because i want this blog to be exclusive on dev.to

Collapse
 
omkardubey07 profile image
Omkar nath dubey

Thank you so much for this post sir to grow up our skills.

Collapse
 
imiahazel profile image
Imia Hazel

Thanks for the amazing concept.

Collapse
 
deden97693022 profile image
Deden • Edited

why the control span doesn't work

Image description

Collapse
 
syokonline profile image
syokonline

hello can it play music when phone is sleep?

Collapse
 
mediox409 profile image
Mediox Publicitarios

Excelente amigo justo lo que buscaba no vendes la plantilla

Some comments have been hidden by the post's author - find out more