How To Make A Music Player Using HTML CSS And JavaScript

[@MelkoR4111]

I am a humble person, i see your video, i press Like

[@GreatStackDev]

Thanks Kirill, Glad you like this tutorial to make music player using HTML CSS JavaScript

[@MelkoR4111]

@@GreatStackDev i enjoy watching all of your stuff. Dont give up

[@gravindra_007]

What if we wanna add lyrics to it

[@S-Lomar]

Be humble just like the way Lamar's song said 🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣

[@irshadkhan-z7h5e]

Hey gus please me to work on pauses icon

[@cliphord_kapelo]

I'm a beginner, but doing these makes me think I'm a pro. Thank you so much.

[@covervideo8738]

hi! How is your progress?

[@VisionFrameOfficial]

Sir you are becoming my addiction of making the projects....lots of respect to you from bihar sir ❤️

[@awake8368]

Excellent I know little bit javascript but still I understand everything in js code in this music player project only because of your explanation. Thanku so much

[@basseyoliver3972]

Sir, you are a huge blessing to my journey of web development. Be blessed richly Sir!

[@GreatStackDev]

So nice of you, Thank you so much

[@albina272]

This was an awesome tutorial. Can you make another video adding more features to this project like an entire playlist so that we can have a "skip/next song" button and volume button as well? That would be amazing! :) Thank you!

[@FactsDude01]

yeah that will really amazing

[@rabanou2931]

THANK YOU ! I cant stop watching your videos, I have learned so much from you, I just enrolled to software engineering and this is helping me a lot, best teacher ever ! keep posting your great videos pls

[@YouTubech11]

Where you work bhaiya

[@actiniumbinary2702]

This is the esiest tutorial I have found so far. Thank you bro.

[@iMonu]

This was really a great tutorial...now let's add more functionality to those buttons such as pressing the previous button restarts the track or adding volume controls. We can also add option to choose custom songs from finder/file explorer...waiting for a part two of this video

[@GreatStackDev]

Sure bro, If i will get good views on this video, We will make next part too

[@lucaslustosacoelho4855]

@@GreatStackDev part 2 ?

[@NabeelAhmed_485]

Where are part 2 ???

[@femmytedreycryptoworld7875]

@@GreatStackDevpart 2

[@pkhatua7964]

Yes.. Volume control is required.. Requesting for part 2

[@ankit-sahani]

thank you so much for the easy tutorial I made the player by watching this and add more songs to it it's feels like I am using Spotify without hearing any adds 😁

[@rahulshrivastava8590]

Hey will you help me know how you added more music

[@defth]

Great tutorial! Would be awesome to get a part 2 to show how to add more functionality like skip next, go back, etc.

[@sandhya5424]

I feel really great bcozz today i find your channel.......thank you for make my day sir❤

[@GreatStackDev]

Glad you liked my tutorials.

[@shaikharish8201]

Great video! Please Create Part 2 with more functionalities

[@GreatStackDev]

Glad you liked it. We recently published Spotify clone. Please check it. Thanks for your comment. 😊

[@wrestlingshorts]

You earned a new subscriber brother

[@metcanalesandro6769]

Just a helpful tip I hope. When you click on that progress bar sometimes it doesn't work so smoothly so I used "oninput" instead of "onchange". It seems that it resolved that issue

[@gagankori9799]

THANK YOU ! I can't stop watching your videos, I have learned so much from you. Excellent, I followed each and every step and I'll do that successfully. ♥ ♥

[@SoftTech2005]

Kekaa broo you rock killing the easy coding your videos are super and wonderful explanation

[@ifeomanwaboku7771]

You are really intelligent and exceptional in your teaching, you really make me enjoy coding. God bless you.🙏🙏🙏🙏

[@MichaelMullerMWW]

Beautiful. Now, allow us to feed it a list of mp3 files, and auto-play next when a song ends. Prev track, Next track.

[@udayvlogs4real747]

Omg I don't how many new things I learned from this one thanks a lot 🙏🏻🔥

[@ShivamSharma-fh9qh]

Bhia I have learned a lot of things from you. Thank you so much.. ❤❤❤

[@briannaglenn4549]

Can you make a part 2 video on how to add more songs?

[@ManojKumar-be1bi]

Wonderfull Explanation sir thank You ❤

[@rufusopeyemi268]

Wow! That awesome, I really love it I will also try mine.

[@GreatStackDev]

Glad you like this music player tutorial

[@cristianferreira3350]

SO AMAZING!!! IM LEARNING A LOT BECAUSE OF YOU!!

[@GreatStackDev]

Thanks Cristian, Yes Song name is "GO" that is too short name that's why i have added any random song name

