Build A Piano With JavaScript - Tutorial

Подписаться 1,6 млн

Просмотров 134 тыс.

50% 1

🚨 IMPORTANT:
Part Two: • I Made A Song Recorder...
Learning web development can be tough and boring, but it doesn't have to be. In this video we take a look at creating a simple JavaScript piano which can be played using the mouse or keyboard. This is a great project for anyone just getting started with JavaScript or anyone that wants to create a fun project.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/J...
Flexbox Tutorial: • Learn Flexbox in 15 Mi...
CSS Variables Tutorial: • CSS Variables Tutorial
🧠 Concepts Covered:
- How to use flexbox to center elements
- Using CSS variables to reduce redundant code
- Playing audio in the browser
- How to bind click and keypress events in JavaScript
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#JavaScriptMusic #WDS #JavaScript

Опубликовано:

11 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 259

@ralphmartynsamaniego7017 4 года назад

As a developer/musician, this brought me so much joy.

@nicholasdejong7112 4 года назад

One of, if not the best web dev RU-vidrs I found. Keep up the good work! Your videos are beyond entertaining!

@tristanlanner8086 4 года назад

You are amazing. Watching one of your videos for the first time, in less than 15 minutes I have learnt so much. Thank you so much for sharing your talent.

@nghianguyen-rr8on 4 года назад

Great, now I can learn both HTML/CSS/JS and Piano :D

@sauliustb 2 года назад

This is such a nice tutorial. great structure, great buildup. nice speed, good linking with your other video's. Keep it up :D

@gabrielsoloman5000 4 года назад

you're awesome, bro! you are able to explain lots of stuff in a really short time, great teacher, keep on!

@brecoldyls 4 года назад

I never knew about the repeat property for key press events! That could be really useful for html5 game devving

@muhamamdjamali1114 4 года назад

Wow by just reading the title the logic just jumped into my mind man its been a long way and I've learned a lot during it.

@orginy7156 2 года назад

This blows my mind, every sentence you say I learn it’s crazy🙏🏼🙏🏼thank you so much

@tolstoj9348 3 года назад

You sir deserve a cookie! This was so awesome and easy to follow! I made myself a version stretching over couple of octaves. The only issue I found occurs when the horizontal viewport gets smaller past a point, the black keys become less and less centered and the white keys without a black key on their right hand side become too wide. I will figure that out now. With your awesome foundation it should be relatively straight forward. It probably has to do with the shared "--width"-CSS property for both types of keys.

@knightmarerip711 2 года назад

This is a gem! Aside from learning how to build a piano, I found a lot of great techniques on how to do stuff that i have been struggling with! I have no plans of building a piano, but a lot of the coding techniques used here will definitely come in handy!!! thanx for sharing!!!

@debjitkarmakar5523 4 года назад

Congrats on 100K Kyle 🔥🔥🔥 great fan!!!

@chiar995 4 года назад

Even it is a weekend, watching you make me go back and start coding

@h0ckeyd 4 года назад

Thanks for this! It's pretty awesome. Simplistic but really effective.

@margaritabozhenova8473 4 года назад

Best timing! I've just made an online piano and was wondering how to add audio (:

@GuRuGeorge03 3 года назад

This is the first kinda video like this where I actually knew how to do it myself without any help. feels good

@tracyjackson7419 Год назад

Thank you so much for this video! I was trying to find a way to have text play different audio files when clicked and I was able to do it thanks to your help!

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

Awesome.. That actually solved a problem I had for a queue system's alert sound.. Thank you

@gabrielgomez6549 2 года назад

man, your videos are amazing! thank you so much for making this content!

@louisham6998 4 года назад

Best HTML JS CSS tutorial I 've seen. Thank you

@WebDevSimplified 4 года назад

You are very welcome!

@markokoh1542 4 года назад

Great video! Will try this out, and add web MIDI.

@mohammedsadiq5729 4 года назад

Almost 100K Congrats dude!

@shreyabh3047 3 года назад

Thank you so much for this, you have a fan for a lifetime

@maskman4821 4 года назад

This is an awesome tutorial, and I really like it !!!

@WebDevSimplified 4 года назад

Thanks!

@diegoarivera35 3 года назад

man your content is soo good, thanks a lot

@TanayBhalani 2 года назад

You made it amazingly simple. It's beautiful and damm minimum code, than I imagined. Thanks for sharing. I think it sums up what this channel is for, web dev simplified ✌️👍

