Build A Music App With Javascript Tutorial

Поділитися
Вставка
  • Опубліковано 10 січ 2025

КОМЕНТАРІ • 574

  • @itsshopboy
    @itsshopboy 5 років тому +391

    Make a Udemy video of these projects and I'll definitely support you Ed. What you're doing is priceless to me. Big up.

    • @developedbyed
      @developedbyed  5 років тому +119

      Thanks so much! I will start a patreon in the summer with full length courses for only $5. I want to make it as affordable as possible!

    • @itsshopboy
      @itsshopboy 5 років тому +1

      @@developedbyed You can count me in when it launches.

    • @lithampiyakhe2588
      @lithampiyakhe2588 5 років тому +1

      @@developedbyed Man.. I'm new to your channel.. but you have most of the things I've been wanting to learn to make!! I'm definitely enrolling!!!

    • @Manishkumar-br3vf
      @Manishkumar-br3vf 5 років тому

      @@developedbyed I'll take your summer course

    • @Dennis-Ong
      @Dennis-Ong 5 років тому

      @@developedbyed oh man, as a broke college student dont' forget about us ! I''m gonna create this project and get back to you ed!

  • @lotimeca4193
    @lotimeca4193 5 років тому +21

    One of your videos was recommended to me by UA-cam.
    Ended up watching over 10 of your videos in one day, good job bro. (also subbed)

  • @Rickmaz1
    @Rickmaz1 5 років тому +18

    You're like literally explaining each line of code WOW you're amazing man!!

  • @Waleed-ji2kn
    @Waleed-ji2kn 5 років тому +48

    Keep making these type of tutorials..really helped me learn js and css further

  • @nelsonsubervi-hernandez8197
    @nelsonsubervi-hernandez8197 4 роки тому

    It is very rare to find fantastic developers that can also explain what they are doing effectively. I almost gave up learning coding from UA-cam videos, because constantly the individual "explaining" what they are doing, miss something very important. Sometimes is a cluster f&*^*% of things omitted, for example: "This tutorial will only work if you have installed node.js", "This tutorials will assumes you know how to link files to each other", "the tutorial assumes you know or have heard of this library that almost nobody uses and it was created 2 hours ago".
    You in the other hand, go into detail, explain why, explain whenever you come across into a bug (something must tutorials don't do!) and refer which files you are working with. Bless you and you got a brand new subscriber!

  • @Altawer
    @Altawer 5 років тому +327

    The UA-cam algorithm blessed me

  • @developedbyed
    @developedbyed  5 років тому +94

    How you all doing today? :D

    • @nextrie
      @nextrie 5 років тому +1

      Doing good, bro

    • @NomanDev
      @NomanDev 5 років тому

      well

    • @PritishMishra
      @PritishMishra 5 років тому

      All fine

    • @AbirProjects
      @AbirProjects 4 роки тому +1

      Just about to fall in TUTORIAL HELL... survived..!!! :D ... now working on my own project

    • @mosescodes3677
      @mosescodes3677 4 роки тому +1

      we are all great sir, Can you please do some ASP.NET MVC projects or Courses?

  • @Sketcher2010
    @Sketcher2010 5 років тому +11

    when you using emmet, you can write smth like that: .pad$ and press "tab" for etc..

  • @Amir_ZMI
    @Amir_ZMI 4 роки тому +1

    Man looking back, 7000 subscribers is really funny to get excited for... nice job

  • @tyrisnolam
    @tyrisnolam 5 років тому +8

    You are awesome, thank you very much for your video! I'm more of a backend-guy and I personally used to hate front-end development, but projects like this make me like working on it!

  • @Strelarck
    @Strelarck 5 років тому +4

    I had so much fun watching this video, all the puns, the way you make this look easy, and all the effort to makes us understand, thanks you!

  •  5 років тому +9

    Hey, you said you talk too much. Not true!
    Man, you are a great teacher (learned a lot today about CSS and JS) - and that's just because you explain every little bit.
    I've subscribed right away - you're going to do great on YT, keep going.

  • @san1ify
    @san1ify 5 років тому +3

    The coffee spill down to earth reflects how practical this guy is.love your work with an awesome sense of humour👍👍

  • @redester7
    @redester7 5 років тому +1

    The best web dev channel on youtube ,i love how you make things look so simple!!

  • @tbrew222
    @tbrew222 5 років тому +6

    You helped me fall back in love with coding. Thank you dearly

  • @juanmondragon4543
    @juanmondragon4543 5 років тому

    wow i just finished it and i must say my guy !!! very awesome u have a future as being a great teacher!!! let me say this to anyone who is struggling with js or looking how to move off of tutorial limbo. this video was great and in detail and very easy to follow. if you dont have experience with js you might not know why he is doing everything or what everything exactly does but come back after a week or two of learning and you will fully get it 100%!

  • @Lerremy
    @Lerremy 5 років тому +6

    one of the coolest JS-projects on YT! Keep it my man ;)

  • @viveksai7954
    @viveksai7954 5 років тому +1

    It was such a clear explanation. A testimony of how strong your concepts are . Kudos. Keep dem coming!!

  • @DeepakKumar-wh7bv
    @DeepakKumar-wh7bv 5 років тому +1

    In This World , You Taught this Free of Cost. All I can pay you in lieu of this , is My Gratitude. Thank You , SIR !!!!!

    • @PS-le4mf
      @PS-le4mf 5 років тому +1

      That's alot actually. What has to happen in the first place to any successful platform is attention. Personal brands that hold attention- even free attention are king. Especially today in a world where information is free.

  • @yahiradrian5110
    @yahiradrian5110 5 років тому +2

    With this videos I see that programing is so amazing. All just we need is to be creative and creativity has not limit. I'm taking Html, Css, javaScript courses an I see that everything what I want to do is posible whit them. It's amazing

  • @pavleks374
    @pavleks374 5 років тому

    This little simple project combines so much of the stuff beginners struggle with, and that's great. Basic project like this can help us build upon it, add features, etc. Great learning source!

  • @Suresh-br2zz
    @Suresh-br2zz 5 років тому +28

    Yo, I nearly spit my food when you spilled the coffee. You are so funny and unpredictable. Keep up the great work!

  • @wxrldurielgaming2169
    @wxrldurielgaming2169 5 років тому

    First time I'm ACTUALLY understanding javascript! I am a producer and I have all of my own sounds and I've always wanted to create my own music app from scratch! all of these youtube videos here giving us "Definitions" of each element... "this is a string, this is a boolean" Brother this video helped me understand javascript and what it actually does so much more!
    You gotta search create using javascript rather than search "Learn Javascript" and you explained it very fast but I was still able to keep up. I subscribed, hopefully I can Actually find a video where you explain how these functions are working so I can remember on my own but this gave me some hope. I for some reason couldn't get the bubbles to jump out but I got the music app working with my own personal sound kit. I would also like to know how I'd get these in a App Store but for now baby steps. Thanks

  • @nicorobin7666
    @nicorobin7666 5 років тому +1

    What a lovely guy with a gift of straightforward explanation.

  • @stephenprofullobala5016
    @stephenprofullobala5016 5 років тому

    Everything had gone good. I was pausing and coding in every step with the video. This the best free and easy javascript coding project I have learned yet. I appreciate your work for step by step explanation...

  • @Itsrichayo
    @Itsrichayo 5 років тому +2

    Hello Ed! Thanks for the tut. I absolutely enjoyed it. Can’t believe I repeated it the very first timer. Thanks alot

  • @aiknersisian
    @aiknersisian 5 років тому +1

    Man, you seem like a really incredible human being and a nice teacher. Thank you for you videos!

  • @cristhiancantillo4922
    @cristhiancantillo4922 5 років тому +1

    This guy deserves what he has... amazing tutorials

  • @dandandan01
    @dandandan01 5 років тому

    Just found this video, and it's great! You're upbeat, you know your stuff, and you explain it really clearly and don't go over the top. I've subbed and will be looking out for your next videos!

  • @STkeryA
    @STkeryA 5 років тому +2

    Edwin, thank you for being such a friendly and funny teacher. Really interesting because of these jokes and kind manner of telling. Dude, you are a nice person.

  • @chrispelitonestv9268
    @chrispelitonestv9268 4 роки тому

    Your explanations are fast but it is easy to digest. I'm so blessed when I found your channel. Thank you bro.

  • @TheEntium
    @TheEntium 5 років тому +2

    This channel have some serious stuff ... Appreciate your work brother ... Keep it up i subscribed..

  • @PiyushSuthar
    @PiyushSuthar 5 років тому +18

    Thanks brother... My dream is to be like you... I have learnt a lot from you 😍😍😍

  • @GeekMustHave
    @GeekMustHave 5 років тому

    You are one of the best content people on the tube. I love your style and sense of humor. My question is "For 23 minutes of what appears to be flawless code how many hours of trial and error did it take? Thanks again and keep broadcasting!!

  • @EngCarlosTello
    @EngCarlosTello 5 років тому +1

    Hello Dev Ed, your tutorials are the best, I never imagined how so simple you make code and in the same time learning. Continue on this way, you have a new subscriber. You are the best.

  • @madhavjha5289
    @madhavjha5289 5 років тому +8

    Keep teaching brother 👍 You are amazing, Loved this video 👏👏

  • @asherintech
    @asherintech 4 роки тому

    Loving the videos Ed! Thanks so much for sharing :)
    Also, less than a year on and you've grown from 7k subs to 250k+...well deserved!!

  • @shubhambiniwale9623
    @shubhambiniwale9623 5 років тому +61

    When Python guy loves JavaScript...

  • @vojtech_
    @vojtech_ 5 років тому +7

    That was really amazing and truely helpful for me as a beginner, thank you ♥️

  • @AK-Star007
    @AK-Star007 5 років тому +3

    i was looking for such a tutorial and instructor with clear mind. thanx

  • @blisteredoutlaw1993
    @blisteredoutlaw1993 5 років тому +3

    You just earned a new subscriber. Keep it up man!

  • @jondilliom
    @jondilliom 5 років тому

    As a musician/beat maker thats learning to code this was a huge inspiration. I cant wait to try this and implement certain ideas I had while you were making it (if my ideas are possible)

  • @anthonykiiru462
    @anthonykiiru462 5 років тому +1

    I love the color of the wall behind you.. So relaxing 🙂 Great video/tutorial too.

  • @dariussturge7479
    @dariussturge7479 5 років тому +6

    thank you for your balls Ed...keep the apps coming man!

  • @rbcookingchannel-cg7xs
    @rbcookingchannel-cg7xs 2 місяці тому

    Keep making these type of tutorials. Its really helpful

  • @stealthseeker18
    @stealthseeker18 5 років тому +2

    Damn this man!I love his teaching style. Thanks for awesome tutorials Ed!

  • @AhmedAli-sn3ty
    @AhmedAli-sn3ty 5 років тому

    From the first video to up to date your videos are fun to learn

  • @ContraHacker1337
    @ContraHacker1337 5 років тому

    Dude! This is one the nicest comments section I have seen in a while! Nice app, learned a lot. : )

  • @TheSwettysun
    @TheSwettysun 5 років тому +1

    That intro made my day lol. Love your channel, keep the good work!

  • @xXAdrien25Xx
    @xXAdrien25Xx 5 років тому +3

    Awesome videos as always, keep it up, you are helping me sharpen my js skills :D !

  • @dazai_dev
    @dazai_dev 5 років тому +1

    in the part where you're adding the event listeners to all the pads, since you used a normal function instead of an arrow one, you could've said this.querySelector('audio').play() instead of getting the index and making the sounds array, or if you were using an arrow function, just pad.querySelector('audio').play()

  • @MishazBts
    @MishazBts 5 років тому

    Wow thanks, felt like no one was teaching it in an interesting way . Thank god you showed up almost gave up .

    • @developedbyed
      @developedbyed  5 років тому

      That's the nicest compliment, thank you!

  • @BryanSanil
    @BryanSanil 5 років тому +2

    You're so kind and humble thank you for this tutorial

  • @ggcasa
    @ggcasa 5 років тому

    Bravo Ed, tot respectul pentru munca ta ! Urmaresc cu placere canalul tau. Succes pe mai departe!

  • @tt9378
    @tt9378 5 років тому

    Good stuff. Easy to follow and it fires the mind to consider what else is possible with JavaScript. I've just been working my way through 'JavaScript in Easy Steps', yeah free advertising for this book, and decided that I had enough understanding for something a little more challenging. Your presentation was the prefect level. Thanks!

  • @wp-wisdom
    @wp-wisdom 5 років тому +1

    Love your content and the way of explanation. Keep up the good work

  • @-baka9246
    @-baka9246 5 років тому

    its been a while i was done with all those things and now im back again thanks to you ... peace

  • @xXIBON3ZIXx
    @xXIBON3ZIXx 5 років тому

    Your videos are awesome. It helps me on doing my own design and learning something new. I was able to make an animation look like a balloon blows out of each key you press.

  • @razvanbugoi83
    @razvanbugoi83 5 років тому +1

    Felicitari pentru ce faci! Engleza ta e foarte buna, n-as fi ghicit ca esti din Romania daca nu m-as fi uitat pe Github.
    Keep up the good work!

  • @MukeshKumar-co5ky
    @MukeshKumar-co5ky 4 роки тому

    I love the way you explain each line of code. awesome video😍

  • @biLLie_wiLLie
    @biLLie_wiLLie 5 років тому +3

    Man I love you. Ive just thought to make some music app) you read my mind. I Always wait New videos

  • @krychanpro
    @krychanpro 5 років тому

    Man, You are awesome, I'm so glad that i found your chanel

  • @nightchilling1507
    @nightchilling1507 5 років тому

    You actually did a great job. Keep great bud Love your content!!

  • @bashircodes
    @bashircodes 5 років тому

    Amazing coding skill plus fun... The way of teaching this guy pretty nice thank you.

  • @Ali-lm7uw
    @Ali-lm7uw 5 років тому

    The detailed explanation is great. Continue with the same style.

  • @ADMATBandara
    @ADMATBandara 4 роки тому

    This is so cool !!!!! Thank you Ed !!! You are making our lives easier and fun.

  • @afnankhan6623
    @afnankhan6623 5 років тому +1

    awesome video,loved the opening really cool

  • @jaimerojas6578
    @jaimerojas6578 5 років тому

    Holy Moly that was pretty cool Ed!

  • @Lerian_Esencia
    @Lerian_Esencia 5 років тому +1

    😂😂😂 you make tutorials fun to watch ... I really have learned a lot from you ... compared to others tutorials... thank you

  • @usmanabdurehman97
    @usmanabdurehman97 5 років тому

    Mayen 7000 on the day you uploaded and now 21k after 12 days.Keep uploading man that was super helpful and super awesome :D

  • @datadoesdorian
    @datadoesdorian 4 роки тому

    Thank you for that intro btw. I love the parody of the polished coding video intros 😂👌
    Great tutorial too! Keep it up 👍!

  • @GiuTor73
    @GiuTor73 2 роки тому

    You can use the keyword DEFER in the script tag to avoid wrapping the whole code inside the load event.

  • @nivekmozart6183
    @nivekmozart6183 5 років тому

    Very informative! I'm very excited to finish up my 3 month project-based challenge.

  • @CartmanMthrFckr
    @CartmanMthrFckr 3 роки тому

    i don't like many webdevs on youtube, but you have very nice structured and clean code! :) Subscibed!

  • @DoheSeGyaan
    @DoheSeGyaan 5 років тому

    Really nice tutorial keep it up!!

  • @cube.9816
    @cube.9816 5 років тому

    maaan! U went from 7K to 94K in a few months!! U deserve it man keep going!!!

    • @vojtech_
      @vojtech_ 5 років тому

      Heyy, I wanted to write the same today 😂

  • @artistic__08
    @artistic__08 4 роки тому

    This was the js i used:-
    function play(pad) {
    var aud = pad.querySelector("audio");
    aud.currentTime=0;
    aud.play();
    };
    and in html I did:
    mine's a little easier to undertand. Hope if helps.

  • @saideepesh6036
    @saideepesh6036 5 років тому +1

    Just came here because of yt recommendations, and I truly loved it

  • @deepresearchersbynk
    @deepresearchersbynk 5 років тому

    LOVE FROM PAKISTAN......GREAT SIR.....I AM REALLY IMPRESS FIRST TIME FROM YOUR METHOD OF TEACHING

  • @debasmitadash9974
    @debasmitadash9974 4 роки тому

    Your teaching is GOD LEVEL❤. Thankyou. 💕

  • @ZeDon140
    @ZeDon140 4 роки тому

    Cool and fun project to reinforce JavaScript, HMTL, and CSS skills

  • @みの-e7j
    @みの-e7j 4 роки тому

    Mr.Dv Ed is very good person.
    I can learne many things through this pv.
    And I am be able to like javascript.
    Thank you very much.

  • @its_just_me_
    @its_just_me_ 5 років тому

    Thank you Ed!! Didn't know JavaScript could do wonders.

  • @slowbrain8869
    @slowbrain8869 5 років тому

    Nice and clear,i am a bit noob in css,good thing i saw this in suggested video,thanks for this bro,,subbed and liked

  • @SinghPriyanshu
    @SinghPriyanshu 5 років тому

    You are a great man... A great tutor with colorful Balls.... Loves from INDIA! 💓

  • @onkarraut9660
    @onkarraut9660 3 роки тому

    Very Cool stuff!! I am enjoying your CHANNEL!!!

  • @elhedody5755
    @elhedody5755 5 років тому +2

    thank you .. waiting for small projects like that ))))))))))
    we are repeating all your projects )))
    thank you .. waiting for next

  • @DilpreetSingh-gh9ss
    @DilpreetSingh-gh9ss 5 років тому

    Awsm tutorial bro, keep uploading these types of videos, n u got a new subscriber 🙏

  • @gunjanchimariya1902
    @gunjanchimariya1902 5 років тому +1

    Wow it works awesome . thanks for the video .
    Love from Nepal

  • @xavimrvixeer195
    @xavimrvixeer195 5 років тому +1

    Keep up the good work man!!! Bless up!

  • @philipvolna2433
    @philipvolna2433 5 років тому

    Never thought pewdiepie will teach me JS! Thanks Dev Ed you're awesome!

  • @mrwalid9317
    @mrwalid9317 5 років тому +1

    Man love your content

  • @wahabuiux
    @wahabuiux 5 років тому +1

    great work i am working on it and adding some modifications so bubble will come out from pad which is clicked

  • @daaftz
    @daaftz 5 років тому +2

    Teach me moaaaar senpai !

  • @taitronghoang
    @taitronghoang 3 роки тому

    This is so inspired. Thank you Ed.

  • @seifmansour7007
    @seifmansour7007 5 років тому +1

    Love your videos, Ed! Your personality is amazing, your humor, everything :D Just one little comment, in your text editor, you set the default spaces for indentations as 4 spaces, while the package you use to prettify the code is set to 2 spaces, so it's messing up with your code a little bit. Thank you for this awesome content

    • @developedbyed
      @developedbyed  5 років тому

      Thank you so much for the lovely comment! Also nice catch! I will change it when I get home!

    • @seifmansour7007
      @seifmansour7007 5 років тому

      @@developedbyed You're most welcome. Also, I'll make a Pull Request on the GitHub page cause there is a missing dot in the link for the glimmer.mp3 file.

  • @play4fun181
    @play4fun181 5 років тому

    god finally some1 explain about how js work and how to use it, ty

  • @512Bytes
    @512Bytes 5 років тому +1

    Man im a javascript and CSS guy and i learned almost 5 things on this vid

    • @ameliarosealdridge6468
      @ameliarosealdridge6468 5 років тому

      Learned a few things and cringed on others...
      Please don't use query selector for classes... Just use getElementsByClass() and use a for loop rather than for each.
      Using these rather than what he used is just better for performance.
      Also could of used classes. Hahahaha

  • @shriya3265
    @shriya3265 5 років тому

    You made it more interesting! Thanks a lot. You are a great teacher.

  • @jonahs28
    @jonahs28 5 років тому +1

    This was so well done . Thank you.