Build a Music Player | Vanilla JavaScript

[@aliounegueye2061]

You are the best programmer teacher I ve never meet before.

[@gothicisbestrpg]

I needed to create custom music player a month ago in React. I was looking for something like that. Thank you Brad!

[@Almighty_Flat_Earth]

React js is the most hated. Angular is the king. React makes things more complicated, while the same functionality can be achieved in pure js or angular in more elegant way. Virtual dom is very slow in mobile because it takes a lot of RAM space. There are many blogs against react js. Please adapt to the trending Angular.

[@collins4359]

@@Almighty_Flat_Earth lol

[@geekstudio.]

Thanks Trav! You not only need consistency for code but you need hands on and creativity. Its not enough to watch and follow up on documentation but to also disect and play aorund with your code to create something new and fresh. Thats why I like this channel. Trav puts in the work for his videos !

[@Cyb3rTechGuy]

I don't think I've ever watched a video that was easy to follow and understand. This video was very well done. Easy to follow, easy to understand. I was looking for how to build a music player. Now I have to figure out how to make it play as an A/B comparison player. I'll have to give myself a crash course in JS and CSS.

[@wetsand7379]

this is the first time I've ever been able to successfully complete a project using JavaScript. Thank you!

[@TylerPotts]

The best place to learn to code on the web! I loved watching this, Brad!

[@quickcodingtuts]

I rember years ago you made a music player and blasted off some Linkin Park tunes on the demo, good times

[@TraversyMedia]

Wow, that was a long time ago. I'm surprised you remember. I don't want a copyright strike, so stock music will have to do lol

[@cwcfunclock2709]

@Banx Omg I remember that tooooooooooo

[@yalla_caguetrades4140]

@@cwcfunclock2709 omg i dont remember that

[@abdullahalakus9700]

@@yalla_caguetrades4140 me to

[@MasayaShida]

Still listening to LP to this day! 🤘

[@quocbao6046]

What a brilliant tutorial!! Holy crap! This will be my university "Web programming" course project for sure! Thank you very much sir! Keep it going!

[@michalbotor]

i had lots of fun coding along. thanks! css and js have come a long way btw. it's pretty stunning what one can achieve with so little effort.

[@oscaralvarez1519]

I loved so much this practice I put in practice almost all I learned in HTML, CSS & JS Thanks so much for your time and sharing your knowledge with us

[@syberiaok]

Great!!I've recently finished my JS course and I'm starting to code a few little projects. I hope one day I can have the ability to think more logically in order to know how to implement my own ideas. I really enjoy your videos, thanks a lot

[@andysworkshopcustoms]

I am building an extended version of this Player as a first js exersice now I added a new array inside first to make albums playing separately from each other. That will be my music site!

[@PINEDARONALD]

I did everything he say but the round picture isn't turning what I am doing wrong?

[@dancehalllyrics1303]

I’ve used the certificates from your JS courses to apply for my dream education as a software developer and later on web developer! I’ll of course have you on my mind when I get my answer whether I get in or not and when I’m in (if everything goes well! 🤞).

[@thiyagus2850]

You're awesome. Definitely a refresher for CSS & JS. Stay blessed Brad!!!

[@temidayooladele9856]

You are such a genius.. Have learnt a lot from your courses.. With love from 🇳🇬🇳🇬

[@doomerconsumer]

dude you are a freaking wizard. love your tutorials. great pacing and explanations throughtout!

[@edavids06]

Just another amazing video! Thanks for share your knowledge with us, Brad

[@arindambala6079]

Thank you Sir... This is a great tutorial.. I finally completed this project today... All the concepts and explanations you gave in this project are really helpful for understanding the basics of HTML, CSS and JavaScript in a real world implementing view. Thanks a lot Sir...

[@tonym6878]

Thank you for your great teachings and offers over the years. And even for today's promo. We have learnt a great deal and we appreciate you taking time to help us advance in all relevant fields.

[@shrangisoni8758]

Traversy media is a saviour for all young developers.

[@piecesofeight_mashups]

I'm picking up JavaScript lately and this example was a great ground-up tutorial to learn from. Will consider buying your course!

[@RebrandSoon0000]

I just bought the course, just made it in time and it was $9.99 for me. As I don't make a ton of $, this helps a lot! Thank you Brad! 👍

[@hamaaritech8714]

Sir if you dont mind i want to say that next time when you upload the course it should be a full course not a crash course because you are our mentor we want to learn from you alot thank you

[@dibyamohanacharya9783]

In playsong() and pausesong(), instead of adding and removing classes, can we use the toggle method? Tip- Add a circular queue. Add as many songs you want. Pressing the next button or prev button will always play a song. It will never end.😅

[@dromen2001]

This was a awesome project, thank you. You explain things clearly and I was able to keep up. Thank you.

[@DividedStates]

This is such a nice and simple HTML/CSS/JS training. Perfect for beginners.

[@informationgiant7697]

I love traverse media ....I just love this channel ...Brad you amazing man.

[@sumaya-kabir]

Thank you so much. I completed it. Here the CSS section is essential for practising and in the js section, the progress bar js is a little bit tricky for a beginner but the other thing is 100% clear.

