How To Make A Music Player Using HTML CSS And JavaScript

Подписаться 1 млн

Просмотров 204 тыс.

50% 1

Learn How To Make A Music Player Using HTML CSS And JavaScript
#htmlandcss #javascript
👉 Download 30 JavaScript projects Source Code (Including Music Player):
greatstack.dev/go/30-js-projects
❤️ SUBSCRIBE: goo.gl/tTFmPb
This this video you will learn to create a music player for website, where we will add song and song's control button to play or pause the song. we will also add progress bar that will display the current time of the song. We will make this music play using HTML CSS and JavaScript
Download Image: drive.google.com/file/d/195og...
Song used: Go - NEFFEX (download from RU-vid studio audio library)
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Images Credit:
pexels.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ RU-vid: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

Опубликовано:

25 дек 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 256

@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!

@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

@blacky7273 Год назад

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

@actiniumbinary2702 10 месяцев назад

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

@defth 7 месяцев назад

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

@gagankori9799 8 месяцев назад

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. ♥ ♥

@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 9 месяцев назад

What if we wanna add lyrics to it

@S-Lomar 9 месяцев назад

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

@user-rq5ys9mu8x 8 месяцев назад

Hey gus please me to work on pauses icon

@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

@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

@7GINDIA 10 месяцев назад

Where you work bhaiya

@SoftTech2005 Год назад

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

@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

@cliphord_kapelo 6 месяцев назад

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

@covervideo8738 29 дней назад

hi! How is your progress?

@udayvlogs4real747 Месяц назад

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

@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 11 месяцев назад

@@GreatStackDev part 2 ?

@NabeelAhmed_485 9 месяцев назад

Where are part 2 ???

@femmytedreycryptoworld7875 9 месяцев назад

@@GreatStackDevpart 2

@pkhatua7964 7 месяцев назад

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

@zbysiu100 Год назад

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

@shtick004 Год назад

many thanks!! Very helpful👍👍

@ShivamSharma-fh9qh 5 месяцев назад

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

@technologyanalysis5869 3 месяца назад

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

@SergioRamirez-dk8zk Месяц назад

SUPER DOPE thanks amigo!!

@GreatStackDev 29 дней назад

Thank You! 😊

@Jiyeonmw Год назад

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

@joshuawilliams3998 11 месяцев назад

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

@ankit-sahani 3 месяца назад

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 😁

@ManojKumar-be1bi 4 месяца назад

Wonderfull Explanation sir thank You ❤

@JagmeetSingh-ym6jj 8 месяцев назад

Thank you sooo much Very helpful

@KiggunduJude120 6 месяцев назад

Thanks for the content. Ill be forever greatful

@AaqilKulmie 4 месяца назад

Thankz Teacher from Somalia.

@ulflundahl5572 Год назад

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

@GreatStackDev Год назад

Thanks, will do!

@952a259 9 месяцев назад

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

@GreatStackDev 9 месяцев назад

Glad it was helpful!

@alimiabiodun3444 8 месяцев назад

I really love your explanation

@kite8547 Месяц назад

I'm amazed😊🥳

@ayushimaurya167 2 месяца назад

I really impressed 😁

@raghavmanish24 2 месяца назад

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

@Aasha_08 11 месяцев назад

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

@hannakulikowska1004 9 месяцев назад

Thank you!!! Awesome!

@rockytechmax2578 9 месяцев назад

Best And Simple Tutorial😀😀👍👍

@wrestlingshorts 11 месяцев назад

You earned a new subscriber brother

@vaajithshaik1062 11 месяцев назад

Tq soo much sir it was helpful for our project

@shaikharish8201 20 дней назад

Great video! Please Create Part 2 with more functionalities

@GreatStackDev 19 дней назад

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

@JaGaNezhil 3 месяца назад

Great work🔥

@rufusopeyemi268 Год назад

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

@GreatStackDev Год назад

Glad you like this music player tutorial

@travellinggoose Год назад

Awesome, thanks.

@neerchauhan3688 Год назад

Thank you so much Sir 🙏

@sandhya5424 9 месяцев назад

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

@GreatStackDev 9 месяцев назад

Glad you liked my tutorials.

