Creating a Spotify Clone Using HTML, CSS & JavaScript Only | JavaScript Music Player🔥🔥
HTML-код
- Опубликовано: 7 июн 2024
- HTML & CSS Music Player: In this video, I will teach you how to build a music player using HTML CSS and js. This music player will have all the features found in a typical music player. You will be able to add, play, pause and seek songs that have been added.
Access the HTML, CSS & JavaScript projects playlist: • Projects Using HTML, C...
Source code: drive.google.com/file/d/1c6YT...
TimeStamps ⌚
00:00 Introduction
01:55 Starting
04:35 Navigation Bar
16:44 Container
18:35 Audio Progress Bar (bottom)
37:44 Song list
52:50 Play Song (JS)
01:37:00 End
►Check out my English channel here: / @programmingwithharry
►Instagram: codewithharry
Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 b...
►Learn in One Video[++]:
Python[15 Hr] - • Python Tutorial For Be...
Python Advance[3.5 Hr] - • Python Programming Cou...
Python[1 Hr] - • Learn Python In Hindi ...
Python[2 Hr] - • Python Tutorial In Hin...
Python[15 Min] - • 15 Minute Python Tutor...
JavaScript[1 Hr] - • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial...
php[1 Hr] - • Learn Php In One Video...
php[2.3 Hr] - • Php Tutorial for Begin...
php[Project]- • Login And Registration...
HTML[30 Min] - • HTML 5 Tutorial For Be...
CSS[8.5 Hr] - • CSS Tutorial In Hindi ...
CSS[1.4 Hr] - • CSS 3 Tutorial For Beg...
Wordpress[3.2 Hr] - • How To Make a WordPres...
Angular[2 Hr] - • Angular Tutorial in Hindi
Java[2.3 Hr] - • Java tutorial in hindi 🔥
Web Scraping[1 Hr] - • Web Scraping Tutorial ...
MongoDB[2 Hr] - • MongoDb Tutorial For B...
Numpy[1 Hr] - • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tu...
Linux[1 Hr] - • Linux Tutorial For Beg...
JQuery[1.1 Hr] - • jQuery Tutorial For Be...
Git and GitHub[1.1 Hr] - • Git & GitHub Tutorial ...
►Complete course [playlist]:
React - • React Js Tutorials in ...
Python- • Python Tutorials For A...
OOP Python- • Object Oriented Progra...
Java - • Java Tutorials For Beg...
JavaScript- • JavaScript Tutorials I...
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials I...
C++- • C++ Tutorials In Hindi
Git & GitHub- • Git and GitHub Tutoria...
Android Dev- • Android Development Tu...
Python GUI- • Python GUI: Tkinter Tu...
Web Development- • Web Development Tutori...
Python Django - • Python Django Tutorial...
Projects Using HTML, CSS & Javascript- • Projects Using HTML, C...
Data Structure and Algo - • Data Structures and Al...
Follow Me On Social Media
►Website (created using Django Rest & Angular) - www.codewithharry.com
►Facebook - / codewithharry
►Instagram - / codewithharry
Twitter - / haris_is_here
Comment "#HarryBhai" if you read this 😉😉
![TRASH or PASS! Eminem ( Houdini ) [REACTION!!!]](http://i.ytimg.com/vi/cB1WrZcMwMc/mqdefault.jpg)
Access the HTML, CSS & JS projects playlist here: ruclips.net/p/PLu0W_9lII9aiQiOwthuSvinxoflmhRxM3
What should be the next video in this playlist?
OPENCV PROJECTS
Will you bring Spring boot course with notes
Machine Learning Projects.
Tesla Clone
Amazon clone
01:38:16 Spotify Part - 2 with node js as backend 🙏🙏.
Thankyou so much harry bhai for this amazing project ❣️❣️
Bro how can i talk to harry sir
Yes
Part2 with node js.tnx for ur effort.
Yes
Yes
01:38:16 Spotify Part - 2 with node js as backend 🙏🙏
Thankyou so much harry bhai for this amazing project 👌👌👌👌
Of course sir we need part 2 with backend using NodeJS. Thanks for this valuable guidance.
part 2 aaya ky?
Hope this will help 🙂
00:00 Introduction
01:55 Starting
04:35 Navigation Bar
16:44 Container
18:35 Audio Progress Bar (bottom)
37:44 Song list
52:50 Play Song (JS)
01:37:00 End
Thanks him for this amazing video!
Bhia last WALA tag Sahi karo
🙇
Last me 01:37:00 hoga
Bhai source code??
@@eklavyachandra oh yeah, thanks
Thank you soo much harry bro 🙌🏻❤️
Bhai source code ??
Aapne to windows 11 ko update kia tha na
Thanks for this video... I learned HTML CSS JS from your one-video tutorials and now doing these sample project/practice. I also finished the bug/ some minor improvements you told to do at the end of the video. Quite happy about that.
Hi brother, Can I get your contact number as I am also learning and I wanted to talk to you about some of my doubts...
Did you have any previous knowledge?
bro...how to correct the time...can u please tell me...
you are realy a great teacher on youtube for us . I am so happy after making this project i am feeling cool . I took almost 12h to complete this project but went through its all concept.
Hii can u help me one thing i am having 2 problems with my website
1. The circle play is appearing twice against some songs
2. Songs are not playing after i did coding for changing it from the container itself plzzz help 🙏
This video is amazing got a lot to learn from just one video.
Yes we want part 2 of the Spotify clone
Wanted to start this project on my own since a month ago finally a guide🔥🔥❤️❤️
Million of thanks bhai ❤
Thanks for explaining each thing which makes us to understand concept while learning
Special thanks for JS 😊
Maaza agia tutorial ka. I just Love learning web development from Harry Bhai's channel. Love from Pakistan
This is gonna be 🔥 very excited😍
Having a teacher like you is awesome
Can u help me with what r the technologies used in this ...front end and back end please help me out guyzzz.....
@@FrozA-op in front end :- html, css, javascript, any framework like react, angular
Backend:- any language backend (node), mongodb, express js
That's so true🙏
Hii can u help me one thing i am having 2 problems with my website
1. The circle play is appearing twice against some songs
2. Songs are not playing after i did coding for changing it from the container itself plzzz help 🙏
Amazing...! Project Sir , I will Love tour All Videos , #Big fan
U are amazing sir, what a great energy and enthusiasm, i am looking forward to learn more and more.
Aapne future bana diya sir ji ❤❤i love you ❤❤supne me bhi aapki awwaz aati hai sir ji✌😊
This is what I want from days. Thanks for all knowledge you gave to me. Thank for being my teacher👩🏫👩🏫👩🏫👩🏫
Harry Bhai bahut achche se samjhaya apne me kafi time se dhund rha tha esa platform
Thank u so much
Amazing project 👏👏
Can you help me with the code of autoplay of next song automatically when a song ends, please
Amazing its really helpful thank you so much😊🤗😇yeah we want part -2
Finally a clone!
I was really excited for this 👍
Bro ek confusion clear kardo ki vo container niche laane ke liye jo min-height ko 75vh kiya tha par mere mai vo container niche nhi aaya plzz batado
Absolutely Amazing Project Thank You So Much Sir♥🔥🔥
Yes, I want 2nd part also....you are great and your videos are awesome... I love it👌
Spotify Part - 2 with node js as backend 🙏🙏.
Thankyou so much harry bhai for this amazing project ❣️❣️
this video is full of knowledgeable ,finally I understand javascript after see this video.
I am waiting for 2nd part.
Harry brother you are just awesome in explaining the concepts and things to even starters also and they will feel motivated. I would suggest you to do another video on this for the backend as that will help learners as mostly the are able to view front-end development only.
finally, old harry is back
Amazing project for me and for all. It was very helpfull for me. I need the part 2 with backend and I think many more also.👍👍❤❤
Love you carry Bhai❤- Dil se thank you. Maza aa gaya👌.
Keep Uploading this kind of projects.
Harry hai wo carry nai
Hii can u help me one thing i am having 2 problems with my website
1. The circle play is appearing twice against some songs
2. Songs are not playing after i did coding for changing it from the container itself plzzz help 🙏
01:38:16 Spotify Part - 2 with node js as backend 🙏🙏.
Thankyou so much harry bhai for this amazing project
Bhaiya I can't imagine that we can make Spotify using html css and Javascript
Sir you have raised the bar
The most perfect teacher for coding🙌
Thank you thank you so muchhhhhhhhhh...Harry Bhai aap ki vajah se javascript mujhe itna achha lag raha hai.....thanks god having a teacher like you....thank you so much....
Thank you bhaiya, so grateful for this!!!
We want part two! Very well explained!
Can't thank you enough for your efforts.
Dil se love you Harry bhai❤
Great work Haribhai.👌👌
You are my model in programming world..I was watching your video for 2 years..
Bhaiya while updating the progressBar it showing some uncaught type error that is myprogressBar is null.what should i do
need a part 2 bro....great work!!!!!
Yes.. It would be great if you can bring part 2 with backend 🙂
yes harry bhai we want part 2 please. Thank You Very Much for this Tutorial.
This was incredible Harry Bhai loved it this video helped me so much of my concepts!!
harry bhai, i have been following you from a long time now, earlier I was learning for fun but now i am passionate. I hope u will bring the backend integration part of it with Node JS
Amazing Harry I have learned html Css javascript php from you hats off 👏 love from Pakistan 🇵🇰 we need your type of programmer in our pak
Also Love from India🇮🇳 to pakistani bro & sister🇮🇳❤️🇵🇰
Shoaib Zaki pakistan ko padhi krne ki kab se jrurta padne lga gye Terrorist wla kam band kr diya kya
Pkmkb 😡😡😡😡
@@amanchauhaann You are 💯% right. But don't use pkmkb. Kyuki woh bhi Bharat hi tha.
@@amanchauhaann Baap se sawal nahi krte 😘
Jeetay raho
@@amanchauhaann Agar itni hi nafrat hy to Harry ke videos kyu dekh rhe ho bhaai wo bhi to Muslim hy.. Haris Ali Khan (Harry)
I am very happy for learning this and this Is my first step of learning new things with more interest I am now 2nd year engineering I was interested in web development so I searched in RUclips then I got this vedio thanks a lot for sharing a valuable knowledge skills I was searching for the people who share a skills and knowledge and I too happy to share with others 🙂🙂sir once again tqs a lott
Bhai comment and like to banta hi hai... That's the least we can do for this amazing amazing teacher we have... Thanks Harry Bhai...
I am learning HTML CSS with the help of your playlist.
Hats off to u, what a great tutorial.
But bahut se topics nahi karwae hai harry bhaiya nai
You go for thapa technical for html
And gyan tech for css
Bahut mast padhaya hai and sare topics bhi covered karaye hai
Html css or js learning k baad iska future sahi h other se ya nhi??
Bro html,css ,js toh basic hai bro
Agar tumko web development mai sahi bahut agge janna hai
Toh html ,css ,javascript ke baad you go for mern stack , karna hoga
Ache se back end ,fir database ke sath khelna hoga fir react se front end karna hoga
Fir tumhari 8 se 12 lakh ki job pakki hai as a fresher
@@CEKUNALGUPTA bro mere pass abhi bs 2 year h isme possible h ya nhi ye path?
@@rafenaashit9968 bro bilkul ho jaye but bahut mhenat lagegi
Thanks brother for all your expert guidance and support for us truly legend man
Bohut mazedaar lag raha h nav bane k bad👌😄
First of all Tysm Sir 🙏🏻💯🤗 Part 2 required from you....we are waiting. ..
Can you help me with the code of autoplay of next song automatically when a song ends, please
Thanks, Harry Bhai!!
We Need Part - 2
I would love to see the songs stored in an album and I would recommend u to use machine learning too in the next part
Anyways thanks Bhai love you!!
If you made this project can you please share its report with me..
I want it for my major project in college and have very few days to submit it.
Part 2 with backend would be amazing.
The Teaching ability you have, Just awesome...💌💌
Mazza aa gye harry bhai more such cloning please
Your videos are magical for me I customized this website by only seeing real Spotify's interface and also made a enable and disable loop system with the help of logic, JavaScript and you explain every silly thing including the Math behind the progress bar. Salute to you and most importantly you do these things and share it on youtube for FREE!!. You are so amazing than other Indian Programmers. Through your videos I do the Projects and when I show those projects to my parents they actually see my glorious, bright, huge future in it.
Bhai kitni js aani chahiye ye video dekhne ke liye
@@prathamdwivedi106 bro aap js in one video dkhlo uske baad ye project krna
Hii can u help me one thing i am having 2 problems with my website
1. The circle play is appearing twice against some songs
2. Songs are not playing after i did coding for changing it from the container itself plzzz help 🙏
Not into web development
but this is inspiring for me to come into web development
Kya baat h harry bhai, great work
Love u man....ill give u all what a heart keep it up bhai...from sri lanka
Absolutely Good working Sir .
Love From 🇵🇰
This is amazing ... We want part 2
Badhiya hai bhai, your are my mentor..
Great Harry Bhai..awaiting part 2..
Bro finally last 6 months se work kr Raha hun company m avi bht acchi company m placed ho gya last month .... mere web development ki journey apki course se start hue thi and for me you are like god to me you motivate people a lot and make difficult video easy to understand .... Harry bhai mai kitta v bol lu still mere job ke piche apka hath h ..... Huge respect bro ... Thankyou sir ❤️❤️ hope i'll meet you soon 🙏
Hi bro first of all congratulations
Which company , which language u learn first ..
Bhai apne code with harry se web development siikhi kya itna kaafi hain web apps banane ke liye jisme
Superb project sir. Thank you for teaching us all you know. We need people like you in our community. Thanks again sir.
Bro tell me how can i talk to Harry sir
@@suryasingh3426 address h mere pass unka
yes i want backend of this software with django thanku so much sir for this mindblowing video you are great sir
yes we want part two Bro.Thank You ! Sir
I m in 11th standard and i started learning python by your tutorial thnx for making my carrer.....
Career?
Yes, we need a backend of this project with php and mysql. Please
BHAI !! Really awesome content.......
I subscribed two weeks ago without seeing the video. But I just learned English and this doesn’t sound like English. It looks like a good video.
Project based learning is a great initiative 👍
Harry Bhai .We need part2 with NodeJs please...
dhamakedar project maza aa gaya
Thank you so much sir for creating this video!
Ya ALLAH har insan kamyab ho har insan ko sehat izat dolat or sabkay Maa Baap or sab hi chahnay walon ko khushian naseeb farma Ameen.
waiting fo Spotify Part - 2 with node js as backend.Thankyou so much harry for this amazing project
Dear You are marvellous, Good Job, I am your fan now Bhai.
Amazing course+projects
720p is not available in this video..
Only 144p and 1440p is available. But Why? 🤔
same problem
for me only 1440p60
Sm problem
I downloaded that video for watching 👀 😂 it so limited data but I have wifi in nearby just neef to go for walk 🚶♂️ 😅
Aa gya ab 360p mai bhi dekho ab
TimeStamps ⌚
00:00 Introduction
01:55 Starting
04:35 Navigation Bar
16:44 Container
18:35 Audio Progress Bar (bottom)
37:44 Song list
52:50 Play Song (JS)
01:37:00 End
Bhai project mai kiya mentione kare ...same clon Spotify par ye vala to bahut alag hai yar ..real vale se .. bejjati to nahe karega interviewer hai
@@AR-nw6dv Interview mai ye mention mat karna, usske liye bootstrap se aacha website banao jiska layout mast deekhe. HR jyada tar ki layout aur animation hi dekhte hai. Aur Spotify clone mat bolna, bolna ki music playing application maine banaya hai aur koi random sa name de do.
@@stain5570 bhai aap ... expert hai ...
@@stain5570 ha mai Spotify vala Jo hai...mai soch raha tha remove kardu and kuch music player vala daldu iske jagah..
Kya aapka song play ho gya tha
Hello Bhiya.. I also made an another Spotify clone by own.. just following your steps and took some idea where ever i stuck... and complete it alone.. So Thank you so much.. It really boost my confidence in web development world
Hii can u help me one thing i am having 2 problems with my website
1. The circle play is appearing twice against some songs
2. Songs are not playing after i did coding for changing it from the container itself plzzz help 🙏
The way of you are creating video and teaching Pin to Pin awesome i am feeling good bro.
Yes, we need a video on backend with Django and this video can only be played in HD quality. I am not sure is it with me only or others are experiencing it.
For me also ......
Yes it's only available in hd
yes
Me too bro
For my device it's available in 4k 60fps also.. don't know what's the problem with your devices
Need more such cloning videos!!!!
You are doing such a great job
Hey brother I am curious to do complete this project and I also completed 50% of your JS course... Thanks for such types of projects 🙌🙌
please we need part 2 with node js
31:04 you were not getting step-backward and step-forward initially because you were writing , you had to change class="fas". later when you changed you got it right.
Bhi alag hii level ka ban gaya bhi 🤯
Thankyou sir🤟 You're a rockstar.
Harry, 30:54 first the forward and backward icons were not visible because in the class you had written far "far fa-3x fa-step-backward" instead it has to be "fas fa-3x fa-step-backward". It isn't supposed to be 'far' it has to be 'fas'
Still not working
@@deepanshgarg6922 was your issue solved?? please help
still facing the issue. any resolution?
Please continue this clone making series , please make websites like youtube , instagram , facebook ... I know making them them is very much complicated but at least you can make a basic clone with limited features ... please it is a request 🙏🙏🙏🙏🙂
can you tell me how to open the source code because it's not opening
Did u get ...what harry gave for homework ?
Harry bhai... kamaal ho yrr....
You can also use calc to make to keep bottom div in bottom instead of making min height to container
31:08 because in play circle there is a code starting from far on the other hand in step forward and backward there is a code starting from fas...and when you changed it from play circle to step forward you have not changed that far and fas..
Hats off to Harry bhai, he was recording the video till 2.33 am 🔥🔥😊😊
You are really great sir ❤️
Attii sunder ❤️👍🏻👍🏻
you are a amazing teacher ..Thankyou so much for this video..
01:38:16 Spotify Part - 2 with node js as backend 🙏🙏. Sir we want part2 for backend
Thankyou so much harry bhai for this amazing project ❣️❣️
bro can u provide me total project code maine kiya but mujhe error aa rha hai
@@priteshtiwari5652 bro there is a source code file in the description
I am here after Completing Css in One Video ❤❤