Create Custom Music Player in HTML CSS & JavaScript
HTML-код
- Опубликовано: 2 июн 2024
- Create Custom Music Player in HTML CSS & JavaScript | Music Player in JavaScript
In this video, I have shown you how to create a custom music player using html css & javascript. This music player has several features like you can loop, repeat or shuffle a song, play/pause a song or play the next or previous song. You can view your songs list and also know which song is currently playing and you can also select the song from the list to play. Hope you love this music player, if you love this then let me know in the comment.
Hire me on Fiverr
www.fiverr.com/prakashahi
Download Codes From Here - codingnepalweb.com/create-mus...
Timestamps:
0:00 Music Player Demo
4:43 HTML & CSS Start
27:30 JavaScript Start
27:50 Creating an array to store music details
29:33 Creating script.js file for JavaScript codes
35:19 Play or Pause button click event
36:20 Function for play music
37:05 Function for pause music
38:58 Next button click event
39:21 Function for next music
41:18 Previous button click event
41:36 Function for the previous music
43:28 Updating progress bar width with music currentTime
46:08 Updating song timer - current time & duration
51:41 Updating music current time click on the progress bar
54:51 Changing loop, repeat, shuffle icon click
58:41 Playing next music according to the icon - loop, repeat or shuffle
1:05:49 Show or hide music list panel event
1:07:19 Creating li tags according to the array length and passing music details
1:12:49 Playing particular music on particular li clicked
1:23:30 Loading different music on page refresh
Second Channel - bit.ly/3aHNkru
Facebook - / coding.np
Instagram - / coding.np
Music used in this video:
Ikson - Anywhere [Official]
• #66 Anywhere (Official)
Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)
➤ Watch: • Jimmy Hardwind - Want ...
Track: BEAUZ & JVNA - Crazy [NCS Release]
➤ Watch: • BEAUZ & JVNA - Crazy |...
Track: Jim Yosef x ROY KNOX - Sun Goes Down [NCS Release]
➤ Watch: • Jim Yosef x ROY KNOX -...
Track: Lost Sky - Vision [NCS Release]
➤ Watch: • Lost Sky - Vision | Du...
![Roddy Ricch - Survivors Remorse [Official Music Video]](http://i.ytimg.com/vi/J5IeFzr2GgE/mqdefault.jpg)
I tried to explain each JavaScript line with writing comments. Please watch the video and remember to Like.
Hey codingnepal I was 1 of your first subscribers. Now u become big q RUclipsr and I knew that u gonna become 1 day. After all in all keep going dude.🤍🤎🖤
Happy to hear 😀
Awesome you make my day. Iam trying to make it my self and downloading templates but that's all very hardly coded I can't recognize the code and surprisingly you uploaded it
I can understand your code. your code is simple understandable thank you very very much.
😘🤩😘🤩😘🤩😘🤩
Sorry my english is not good but understandable.
Bro where's source code🧐🧐🧐🧐
I'll upload it on my website tomorrow and then I provide the link in the description. Don't worry I'll inform you once it is uploaded.
sir explain bhi kar dia karo chahe hindi me ya eng me bolke
Wow, it's very impressive, I lost my minds several times but you are explaining very well. Thanks!
One of the best coder i had ever known 🙏
Great work buddy ❤️
From Somalia!
For all you do, for who you are, I will be forever grateful you are in my life.”
Words cannot express my feelings, nor my thanks for all your help.
Your thoughtfulness will always be remembered.
Really appreciate the time you’ve taken out of your busy schedule to help us out.
Yet another super great javascript project with super ui design and super documentation
You are a genius. Hope to see you in more action. Keep up the good work brother.
A perfect example of how to engage audience to your code)
Really nice and fruitful video. Great theme and good-looking app.
Best video on whole youtube about making this music player ❤❤❤ Love from Nepal
Great, Great respects from Kazakhstan 🇰🇿.
You're amazing, bro!
Thank you 😊
Bro that project was just awesome .Loved it. But i have i request, please upload a video in which we can dynamically inset any song, we dont have to give it to the array
This is just the whole of the level! Awesome work dude!
Thank you so much
I love it, okay, I'll follow in your footsteps, then with the icon at the top left I'll do an accordion effect and then it'll go down.
You are unbelievable work for us and 🔥 your brain work in JavaScript 100%🔥🔥
finally, I m waiting for this for so long
Nice Work Bro Code Block introduced me to you love your content keep it up 😉
Great job. Thank you so much for your help!!!
You make advanced projects bro . Amazing :D
one of the best video ever. but a video without talking makes it difficult to watch. big ups tho
Greetings from Uzbekistan! just super!
Another hands up to you coding nepal your awesome and great..
You can become the next spotify with this.
wow, it's really amazing. love this
man thanks a lot!!!! I learned a lot from this one. especially in JS your comments help a lot. Again Thank you!
You're very welcome!
A trillion likes please.
Very good ... Excellent !!!
Love from Armenia! Amazing work you're helping me so much thanks :)
Happy to help!
This Player Is The Best!!!!
Requested Thing = Custom Video Player Just Like This Music Player.
thanks bro
I learned a lot from it ♥
It's majestic, pro level work man ❤️
Awesome. Thank you!
Very awesome tutorial. I have one problem though, clicking on the progress bar in chrome does not make the track update current time... instead it resets current time to 0. the audio just starts from the beginning. On Firefox it works
Thanks for providing music player
Amazing, thank you!
Love from 'Mumbai'
Day by day content getting awesome.
Glad you like it!
Thanks, Very awesome tutorial.
Nice post bro, I would've used SASS for this one though 😀
your explain very well. Thanks you so 😘
Outstanding 👍🏻..❤️ from #4L_BrotherS Arunachal Pradesh Itanagar India
*It's awesome bhai amazing*
very awesome project .i love it
Thanks brother this is awesome music players and tried it in my website
✅✅✅🔃⏪⏸⏩✔✔✔✔
Love you nepal 🤩❤❤💝
I love you Vids. This is 1 of the best amongst them. Source code pls
wow!! thanks bro is so nice
Thank you so much for teaching me this
My wish
You will try to make a video player like this
This is amazing 😱brother ❤️
Love from NEPAL 🇳🇵 ✌️
Thank you 💙
Wow tis is really awesome 💓💓😱🎊
You're the best man @codingnepalweb
U always amazing bro, stay healhty
Hi Sir, Can i code this using Subline text Editor instead of Visual Studio?
And also your channel is Awesome for Bingers to Pro Journey.
You have done nice job too.
this is amazing 🔥🔥🔥
Thanks bro! With this I can improve my coding skills!
From Philippines! 💞
Happy to help!
Hi @coding nepal love from 🇮🇳 and one doubt, where you have hosted you website? the latest design of your website is just awesome.
can you make a video on building responsive admin dashboard with only html css and javascript?? Its kind of emergency. I would be a very very very grateful to you. You have literally saved my life. Can you do it again??
gracias, saludos desde perú
Nice one. Ui would look better if you had made the image round and added animation like a roating wheel when song is played. but looks nice anyway
beautiful design !! smart work || result shows each hard work Thank you for enhancing our knowledge.|| Thank you CodingNepal
You are most welcome
well done, brother..!!!
Thank you very much! You're gr8!
You're welcome!
Thank you very much. I am really grateful for this video
You are most welcome
Hi thanks so much for this explanation!! is there a way to show what I´m listening (real time ) in youtube?
your songs in music player is so beautiful for listening during coding
Awesome, thank you!
Very awesome video. Thanks for your hard work.
My pleasure!
Ohh Array of Objects! Nice video!
Yes! Thank you!
Amazing 💜
Clearly learning stuff
Thank you so much for the video it's amazing.
Glad you like it
Wow 😍😍🥰 Nice Job
Thanks for your hard working. Your hard work let us know many unknowns.
It's my pleasure
@@CodingNepal I like your all projects, They are really very cool 😎😎😎.
Good job. I like 👍🏻
Awesome video bro😇
Toppp! 👏🏻👏🏻👏🏻👏🏻
Awesome Sir and please make spin wheel with point system.
Wonderful bro
very nice music player,
Iam your big fun of your music player
Glad you enjoy it!
Thank you 💛
your follower from Syria 😊
Glad to hear that...Keep watching 😊
While it's hosted to the server it's take almost high amount of data to fully load the site. I think it's load the songs and images from the server at once. Can I prevent its form loading whole songs instead can I use 1 song and 1 image at a time is it possible to make some changes in for loop.
You sir, earned a Subscribe. Thanks alot!
Awesome, thank you!
You are awesome bro!!!!!!!!! Thanks for the tutorial
Happy to help!
Great
This is really cool
We will support ur work love u coding nepal♥️ and pls provide source code 🙏🙏♥️
Hello, what would I have to change to use it as a radio player? Thank you very much, Greetings!!!
is it possible to add audio from youtube instead of the downloaded audio from the device? kindly explain it. thank you.
is it possible to make it work through links instead of local folders?
amazingg!!
Thanks, bro. This is super
Welcome 😊
u r so good u reply everyone...
My pleasure
Amazing
I RESPECT TO YOUR EFFORT SIR
Thanks a lot
THANKS!!!!!
this is awsome, nice job !!
Thanks a lot!
Thank you❤
Awesome project for beginners ❤️
Thank you! 😊
@codingnepal share source code
Love you video so much bro.
Many many thanks
Great work
Keet it up bro
Proud to have u bro
Thanks a ton
I love you!!
You're welcome!
It's very nice video
codingNepal bro, you should use input range slider for music timeline not div
Thumbs up
very very cool
Wow, Thank Youuuuuuu!!!
You're welcome!
Its incredible.Thanks.Hope the post is not too old for giving you an " you're great !! " . I see two active items on top ,what are they for ? Last , is there a way to put a volume controller there ?
Those two icons are only for design.. Yes, you can add volume controller in this music app.
@@CodingNepal would you be so kind to show me how?Thanks for this masterpiece.