@sanketsingh5555 Год назад

Bhaiya yahi toh chahiye tha ❤️❤️

@AbhirupandAksharavlogs 4 месяца назад

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 RU-vid 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

@sounakpramanik6043 10 месяцев назад

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

@aryansaini2176 13 часов назад

loved it

@alonemafia4554 7 месяцев назад

awesome bhai , also recommend

@pedramnaeimaei9125 8 месяцев назад

realy helpfull ty🙏🙏

@upendramadhugundu9795 10 месяцев назад

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..!

@HUMAN-007 11 месяцев назад

Thank you sir ❤️

@venkatchalam6385 Год назад

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

@GreatStackDev Год назад

Sure I will, Thanks for your comment

@Devrim283 6 месяцев назад

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 2 месяца назад

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

@ikejijoshua4140 4 месяца назад

God bless you

@lajuefejuku1995 Год назад

Bravo.........

@metcanalesandro6769 2 месяца назад

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

@karunaharathijio9788 Год назад

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

@mohammedminhaz8 Год назад

I AM Wating For Your Next Website Tutorial.

@areeb6703 3 месяца назад

Thank you

@briannaglenn4549 Год назад

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

@meninubunitu Год назад

I learned so much is this project! Thanks!

@S-Lomar 9 месяцев назад

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

@Anand-Tech-And-Vlogs Год назад

This video is helpful for us !

@GreatStackDev Год назад

glad it helped

@aforangular3759 Год назад

Ek hi dil hain kinte bar jitoge sir ji!?

@sofaking555 7 месяцев назад

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?

@anacletocorbeta3846 Год назад

Waiting for part 2

@black2thepiink 7 месяцев назад

tq bro i did too

@alicefabiaosoane8471 Год назад

Great toritorial

@idkmyname4214 4 месяца назад

muchas gracias 🥰🥰

@bababibababu Год назад

so goog dude

@trikooltk1581 29 дней назад

quede facinado con tu video tutorial no se ingles pero te entendi ... porque lo haces paso a paso sin cortar ni saltar.. gracias ojala puedas subir un reproductor para radio shoucast o zenoradio

@akkinivasanthk9551 11 месяцев назад

really good

@mobilafilm 3 месяца назад

best

@user-zb2yg9ud5o 10 месяцев назад

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

@obidikeann166 Год назад

dang! this is good man.

@GreatStackDev Год назад

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

@vensvens2213 Год назад

Nice video.

@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

@nitishakesharwani7446 9 месяцев назад

Successfully Implemented

@shanecoutinho1021 28 дней назад

Thank you @GreatStack

@slokhan2309 Год назад

Please make tour and travel website with following specifications currency changer +location is visible by clients + whether forecasting

@_fever_of_bhole Год назад

Please make the javascript tutorial playlist 🙏

@ribhusengupta9967 7 месяцев назад

I am enjoying music .....

@AbrarulRhythm Год назад

Very helpful video 👍

@GreatStackDev Год назад

Thanks Abrarul, Glad you liked this music player design tutorial

@hephaestusdiwi 4 месяца назад

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

@AninditaDas-nk5zu 3 месяца назад

Love ly music

@Ghulammustafa-wg6cy Год назад

Thank you Sir 🥰🥰

@GreatStackDev Год назад

Always welcome

@vannyakh Год назад

Good idea 👍💡

@GreatStackDev Год назад

Thanks 👍

@Anand-Tech-And-Vlogs Год назад

Nice video broo !

@GreatStackDev Год назад

Thanks

@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 10 месяцев назад

I have the same problem

@chetnadhir 4 дня назад

thank u

@GreatStackDev 2 дня назад

Welcome.

@user-ft2gw1si1v 4 месяца назад

The son is very good❤

@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

@abdulahadgazi9307 Год назад

Beautiful tutorial sir

@GreatStackDev Год назад

Thanks ahad, glad you like this music player design tutorial

@vloggingwithmichael7635 6 месяцев назад

Hi! New subscriber here.

@2goldenchasma559 5 месяцев назад

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

@MrLS721 3 месяца назад

can we do like we want to play the next or previous song. just we can set an album in the project so we can listen ongs nect, previous, search song like that