@vinodreddy5646 4 года назад

Thanks for helping.. it means lot to us.....

@artgreg2296 4 года назад

Really playful example for training courses to beginners

@karimmirazul8946 4 года назад

This is an awesome and clean video tutorial to understand how listener and basic .css works

@zulfequar_ali 4 года назад

This is the Wonder-Boy of the Web World, always does something interesting!

@cristoferk8314 3 года назад

Thanks, Web dev Simplified! I know just HTML and CSS, and now I want to learn JavaScript! And this project is very good for beginners in JavaScript!

@letscode1388 4 года назад

Awesome work. Thanks sir.

@mcny40 4 года назад

Wow! I learned so many things in this single tutorial! Pretty clever coding!

@srirampant3135 3 года назад

Thanks for sharing Bro😊

@sasi_smr 4 года назад

Thanks for teaching us sir 😃

@NilodeRoock 3 года назад

Excellent work!

@rangabharath4253 4 года назад

Awesome as always

@harshithamh7930 3 года назад

Superb keep doing it's gonna motivating us

@user-kg3qx4kb5l Год назад

thank you teacher :) best tutorial

@ScreenPrintR 9 месяцев назад

Awesome job.

@emadalhamo 4 года назад

thank you pro, you are fantastic 👍

@shamiul_islam 4 года назад

Awesome! Nice tutorial as usual. Can you make some tutorial on Tailwind CSS?

@avneet12284 4 года назад

Beyond amazing ❤️

@saranrajg4685 4 года назад

Awesome man keep it up :)

@tryndamere9541 4 года назад

kyle thanks so much for the vid man :D

@himbary 4 года назад

Lol this timing! I recently started learning piano

@clement1814 4 года назад

Thank Google ;)

@jaimerojas6578 4 года назад

Very cool Thanks!

@chharsha231 4 года назад

Always Inspiring...

@drallisimo34 4 года назад

cool tut!!!

@kirillbaryba746 4 года назад

Maaan, cool lesson ) thanks bro

@blokche_dev 4 года назад

I didn't know the repeat property on the keydown event. Handy! By the way I would have done keys with buttons instead (accessibility concerns). Thanks for sharing :)

@mks33621996 2 года назад

I love you WDS!

@jagsdubey9095 4 года назад

you have very nice technique...

@Abbekej 4 года назад

When your brain has been fried, and everybody around you tells you that you're not good enough.. and you see your classmates excel above you in every way imaginable... Nothing, and I mean NOTHING gives me more relief than watching a smart guy, simplify a concept that has been explained to me 100 times by bad teachers. Not to mention the soft voice that gives me the feeling that everything is gonna be ok.. Thank you, subscribed.

@ky3bk449 4 года назад

Лучший! Всё понятно и без воды

@Lyrik-Klinge 4 года назад

I always heard "Whisky ... Whisky ... Whisky ..." instead of "this key ... this key ... this key" :-) Very good programming practice! Good job!

@usama57926 4 года назад

wow amazing tutorial

@karthicks859 4 года назад

Wow superb💐👌

@artemis1306 4 года назад

I subscribed coz i find it really cool and awesome 🤗

@WebDevSimplified 4 года назад

Thank you!

@MagnusAnand 4 года назад

Great tutorial

@RitaHendrawati 2 года назад

Wow.nice .👍👍👍

@scottgonzalez7574 3 года назад

Great video. made the piano right along side the video. one thing I'm curious about... i want to connect my midi controller to this. This vid ignited my curiosity.

@maxnet9076 4 года назад

Nice man , go to next video ) Merry Christmas Day 🎁

@arjumandpainter9231 4 года назад

Great!

@somedayiwill7361 4 года назад

it is amazing!

@pedllz 3 года назад

Great tutorial!...no need to do separate whiteKeys & blackKeys arrays for playing by keystrokes, just one for all 12 keys

@achyutapataki 2 года назад

tq for sounds

@usama57926 4 года назад

thank u so much

@JoeWong81 4 года назад

Great video bro

@hugobusiness2741 4 года назад

nice demo

@prabhukadode723 4 года назад

That's nice bro

@JasimGamer 4 года назад

rather than use js for click animation you can key:active { background: #ccc; }

@andy_lamax 4 года назад

While this is entirely helpful, It wouldn't work if he used the keyboard to play the piano

@JasimGamer 4 года назад

@@andy_lamax good note🤔

@hegelmotokoua 4 года назад

Super ! I like

@musix7652 4 года назад

Good job buddy.

@armenarz4062 4 года назад

development is fun, when requriments done by developers:)