[@ZeStarLight]

Hi! Can you help me fix the progress bar problem? I've looked in the CSS and JS, but nothing, the progress bar doesn't work for me.

[@tomasburian6550]

Hey Brad, thanks for doing this for us, I'm learning at light speed here. I got one suggestion, though. When you are about to do something, especially when coding the script, please tell us ahead what you're going to do and why, just one or two sentences would do, because usually I'm tempted to just write along without knowing what I'm doing. It'd help me to streamline the thought process when I'm making my own stuff. Thanks a lot.

[@windevchannel]

like line 18 it's calling the function that takes parameter that accept index of the song from the songs array. Because he set the songIndex = 2, that would be the first song to appear. songs[songIndex] is basically saying. from the array, just bring me back whatever index in the array. Which in this case it is Ukulele

[@mygicarskrsk4465]

wow this looks like a really fun n exciting project! looking forward in rolling along with this, Thanks brad for the awesome content again! 😎

[@vardhanmahajan7135]

this is si hype!!!!! Thanks dude, I will make something like this! next :- a video player to go with this!

[@godfreyndiritu369]

Thanks Brad, I have always wanted to create a music player.

[@vlknlvnt]

"Now we're going to javascript. This is the fun part."

[@AayanamAnirudh]

Hey, Almost 1.5 million subs.... Congrats Brad

[@kennethkipchumba2532]

Before the end of 2021, it's gonna be 2M subscribers for this amazing channel. Watch this space.

[@Nevverglow]

removing the css property bottm:50%, the dot would be perfectly centered

[@ThomasZika]

If you are following along with this tutorial but are having trouble to set the duration variable, try : audio.addEventListener("loadedmetadata", function() { songLength = audio.duration; console.log(songLength); }); in case its returning NaN :) Thanks for the tutorial

[@kirillgrechukhin1298]

still not working

[@treyabolicum]

@@kirillgrechukhin1298 if you show me your github repo or a codepen i can have a look

[@victornoagbodji]

😊 🙏 😊 thank you so much for sharing this. css seems a beautiful presentation system at its core despite all the frustrating browser implementations.

[@basam17]

I have a problem multiplying numbers by numbers BRAD does numbers by strings God bless this dude

[@Gooloso98]

for incrementing the song just use the module operator to a max of size .. no need to if statements. Like "index = (-- ++index) % size" always between 0 and size-1

[@rahul_lyt]

what a beautiful project, amazing learning experience with this one, traversy for life.

[@dirantechie9411]

Thanks Brad these projects are really cool helps in understanding how logic works especially for as beginners

[@kurshadqaya1684]

It is written "Brad", but it is read "Motivation". Love from Azerbaijan.

[@ES-jq6zo]

We are waiting your Next Js full stack course🎊🎊🎊🎊🎊🎊😍😍😍

[@itsahmd295]

yess

[@Fatima-ie5kj]

yea exactly

[@tacituskilgore2258]

when will Brad release it?🤔

[@diatm1506]

Yes + backend Express

[@CODINGISEASY]

Laravel & vue

[@Sawk-cy7wz]

Why does the image go up when you set bottom to 0? It should go down.10:38

[@mounir101]

Traversy Media, you're great and thanks so much for helping us do amazing things.

[@Djjslvnsp-dg7cv]

I just purchased the udemy course! can't wait! :)

[@nikofisk]

Combining my two passions: Music and Web developement - love it! I'm currently following your Javascript Udemy course, and it is so awesome!

[@zepp906]

Had fun with this. I think i added bits so you can search for songs and play them too with the pictures.

[@thaanu]

This is really cool. Helped to learn new CSS and JS. Thanks alot

[@divyajyothineyyila2973]

It is really easy to understand for beginners...Thanks ..please keep doing many such programs 😊😊

[@ashishmadhavacharya4108]

What I can do is loop through music directory and check if file is mp3 then store it in array and grab the name of the file as an song name same way for jpg files that way I no longer need to add that in array manually just need to upload mp3 file and jpg file to their respective directory

[@jimmyj.6792]

Just awesome and so simple to understand 👌 thanks a lot for this nice course 😀😀

[@am1n_dlt682]

Great tutorial as always, love you brad🙌🙌🙌

[@kasmail1]

my top channel.. kudos always

[@cryionta]

why is the github code different than the video?

[@rajiebrahma2238]

Thanks a lot, Bro.. This video really helped me with some of the stuff I wasn't able to fix

[@952a259]

Brad, thanks a lot for a good and simple explanation! 👍

[@yYggdtyy5433]

Thanks for the discount! bought the course

[@bro939]

hello dear brad you are amazing men thank you so mush .i start learning html with a lot of courses with other guys .and yesterday i find your course really you are very kind because you give me lot of information .i want to thank for your efforts in videos .now I'm very happy to continue with you css and java .i looking for more courses about html i want be professional like you .i need your advices thank you bro

[@Lorry127]

Great video, you taught me a lot of new things, thank you !

[@MrMiguelapb35]

Great little App, I loved it, You're the man Brad, thanks a lot