[@sounakpramanik6043]

Pls make a part 2 as well where we can add more songs ....

[@rockytechmax2578]

Best And Simple Tutorial😀😀👍👍

[@technologyanalysis5869]

Thank you so much you explained very well i learned so much from this tutorial

[@raghavmanish24]

thanku sir ....after completing this project my motivation lavel get boosted ........thanku again

[@952a259]

Thank You very much for so helpful and simple to understand video! 👍💪♥️

[@GreatStackDev]

Glad it was helpful!

[@SergioRamirez-dk8zk]

SUPER DOPE thanks amigo!!

[@GreatStackDev]

Thank You! 😊

[@ulflundahl5572]

Thank you very much for this video and keep up the good work!

[@GreatStackDev]

Thanks, will do!

[@shtick004]

many thanks!! Very helpful👍👍

[@sanketsingh5555]

Bhaiya yahi toh chahiye tha ❤️❤️

[@Motivated-mind-rich]

Thank you very much for your useful video ❤

[@Devrim283]

if the top circle's icons are not centering remove; line-height on .nav circle and add display: flex; align-items: center; justify-content: center; great tutorial thnx!

[@haqqiarifin5015]

mine is foward icon arent centering, the play and backward are centered

[@AaqilKulmie]

Thankz Teacher from Somalia.

[@aforangular3759]

Ek hi dil hain kinte bar jitoge sir ji!?

[@Gamer_Guy2.0]

This was an awesome tutorial, i really understood everything you did, I followed every step you took in making this websites, this is a fantastic website, this video will make me become a better web designer, Keep It Up

[@unnath1762]

Great tutorial, many thanks. If anyone uses firefox like me, then the css psuedo element ::-webkit-slider-thumb isn't supported. You will have to use ::-moz-range-thumb instead, although it is not recommended to use in production according to mdn

[@hephaestusdiwi]

sir can u answer my question? why my icon didnt change if im play music?

[@zbysiu100]

Thank you very much for your tutorial. This is a very useful. Regards.

[@KiggunduJude120]

Thanks for the content. Ill be forever greatful

[@venkatchalam6385]

Thanks bro, this is very helpful,also post many more like this,,

[@GreatStackDev]

Sure I will, Thanks for your comment

[@JaGaNezhil]

Great work🔥

[@alimiabiodun3444]

I really love your explanation

[@joshuawilliams3998]

Thanks for this tutorial! Do you think you'll make a part 2 any time soon?

[@devashrikumawat3843]

It's awesome I am student of computer science thnku for giving me a new project 🥰❤️

[@devashrikumawat3843]

@Fawad Saboor I am study in Jaipur nd I have much time to learn computer science

[@devashrikumawat3843]

@parwani yes I have started nd I am in final year of bca

[@kite8547]

I'm amazed😊🥳

[@Jiyeonmw]

I appreciate it. I've learned o lot from This video!

[@maggamong9495]

Excellent thanks you teacher🙏

[@ayushimaurya167]

I really impressed 😁

[@upendramadhugundu9795]

This is a good tutorial. Can you please update the menu of the song list and song will change as previous/next in the song list. And when we are click on the list of songs that song should play. thanks for this video, please update the previous mentioned features. Thank you..!

[@AnonymousCoder-007]

ufff the thumbnail of this song 🥵

[@Aasha_08]

the video is really helpfull......... thank u so much sir

[@vaajithshaik1062]

Tq soo much sir it was helpful for our project

[@2goldenchasma559]

Brother How can we add many songs aur a list of in this Music player

[@JagmeetSingh-ym6jj]

Thank you sooo much Very helpful

[@karunaharathijio9788]

Nice teach.....👍❤️❤️

[@neerchauhan3688]

Thank you so much Sir 🙏

[@Anand-Tech-And-Vlogs]

This video is helpful for us !

[@GreatStackDev]

glad it helped

[@S-Lomar]

Thank you for sharing your thoughts on KZbin 🤩😊😘🥰❤️💕♥️♥️♥️♥️💓😊😘😘❤️😘😊❤️

[@pedramnaeimaei9125]

realy helpfull ty🙏🙏

[@MuzammilNawaz-f4q]

Great work Sir But I think you forgot to write script for forward and backward icon

[@codinghub5540]

Sir, how to add playlist of song in this and how to operate previous and next icon.

[@nqkfox]

