How To Make A Music Player Using HTML CSS And JavaScript
HTML-код
- Опубликовано: 25 дек 2022
- 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 RUclips 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:
◼️ RUclips: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
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
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!
Sir you are becoming my addiction of making the projects....lots of respect to you from bihar sir ❤️
This is the esiest tutorial I have found so far. Thank you bro.
I am a humble person, i see your video, i press Like
Thanks Kirill, Glad you like this tutorial to make music player using HTML CSS JavaScript
@@GreatStackDev i enjoy watching all of your stuff. Dont give up
What if we wanna add lyrics to it
Be humble just like the way Lamar's song said 🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣
Hey gus please me to work on pauses icon
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. ♥ ♥
Great tutorial! Would be awesome to get a part 2 to show how to add more functionality like skip next, go back, etc.
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
Where you work bhaiya
Sir, you are a huge blessing to my journey of web development. Be blessed richly Sir!
So nice of you, Thank you so much
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
Kekaa broo you rock killing the easy coding your videos are super and wonderful explanation
Omg I don't how many new things I learned from this one thanks a lot 🙏🏻🔥
Great video!
Please Create Part 2 with more functionalities
I'm a beginner, but doing these makes me think I'm a pro. Thank you so much.
hi! How is your progress?
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
Sure bro, If i will get good views on this video, We will make next part too
@@GreatStackDev part 2 ?
Where are part 2
???
@@GreatStackDevpart 2
Yes.. Volume control is required.. Requesting for part 2
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 😁
Bhia I have learned a lot of things from you. Thank you so much.. ❤❤❤
Thank you very much for your tutorial. This is a very useful. Regards.
Thank you so much you explained very well i learned so much from this tutorial
Thank you very much for this video and keep up the good work!
Thanks, will do!
I appreciate it. I've learned o lot from This video!
many thanks!! Very helpful👍👍
thanku sir ....after completing this project my motivation lavel get boosted ........thanku again
Thank You very much for so helpful and simple to understand video! 👍💪♥️
Glad it was helpful!
Wow! That awesome, I really love it I will also try mine.
Glad you like this music player tutorial
SUPER DOPE thanks amigo!!
Thank You! 😊
Wonderfull Explanation sir thank You ❤
Thanks for the content. Ill be forever greatful
I feel really great bcozz today i find your channel.......thank you for make my day sir❤
Glad you liked my tutorials.
You earned a new subscriber brother
Thanks for this tutorial! Do you think you'll make a part 2 any time soon?
Thankz Teacher from Somalia.
Best And Simple Tutorial😀😀👍👍
the video is really helpfull......... thank u so much sir
Thank you sooo much
Very helpful
I really impressed 😁
I really love your explanation
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..!
Thanks bro, this is very helpful,also post many more like this,,
Sure I will, Thanks for your comment
I'm amazed😊🥳
Thank you!!! Awesome!
Tq soo much sir it was helpful for our project
Bhaiya yahi toh chahiye tha ❤️❤️
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!
mine is foward icon arent centering, the play and backward are centered
awesome bhai , also recommend
Pls make a part 2 as well where we can add more songs ....
Great work🔥
Awesome, thanks.
Thank you sir..its working
SO AMAZING!!! IM LEARNING A LOT BECAUSE OF YOU!!
Thanks Cristian, Yes Song name is "GO" that is too short name that's why i have added any random song name
realy helpfull ty🙏🙏
Ek hi dil hain kinte bar jitoge sir ji!?
Thank you so much Sir 🙏
This video is helpful for us !
glad it helped
I learned so much is this project! Thanks!
Nice teach.....👍❤️❤️
Can you make a part 2 video on how to add more songs?
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 RUclips 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
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
Thank you sir ❤️
really good
Very helpful video 👍
Thanks Abrarul, Glad you liked this music player design tutorial
Hi! New subscriber here.
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?
I AM Wating For Your Next Website Tutorial.
Thank you for sharing your thoughts on RUclips 🤩😊😘🥰❤️💕♥️♥️♥️♥️💓😊😘😘❤️😘😊❤️
Nice video broo !
Thanks
Great work Sir But I think you forgot to write script for forward and backward icon
dang! this is good man.
Thanks Obidike, Glad you like this tutorial to make music player using HTML CSS JS
Bravo.........
Thank you
It's awesome I am student of computer science thnku for giving me a new project 🥰❤️
@Fawad Saboor I am study in Jaipur nd I have much time to learn computer science
@parwani yes I have started nd I am in final year of bca
Nice video.
muchas gracias 🥰🥰
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
Good idea 👍💡
Thanks 👍
God bless you
Waiting for part 2
tq bro i did too
Great toritorial
Beautiful tutorial sir
Thanks ahad, glad you like this music player design tutorial
Thank you Sir 🥰🥰
Always welcome
Please make the javascript tutorial playlist 🙏
sir can u answer my question? why my icon didnt change if im play music?
Please make tour and travel website with following specifications currency changer +location is visible by clients + whether forecasting
I am enjoying music .....
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!!
I have the same problem
Successfully Implemented
Brother How can we add many songs aur a list of in this Music player
so goog dude
Super bro
Thanks Bro, glad you like this music player design tutorial
Awesome, but why are you using the Webkit vendor prefix?
It's being phased out.
It's great
Thanks Noor
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
Thanks
Glad you liked this tutorial to make music player
Sir, how to add playlist of song in this and how to operate previous and next icon.
Create also some react js projects..🇧🇩🇧🇩
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.
Thank You. Anyways . ❤
Sad thing is that colleges don't teach this🥺
Yes and they expect us to just automatically know this
The son is very good❤