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.
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.
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!!!
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
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.
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!
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 ✌️👍
@@CreeperPookie It's Eb, due to that tone being the tonic of a flat key, as opposed to say C# being the tonic of a sharp key. You're not really wrong, I'm just that much of a music nerd. :)
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
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.
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.
Thanks for the amazing job. Here is a bug I found. I think if you play that piano for a long time, it will get slow and takes a lot of memory because every time a key is pressed an ended event listener is added to the audio element, without being removed later.
I downloaded a piano pc software but I want to change the colors of the notes when I play a midi file and I can't even though I tried changing the settings 🤔
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.
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 :)
5 лет назад
good tutorial btw key pressings are short not as long as you hold the button
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 😊
This is an amazing tutorial, however, for some reason, despite doing exactly what you are doing, I get no sound whatsoever when I click on the keys, and I have my own audio files that are in the same directory. I also reference them in the same way you do in a subdirectory and its still not working. What am I doing wrong? I'm using notepad++ by the way, could that be part of the reason? I know that javascript is enabled in my FireFox browser so that can't be the reason.
same here, I even named them the same and are atm working with the files downloaded from his directory(not that it'd make any difference) any help would be much appreciated :)
key.dataset.note can be simplified to element.dataset.keyname This means that within the specified element we are trying to find a dataset value using the specified keyname . So for the case of key.dataset.note if we were to play the far left white key on the piano, key.dataset.note would return C since in the html we set up the dataset data- with the keyname note and the value of C Now that we have the note we are playing we simply wrap key.dataset.note in getElementById() to find the audio file with the same ID as the note we are playing. sorry if it still isn't clear I'm new to javascript and probably not the most qualified to explain it.
@@WebDevSimplified I really like your tutorials! There is something special about the tutorials being short and yet clear and full of engaging content and innovations!
As a developer/musician, this brought me so much joy.
One of, if not the best web dev RUclipsrs I found. Keep up the good work! Your videos are beyond entertaining!
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.
Great, now I can learn both HTML/CSS/JS and Piano :D
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.
Best HTML JS CSS tutorial I 've seen. Thank you
You are very welcome!
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.
Even it is a weekend, watching you make me go back and start coding
I never knew about the repeat property for key press events! That could be really useful for html5 game devving
This blows my mind, every sentence you say I learn it’s crazy🙏🏼🙏🏼thank you so much
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!!!
you're awesome, bro! you are able to explain lots of stuff in a really short time, great teacher, keep on!
This is the first kinda video like this where I actually knew how to do it myself without any help. feels good
This is an awesome tutorial, and I really like it !!!
Thanks!
This is such a nice tutorial. great structure, great buildup. nice speed, good linking with your other video's.
Keep it up :D
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
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...
@@harag9 with fetch and promises ? no
Thank you so much for this, you have a fan for a lifetime
I always heard "Whisky ... Whisky ... Whisky ..." instead of "this key ... this key ... this key" :-)
Very good programming practice!
Good job!
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.
man your content is soo good, thanks a lot
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!
This is the Wonder-Boy of the Web World, always does something interesting!
rather than use js for click animation
you can
key:active {
background: #ccc;
}
While this is entirely helpful, It wouldn't work if he used the keyboard to play the piano
@@andy_lamax
good note🤔
Congrats on 100K Kyle 🔥🔥🔥 great fan!!!
man, your videos are amazing! thank you so much for making this content!
Superb keep doing it's gonna motivating us
Really playful example for training courses to beginners
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!
This is an awesome and clean video tutorial to understand how listener and basic .css works
Almost 100K
Congrats dude!
Thanks for sharing Bro😊
Thanks for helping.. it means lot to us.....
Lol this timing! I recently started learning piano
Thank Google ;)
Awesome.. That actually solved a problem I had for a queue system's alert sound.. Thank you
Best timing! I've just made an online piano and was wondering how to add audio (:
Nice man , go to next video ) Merry Christmas Day 🎁
Great video! Will try this out, and add web MIDI.
Wow! I learned so many things in this single tutorial! Pretty clever coding!
I subscribed coz i find it really cool and awesome 🤗
Thank you!
thank you teacher :) best tutorial
Excellent work!
Лучший! Всё понятно и без воды
I love you WDS!
Awesome as always
Wow superb💐👌
Awesome job.
development is fun, when requriments done by developers:)
wow amazing tutorial
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 ✌️👍
Great!
Wow.nice .👍👍👍
Awesome work. Thanks sir.
you have very nice technique...
Thanks for this! It's pretty awesome. Simplistic but really effective.
Eres un genio bro, waoo, sigue así bro y no sea como los demas norteamericanos, usted es una gran persona.
hi, Kyle, the key should be D Eb E F. Great tutorial. Thanks!
D#, not Eb.
@@CreeperPookie It's Eb, due to that tone being the tonic of a flat key, as opposed to say C# being the tonic of a sharp key. You're not really wrong, I'm just that much of a music nerd. :)
cool tut!!!
BRO, you are out here doing Lord's Work ! Many thanks from a beginner with big dreams 🔥❤🙏🙏🙏
Thanks for teaching us sir 😃
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
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.
@@WebDevSimplified Could you please share us the usage of this object in code?
Awesome man keep it up :)
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.
nice demo
Maaan, cool lesson ) thanks bro
Great video bro
I re-visited just for the restarting the audio! to start beginning if pressing multiple times!
Very cool Thanks!
Awesome. Will be beautiful if you close it by playing some songs with the piano.
Audience will enjoy the end result of the walkthrough.
Always Inspiring...
Great tutorial!...no need to do separate whiteKeys & blackKeys arrays for playing by keystrokes, just one for all 12 keys
thank you pro, you are fantastic 👍
thank u so much
That's nice bro
Thanks for the amazing job.
Here is a bug I found. I think if you play that piano for a long time, it will get slow and takes a lot of memory because every time a key is pressed an ended event listener is added to the audio element, without being removed later.
Very true. I should have used once to prevent the event listener from firing more then one time, or removed it when the event was finished.
WDS: creates piano
Me: console.log
Beyond amazing ❤️
Great tutorial
10:53 "Everything looks perfectly fine, other than the fact this piano looks ridiculous"
😭😭😂
I downloaded a piano pc software but I want to change the colors of the notes when I play a midi file and I can't even though I tried changing the settings 🤔
Good job buddy.
Nice job
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.
Thisky thisky 🤭. Great video btw
kyle thanks so much for the vid man :D
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 :)
good tutorial btw key pressings are short not as long as you hold the button
this guy is awesome
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 😊
This is an amazing tutorial, however, for some reason, despite doing exactly what you are doing, I get no sound whatsoever when I click on the keys, and I have my own audio files that are in the same directory. I also reference them in the same way you do in a subdirectory and its still not working. What am I doing wrong? I'm using notepad++ by the way, could that be part of the reason? I know that javascript is enabled in my FireFox browser so that can't be the reason.
same here, I even named them the same and are atm working with the files downloaded from his directory(not that it'd make any difference) any help would be much appreciated :)
Super ! I like
You should get an Espruino microcontroller board so you can make a REAL JavaScript keyboard.
it is amazing!
tq for sounds
12:27 didn't understand the expression:- getElementById(key.dataset.note)
key.dataset.note can be simplified to element.dataset.keyname
This means that within the specified element we are trying to find a dataset value using the specified keyname .
So for the case of key.dataset.note if we were to play the far left white key on the piano, key.dataset.note would return C since in the html we set up the dataset data- with the keyname note and the value of C
Now that we have the note we are playing we simply wrap key.dataset.note in getElementById() to find the audio file with the same ID as the note we are playing.
sorry if it still isn't clear I'm new to javascript and probably not the most qualified to explain it.
I love him so much
thank you brother keep it up next year 1M Goal right brother
that is awesome
Amazing!! Just one question, if I press on two keys in same time, it's play the two sounds together?
It will. You can use this piano to play chords
@@WebDevSimplified I really like your tutorials! There is something special about the tutorials being short and yet clear and full of engaging content and innovations!
Thank you so much!
Where did you find the notes mp3?
Wow... terrific video. Please mate do you have JS tutorials for beginners. I REALLY like your explanation. Many thanks