Build a Music Player | Vanilla JavaScript

Поделиться
HTML-код
  • Опубликовано: 9 сен 2024

Комментарии • 334

  • @gothicisbestrpg
    @gothicisbestrpg 3 года назад +22

    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
      @Almighty_Flat_Earth 3 года назад +2

      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
      @collins4359 3 года назад

      @@Almighty_Flat_Earth lol

  • @quickcodingtuts
    @quickcodingtuts 3 года назад +162

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

    • @TraversyMedia
      @TraversyMedia  3 года назад +131

      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
      @cwcfunclock2709 3 года назад +1

      @Banx Omg I remember that tooooooooooo

    • @yalla_caguetrades4140
      @yalla_caguetrades4140 3 года назад +13

      @@cwcfunclock2709 omg i dont remember that

    • @abdullahalakus9700
      @abdullahalakus9700 3 года назад

      @@yalla_caguetrades4140 me to

    • @MasayaShida
      @MasayaShida 3 года назад

      Still listening to LP to this day! 🤘

  • @Cyb3rTechGuy
    @Cyb3rTechGuy 3 года назад +1

    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.

  • @geekstudio.
    @geekstudio. Год назад +3

    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 !

  • @wetsand7379
    @wetsand7379 3 года назад +1

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

  • @aliounegueye2061
    @aliounegueye2061 3 года назад +12

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

  • @TylerPotts
    @TylerPotts 3 года назад +7

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

  • @dancehalllyrics1303
    @dancehalllyrics1303 3 года назад +5

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

  • @michalbotor
    @michalbotor 2 года назад +4

    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.

  • @andysworkshopcustoms
    @andysworkshopcustoms Год назад +2

    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
      @PINEDARONALD Год назад +2

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

  • @xgamer34tm
    @xgamer34tm 7 месяцев назад +3

    why is the github code different than the video?

  • @quocbao6046
    @quocbao6046 3 года назад +2

    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!

  • @IgneousGorilla
    @IgneousGorilla Год назад

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

  • @oscaralvarez1519
    @oscaralvarez1519 3 года назад +3

    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
    @syberiaok 2 года назад +3

    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

  • @ES-jq6zo
    @ES-jq6zo 3 года назад +79

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

  • @thiyagus2850
    @thiyagus2850 3 года назад +3

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

  • @dibyamohanacharya9783
    @dibyamohanacharya9783 3 года назад +6

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

  • @tonym6878
    @tonym6878 3 года назад +5

    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.

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

  • @godfreyndiritu369
    @godfreyndiritu369 3 года назад +2

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

  • @DividedStates
    @DividedStates 3 года назад +1

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

  • @Nevverglow
    @Nevverglow 3 года назад +12

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

  • @lucasbertoldo5062
    @lucasbertoldo5062 3 года назад +3

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

  • @doomerconsumer
    @doomerconsumer 3 года назад

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

  • @sumaya-kabir
    @sumaya-kabir 2 года назад

    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
      @ZeStarLight 2 года назад

      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.

  • @victornoagbodji
    @victornoagbodji 3 года назад +1

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

  • @shrangisoni8758
    @shrangisoni8758 3 года назад

    Traversy media is a saviour for all young developers.

  • @temidayooladele9856
    @temidayooladele9856 3 года назад

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

  • @arindambala6079
    @arindambala6079 2 года назад

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

  • @dromen2001
    @dromen2001 3 года назад +2

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

  • @hamaaritech8714
    @hamaaritech8714 3 года назад +1

    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

  • @tomasburian6550
    @tomasburian6550 2 года назад +2

    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.

    • @codeitraw5241
      @codeitraw5241 Год назад

      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

  • @CoreDreamStudios
    @CoreDreamStudios 3 года назад

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

  • @informationgiant7697
    @informationgiant7697 3 года назад

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

  • @vardhanmahajan7135
    @vardhanmahajan7135 3 года назад +1

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

  • @ThomasZika
    @ThomasZika Год назад +1

    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
      @kirillgrechukhin1298 Год назад

      still not working

    • @treyabolicum
      @treyabolicum Год назад

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

  • @zepp906
    @zepp906 3 года назад +1

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

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

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

  • @kennethkipchumba2532
    @kennethkipchumba2532 3 года назад

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

  • @lona3248
    @lona3248 3 года назад +1

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

  • @mygicarskrsk4465
    @mygicarskrsk4465 3 года назад +1

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

  • @dirantechie9411
    @dirantechie9411 3 года назад

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

  • @Lorry127
    @Lorry127 5 месяцев назад

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

  • @divyajyothineyyila2973
    @divyajyothineyyila2973 Год назад

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

  • @rahul_lyt
    @rahul_lyt 2 года назад

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

  • @vanessadesign93
    @vanessadesign93 3 года назад +1

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

  • @kiche_allan
    @kiche_allan 3 года назад +3

    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?😁

  • @Gooloso98
    @Gooloso98 3 года назад

    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

  • @sophiaqu7806
    @sophiaqu7806 3 года назад +1

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

  • @jimmyj.6792
    @jimmyj.6792 3 года назад +1

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

  • @basam17
    @basam17 3 года назад

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

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

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

  • @AayanamAnirudh
    @AayanamAnirudh 3 года назад

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

  • @kurshadqaya1684
    @kurshadqaya1684 3 года назад

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

  • @bulagazibaggy1511
    @bulagazibaggy1511 Год назад

    Thanks a million this is a deal breaker

  • @tooveralls
    @tooveralls 2 года назад +1

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

  • @mounir101
    @mounir101 3 года назад

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

  • @thaanu
    @thaanu 3 года назад

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

  • @bro939
    @bro939 3 года назад

    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

  • @Djjslvnsp-dg7cv
    @Djjslvnsp-dg7cv 3 года назад

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

  • @Dr.Kananga
    @Dr.Kananga 5 месяцев назад

    Thank you for your good deeds.

  • @samratbhaware404
    @samratbhaware404 3 года назад +1

    Sir please make video on how to create video player with html,css , javascript

  • @MrMiguelapb35
    @MrMiguelapb35 3 года назад

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

  • @ROC4Life96
    @ROC4Life96 3 года назад +1

    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!

  • @am1n_dlt682
    @am1n_dlt682 3 года назад

    Great tutorial as always, love you brad🙌🙌🙌

  • @vlknlvnt
    @vlknlvnt 3 года назад +3

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

  • @SahraClayton
    @SahraClayton 3 года назад +1

    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

  • @nikofisk
    @nikofisk 3 года назад

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

  • @yYggdtyy5433
    @yYggdtyy5433 3 года назад

    Thanks for the discount! bought the course

  • @lukasluftlaufer1093
    @lukasluftlaufer1093 3 года назад

    So good! Thanks Brad!

  • @84music1
    @84music1 3 года назад

    This is genius!!! THANK YOU!

  • @graziacassano9263
    @graziacassano9263 2 года назад +1

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

  • @sagewizard2929
    @sagewizard2929 3 года назад +1

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

  • @kasmail1
    @kasmail1 3 года назад

    my top channel.. kudos always

  • @tedsemon1326
    @tedsemon1326 2 года назад +6

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

  • @8.O.8.
    @8.O.8. Год назад

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

  • @marichkasynoratska2358
    @marichkasynoratska2358 3 года назад

    Great tutorial! Thank you so much!

  • @hamzamaimoune1513
    @hamzamaimoune1513 2 года назад

    Awesome ! May God reward you

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

    Thank you for this class....

  • @alejandrodinardo4804
    @alejandrodinardo4804 2 года назад

    Great tutorial, thank you very much!

  • @Cpt_Chirp
    @Cpt_Chirp 3 года назад

    fantastic tutorial as usual. thank you.

  • @CodeRCreatives
    @CodeRCreatives 3 года назад

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

  • @jaqakxasan4769
    @jaqakxasan4769 3 года назад +1

    Adding select song feature

  • @YosipmikeColin
    @YosipmikeColin 3 года назад +3

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

  • @NNNedlog
    @NNNedlog 3 года назад

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

  • @kasper369
    @kasper369 3 года назад +5

    amazing video, love from pakistan

  • @ALBDev
    @ALBDev 3 года назад

    As always. Wonderful. Thanks

  • @ES-jq6zo
    @ES-jq6zo 3 года назад +2

    Thank you very much✊✊✊❣️❣️❣️👍👍👍

  • @NedumEze
    @NedumEze 2 года назад +1

    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.

  • @jasonclair5046
    @jasonclair5046 3 года назад

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

  • @techstackmedia4944
    @techstackmedia4944 3 года назад

    Your videos are always top notch

  • @cloudsystem3740
    @cloudsystem3740 Год назад

    Brad thank you very much

  • @DanOhCaptainDaniel
    @DanOhCaptainDaniel 3 года назад +1

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

  • @nasibillomukhammadov2529
    @nasibillomukhammadov2529 3 года назад +1

    the fa-pause icon is not showing up

  • @mr.x3453
    @mr.x3453 2 года назад

    Thanks bro for your great help.

  • @Justin-bs8vv
    @Justin-bs8vv 2 года назад

    When trying to pass in e during the progressbar section in javascript, I just get undefined and unable to console log e.srcElement... any idea why? I didnt notice declaring an "e" earlier on

  • @piusvictor8780
    @piusvictor8780 3 года назад

    Very interesting, great Job Brad ✨✨

  • @bvlgvkov
    @bvlgvkov 2 года назад

    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!

  • @solusnostre7399
    @solusnostre7399 3 года назад

    Great Video. Thank you