Hello there, great tutorial. But when I'm writing the code, the thumb-bar doesn't run or update, it was even staying in the middle of the bar and not moving. I've tried to find out what's wrong, but all I know is the problem is in the script cus when I deleted that part is back to normal (and can't play music ofc) It'd be great if you can check the code again soon, I really like your tutorials!!

[@danielburela3520]

I have the same problem

[@sandwicheems]

I learned so much is this project! Thanks!

[@goatlm10m]

I AM Wating For Your Next Website Tutorial.

[@true_feeling7661]

Is there an alternative for -webkit-appearance? It only works in Google Chrome Browser but not in Firefox.

[@bucketflow]

try with appearance: none; thanks, man

[@sciencespectrum3855]

Sad thing is that colleges don't teach this🥺

[@SiddhiChaukate]

Yes and they expect us to just automatically know this

[@alonemafia4554]

awesome bhai , also recommend

[@justinekenyansa]

Awesome, but why are you using the Webkit vendor prefix? It's being phased out.

[@AbrarulRhythm]

Very helpful video 👍

[@GreatStackDev]

Thanks Abrarul, Glad you liked this music player design tutorial

[@cutbybash]

great video but i think you should explian as you code not after you written it if that makes sense but really good content

[@Chandra-uw1qr]

I use different song and progress bar reaches the end before the song ends. My song is 2:32 min and the progress bar reaches the end before 1:45 min. Please tell me the solution for this. I want the progress bar reaches the end with the song duration i.e. if song is about to end, then the progress bar also able to reach the end.

[@saching2080]

Please check if u have added this code song.onloadedmetadata = function(){ progress.max=song.duration; progress.value=song.currentTime; }

[@Ghulammustafa-wg6cy]

Thank you Sir 🥰🥰

[@GreatStackDev]

Always welcome

[@shamrankatalemwa7005]

WebKit appearance is not working what can I do

[@JoshuaJonathan-tz8cv]

same here too i dont know what to do

[@dhanjitznath]

The tutorial was extremely Awsome . I just faced an issue where my song is long and the progress bar just end at the last part. my song keeps playing . i meant that the progress bar is not even with the song duration.

[@dhanjitznath]

Thank You. Anyways . ❤

[@AbhirupandAksharavlogs]

Thank you sir..its working

[@layou1000]

I love your work and will love to join your group. Please let me know what I can achieve by becoming a member. Will I have access to all your material? Is there a link where I can see what's available? I prefer to follow you on KZbin instead of downloading the code for the programs. I'd like to see a survey page as part of your material. I should become a member sometime next week

[@HUMAN-007]

Thank you sir ❤️

[@Khingkhai]

Great video! Is there any possible way to code something just like this window embedded within the whole page that plays mp3 files in order as you queue them up? Like a 24/7 online stream?

[@hannakulikowska1004]

Thank you!!! Awesome!

[@HeryFitahiana]

The son is very good❤

[@keertirathore3842]

Bro in my case the script was not working Why? Pls give me solution as soon as possible

[@AizenPlaysCODM]

Why is it my play button wont work? How to fixed ?

[@smsaikat9329]

Create also some react js projects..🇧🇩🇧🇩

[@zenith9122]

hello i love your video! But I think i encountered a bug where the song will automatically play when i frst load it in and when i drag the progress bar to start.

[@GreatStackDev]

it's not bug, any user will only touch the progress bar when they want to play. As they will drag the progress bar any where it will start playing at that position.

[@PoojithaGummireddy]

Excellent sir but why I'm not getting any icons in the output sir?

[@Anand-Tech-And-Vlogs]

Nice video broo !

[@GreatStackDev]

Thanks

[@obidikeann166]

dang! this is good man.

[@GreatStackDev]

Thanks Obidike, Glad you like this tutorial to make music player using HTML CSS JS

[@vannyakh]

Good idea 👍💡

[@GreatStackDev]

Thanks 👍

[@idkmyname4214]

muchas gracias 🥰🥰

[@BaeristaVR]

Hi! New subscriber here.

[@khanhamza6707]

Image is not displaying on the website..? What to do now..?

[@Varubsbsbh]

Please make the javascript tutorial playlist 🙏

[@KyotoStar]

I have everything perfect however when I click on the play button it does not play the audio in the end. My code matches perfectly not sure why it doesn't work? (I did use a different song from a different source)

[@avakinmio9080]

Check the console on your browser, when you click play. You will see the error message, and the line the error occurred.

[@KyotoStar]

@@Geetakashcoding it turns out one letter in my code was capitalize and when I lowered cased it everything started working fine lol

[@7ty9lyrics]

can you share your kits link of fontawsome i cant find it

[@CodingwithSonal]

what is the use of the nav buttons and also the forward and backward buttons....they are not functional

[@n.singh_jaat4421]

What type of application is static or dynamic?