[@techstackmedia4944]

Your videos are always top notch

[@tooveralls]

Why my music-container play image isn't turning when added the class play?

[@lona3248]

I just want to learn more and gain money then subs to your udmey bc you deserve more, thank you

[@kylespencer7595]

solid tutorial! you're really fast at css

[@IgneousGorilla]

Quick questions, is this scalable (playlist of hundreds of files)? Also, would this work when hosted online (also hosting the mp3 files)?

[@CodeRCreatives]

Ohh thats now another a very super cool video by brad....A big motivation for us😀😀😎😁

[@jasonclair5046]

That was allot of fun. Thanks for sharing that with us.

[@tedsemon1326]

This is a great tutorial and I had a lot of fun and learned a lot following along. I've embedded a version of this into a multi-page audio player I've created, but the audio stops when I switch web pages. I'm wondering if there is a way to continue playing the audio, even when switching web pages? Thanks for all your great content Brad.

[@jnralexander7913]

Did your own work? Because mine ain't playing i even typed everything and added his but it still ain't playing even after me inputting the song . please help me solve it

[@sophiaqu7806]

Thank you so much for this video, so lovely!!!

[@Cal_03]

stuck at about 27:32, I've named my images and audio the same and done everything correctly in the video so far, but when I change the value of songIndex, nothing happens, the image and title does not change, does anyone know any solutions? Thanks.

[@LjCreepi]

I have the same problem, have you found a solution yet?

[@Cal_03]

@@LjCreepi sorry I stopped coding a while back lol

[@LjCreepi]

@@Cal_03 no problem, wanted to delete it because I found a solution anyway. Instead of „songs“ when checking which song it is to play (idk which function, bc I am not at my pc right now, it is almost at the top of the js file) it was „song“

[@kiche_allan]

Nice one brad. Its 1am in Kenya and Ive got to learn this. But while following it, I am hearing some voices of people at background, did anyone notice?😁

[@SahraClayton]

Great video Brad, I literally commented on one of your videos a few weeks ago asking if you could do something with the audio tags

[@NNNedlog]

I like how you used KZbin audio library music so you don't get copyright

[@anjalik1012]

so how do we know we hav to use the class="fas fa-backward " as it depends on link tag we used (cdnjs)

[@piusvictor8780]

Very interesting, great Job Brad ✨✨

[@victory_lucky]

you use class on music container to detect if the music is playing, I was wondering why you didn't use the built in boolean, which is audio.paused.

[@adwaitdixit7753]

The audio tag is now deprecated. The same audio tag doesn't work now. Now, we have to use

[@vanessadesign93]

I got stuck on the audio.play(), my audio just wouldn't play and I couldn't figure out why

[@sagewizard2929]

Please do the frontend part for this project "API Masterclass With Express & MongoDB" you have mentioned in your class you will do it.

[@VisualizeYourMusic]

that Hey! song scares me everytime xD otherwise great tutorial!

[@namotmus627]

thank you for your good explanation while you doing it, I was fallowing code but I don't why audio cannot run and playing.

[@ROC4Life96]

Great vid! I built a music player on my own where I used JS to handle a lot of the styling animation, but I like your coding structure much more, thanks!

[@lukasluftlaufer1093]

So good! Thanks Brad!

[@ALBDev]

As always. Wonderful. Thanks

[@Cpt_Chirp]

fantastic tutorial as usual. thank you.

[@stuffedstuff7086]

Interesting a beginner project let's go 🔥

[@84music1]

This is genius!!! THANK YOU!

[@SlavaGusev-wm5is]

Is there a way for application to look for tracks itself from sertain folder without using additional librarys?

[@NedumEze]

Hi Brad, you've been such a phenomenal Resource to all of us. Thank you very much. I found this Video when I searched for how to make a Media ( Audio & Video) Playlist. I was delighted to find your work is so close. But, could you make a supplement, showing how a clickable list of Videos or Audios can be added. Your Widget does not show the User what is Available. A user should be able to select from a list which Music or Video to play. Your schedule is scary though. Sorry for this more trouble.

[@kasper369]

amazing video, love from pakistan

[@talitaholanda9658]

Scratch™ Makes Coding way better

[@bvlgvkov]

i have a question. can you help me with this. I want to create a simple site, so that there is a music player and when switching between pages, the music continues to play, that is, it saves its state (the player, too). Could you tell me what technologies to use to satisfy my need. Example (soundcloud, spotify) Thanks!

[@alejandrodinardo4804]

Great tutorial, thank you very much!

[@graziacassano9263]

how did you insert the mp3 audio files? I cannot make them work

[@YosipmikeColin]

Sigue creando proyectos así amigo que en KZbin casi no hay, saludos desde Colombia

[@DanOhCaptainDaniel]

I get this error: script.js:94 Uncaught TypeError: Cannot read property 'addEventListener' of null also, how could I add a Spotify API / playlist?

[@marichkasynoratska2358]

Great tutorial! Thank you so much!

[@ernstmayer3868]

Isn't it better/faster to use the querySelector method on the parent (.music-container) rather than on the document every time?