@marufahmed7314 4 года назад

That's amazing

@abderrahimbouali2745 4 года назад

one question, i see data-key, data-note, data-something many times in tutorials, are they a custom attributes or pre-defined attributes, how we can use them. Thanks 😊

@Jack-yi7nu 4 года назад

that is awesome

@radybmcs6516 4 года назад

I love it

@Victor_Marius 3 года назад

Thanks for the e.repeat fact. I didn't know about that. Do you know any library for composing sound?

@ARUNKUMAR-xm8kf 4 года назад

Nice job

@freeuyghur2063 4 года назад

Awesome. Will be beautiful if you close it by playing some songs with the piano. Audience will enjoy the end result of the walkthrough.

@JasimGamer 4 года назад

you can do function click(e){ let aud = new Audio() aud.src = "notes/" +e.target.dataset.note+".mp3" aud.currentTime = 0 aud.play() } and use this concept with fetch or promises

@harag9 4 года назад

Except that this will be slower than the way Kyle created as it has to create the audio object each time and also load in the file...

@JasimGamer 4 года назад

@@harag9 with fetch and promises ? no

@krishnadevz 4 года назад

thank you brother keep it up next year 1M Goal right brother

@DeepSpaceX 4 года назад

Good for you

@romeobetances7964 4 года назад

Eres un genio bro, waoo, sigue así bro y no sea como los demas norteamericanos, usted es una gran persona.

@sidikriders3007 4 года назад

Thank you!! this is really good video, I never get the chance to play with audio in web app, so very new thing to me lol. One question tho, is it fine to always add event listener in every note is played without remove again the event listener? if no, where the best place to remove it?? Thanks

@WebDevSimplified 4 года назад

This is a good point. You can pass a third parameter to the addEventListener function with an object like this { once: true } and it will only fire the event one time. This is something I should have done.

@kavithachellasamy2393 3 года назад

@@WebDevSimplified Could you please share us the usage of this object in code?

@xMario10 4 года назад

this guy is awesome

@rhymekidstv 3 года назад

Wow... terrific video. Please mate do you have JS tutorials for beginners. I REALLY like your explanation. Many thanks

@Falah2M 4 года назад

Damn you're great bro...

@nehal076 4 года назад

I love him so much

@SolarMotion20 4 года назад

Interesting tutorial

@austinmallar5430 4 года назад

Great video! When you're troubleshooting issues such as the key being held down bug, whats your process like for finding a solution?

@MilanDrazic 4 года назад

you will notice when you hold down the key the sound is repeated over and over again from the beginning, from zero seconds without the sound duration if console to write word 'press' document.addEventListener('keydown', e => { console.log('press'); }); you will see that as you hold the key the word 'press' is written over and over so you need to stop keydown event in executing a function more than once that's why he uses the repeat method, so if that happens, stop the function, don't repeat it so you only put a return statement not to execute the code further

@MilanDrazic 4 года назад

@Ella Blun you think?

@lbobrov 4 года назад

Hi Kyle, do you have a RU-vid video in your channel here/course, in which you are discussing about Javascript DOM manipulation? Thanks, Lior :)

@guidingtechbd 2 года назад

I re-visited just for the restarting the audio! to start beginning if pressing multiple times!

@RichardBronosky 4 года назад

You should get an Espruino microcontroller board so you can make a REAL JavaScript keyboard.

@anthonynolanjannotta4688 Год назад

Hello! Im making my own version of this as a project and i noticed really weird mac vs windows behaviors with events not firing. in your example, on mac if you hold down "z" and "s" pressing "x" does nothing unless you let go of either "z" or "s". compared to holding down "z" "s" and "c" where all three notes play together. On a windows computer, you can play any combination of notes at the same time. Do you know why that is?

@TheJuancar0000 4 года назад

Great first approach, What would be the easier way to make it play simultaneous keys like chords?

@WebDevSimplified 4 года назад

It already can if you hit multiple keys at the same time.

@naveenkr5992 4 года назад

Thisky thisky 🤭. Great video btw

@asimgiri4269 4 года назад

The problem I am facing is that the audio that I have is little longer. So the ended event listener is fired only after certain seconds. So, I used the setTimeout() method to remove the active class after every 500ms.