To those following along with this as part of the Odin Project. If you are confused about updating the keyCode and data-key instructions. 1) Ctrl + F in code - search for "e.keyCode" -> replace with e.code 2) Ctr + F in code - search "data-keys" -> In the HTML body, replace numerical numbers in the classes for both audio and div with KeyA, Key D, etc. example: would become Took me a sec to figure out. Hope that helps
For some reason, I didn't check the comments, silly me. Solved it myself by changing e.keyCode with e.key. Then changed all the data-keys numerical values to letters in lowercase, a,s,d and so on.
@@ginnerzapata5909 I feel like up 'till now I'd been prepared for every challenge the Odin Project sent me too, but this video had me going like, 'wait, I haven't seen any of that stuff' . I'll open the files and see how it goes from here, but I'm feeling a little lost with this one. What was it like for you when you hit that point of the project?
13:27 I find the following is better for removing the "playing" class: window.addEventListener('keyup', function(e) { const key = document.querySelector(`.key[data-key = "${e.keyCode}"]`); key.classList.remove('playing'); Not only is the code more readable, but it ensures that the transition effect stays in place as long as the user holds down the key. The key returns back to "key" class when the button is released.
indeed, it's also a good solution. but dont forget to add a return incase you dont press a button with a sound, or else you"ll have error on your console. window.addEventListener('keyup', function(e) { const key = document.querySelector(`.key[data-key = "${e.keyCode}"]`); *if(!key) return;* key.classList.remove('playing'); }); Tbh i largely prefered your solution, it's more clear. each action of the keyboard is determined.
@@simonshurety3870 In the video, you have 2 events listeners.. One was : 'keydown' and the second was: 'transitionnend' but instead of using 'transitionnend', *Christos Binos*, proposed 'keyup' event and his following code. So it's either keydown + transitionnend as in the video or keydown + keyup. You keep the original keydown, but you dont implement the *keys.foreach((key => key.addeventlistenner('transionnend' bla bla bla...)* and use the code above. You'll have the same result with less code.
Really cool tutorial, grateful for Wes' videos. I found that if you are willing to code along, then go through the video several times and really break down each step, and make it a goal to add verbose comments to each section of the code, explaining everything that is happening - it will do a lot to bring home understanding how everything works here. Having done front-end development in 1999-2008 it blows my mind all of the efficiencies and improvements that are baked into the language now that were not before. Guys like Wes give me hope to learn and really understand the stuff that always seemed to elude me before.
welll first thnx , for people like me who searched where the heck was the problem showing "null" and not the audio element because like he said there is a difference between en apostrophe of ==> ' (3) and this one ==> ` (alt+ 7). so querySelector( ` ````````````````````` )
man I've been coding for 5 months now and mainly just use treehouse... but they don't teach stuff like this on there and as an electronic music producer as well it is really great to see this video! got my mind realizing how many possible things there are... also made me really happy that i understood a majority of what he was teaching! the ES6 stuff i have to go over a few times again especially for concatenating but man! this was great! thanks!
The transitionend event will bubble up (like any other DOM event). You could have a single event listener on the ".keys" DIV which listens for transitionend, and then use the event.target object to determine the key DIV and remove the ".playing" class.
What about the annoying CSS transition problems regarding events? When you hold down the key for few seconds, it will get stuck. Mine gets stuck because transitionend will never come because ".playing" class is already present.
5 minutes in and when you broke down the data structure that holds all the data for key down event, a lightbulb just went off in my head and all these other ideas for apps started rushing into my head. What a great video.
For the people trying this exercise with e.key since e.keyCode is deprecated, you are probably getting "null" at the console. That's because e.key returns a letter not the key-code number so it won't find the audio file element. Think of a way of going around this.
My initial approach was to change the data-key values for the audio and the div data attributes to the corresponding letters. I still don't get anything in the console for my keydown events.
I've found a bug - if you hold key for more than 5 second, gold border becomes permanent. So I think it's better to implement keyup and keydown even. Also your function playsound adds class. As I heard it's hardly recommended to make functions to implement 1 action. Thank you a lot for your lessons!
Truly don’t understand the huge credit Odin gets sometimes. This doesn’t have much that was taught throughout the curriculum yet it’s sending me here to do as an exercise. I have gotten to the point of LITERALLY copy and pasting what he has and the best I got is “null” for every console.log. I always get confident until the exercises on the site come and you have to use something that you know nothing of because you weren’t taught.
I agree I constantly get frustrated when Odin links to more advanced topics first and then explains those at a later stage(loops and arrays after the first project on rock-paper-scissor). The "flow" is really messed up and it actually interferes with learning not aiding it.
Hey, instead of finding and looping through all the keys and listening for transition ends on all of them, you can just add the event listener at the end of the playSound() function since we've already gone through the trouble of finding the key being pressed down. function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if (!audio) return; audio.currentTime = 0; audio.play(); key.classList.add('playing'); key.addEventListener('transitionend', removeTransition); }; Greetings from TOP, and thanks for the tutorial, i think i learned a lot!
I consider using e.type !== "transitionend" as the value doesn't change to all TransitionEvent object once the user holds the key for long and when the key is release. It ensures the class "playing" is always removed. (if e.type !== "transitionend") return;
Before discovering you channel I never really liked JavaScript cos I didn't think it was possible to write such concise yet powerful code! Subscribed! Keep up the amazing work. :)
A simpler way (for my taste) to deal with this is to directly call the removing function in the playing one, leaving us with a nice and clear 2 functions blocks and one line of calling. function stopSound(e){ if (e.propertyName !== 'transform') return; e.target.classList.remove('playing'); }; function playSound(e){ const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if(!audio) return; key.classList.add('playing'); audio.currentTime = 0; audio.play(); key.addEventListener('transitionend', stopSound); }; window.addEventListener('keydown', playSound); This is fairly personnal tho, but he solution in the video looked weird to me and felt very confusing, and I humbly guess that if this is my case, it must be the same for others. This way is way clearer to me, so I hope it can help :)
You could also make a simple keyUp function which removes a class, so if you hold the key down the button stays yellow. Not exactly the same result but found it a bit easier and in a way it makes sense for the 'playing' class to act like that. Anyway great tutorial, thank!
My code was not removing the class, I spent two hours comparing the code. I ended up deleting it, and writing it again. It worked. I hate not knowing what happened, but I'm glad I'm done.
Thank you for making it look easy! Some things I've encountered with this project: 1. "this.classList.remove" doesn't work.. glad to see it changed into "e.target.classList.remove" 2. removing the "ease" transition from .key Class makes the removeTransition command bug out 3. the L keydown does not output any sound, I can see the border and Class change but no sound output sadly.. Keep up the good work!!
If you reach 6:38 and are getting null in the console, double check const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); is using back ticks and not single quotations. I totally missed that lol.
Hi devs, TIP for people who are also following the tutorial and notice that the fade out transition didn't work: (17:41) Inside of the removeTransition( ) , same as the final source code is, replace this.classList.remove('playing') for e.target.classList.remove('playing'); Because the first way didn't work, at least for me. #TheOdinProject Keep coding, mates!
5 ปีที่แล้ว +4
@0 0 I have researched to answer your doubt and I think I got the point. When we use the arrow function " ( ) =>" instead the normal function "function ( ) { }", it happens because arrow functions don't have arguments binding, in another words, we cannot access the object properties using "this".
those from the odin project the assignment ask you to use keyboard eventlistener code instead of keycode used in the video above for that you that to work you need to change datakey from keyCode to code for example the first keycode is 40 but its code KeyA . it took me time to figure out hope that helps
Cool. This is the first JS walkthough that I didn't skip. It's because you applied it to audio, which is of great interest to me. It makes things way more fun
even easier: change the classList in the playSound function from classList.add to classList.toggle. Now the "playing" class won't linger after keyup. : )
13:55 so to repeat what he said. you can't do "keys.addEventListener" to concisely add an event listener to every item in the node list. You have to loop through each item and add the event listener.
I'm into TOP as well are we supposed to watch the video tutorial and then build the project or shall we give it a try without watching the video? It's nos clear since they say to check out the video tutorial!
if you are having error when using arrow function on the last part, you should use declaration instead because arrow functions have somthng with weird 'this'(read MDN documentation)
Hi, @Wes Bos Thanks for this tutorial. I think the code can be shrink a little bit by the following code. Please let me know your opinion. function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); if(!audio) return; audio.currentTime = 0; audio.play(); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); key.classList.add('playing'); key.addEventListener('transitionend', (e) => { e.target.classList.remove('playing'); }); } window.addEventListener('keydown', playSound);
The problem with this is that actually you're adding an EventListener inside an EventListener, this will fill the key variable with one more 'transitioned' EvListener every time you hit one key , it will just unnecessary load up the page more.
11:27 to remove the 'playing' class simply inside the function window.addEventListener('keydown',(e)=>{.........} at the end add key.addEventListener("transitionend", (event) => { key.classList.remove('playing'); }); works the same.
Very cool, thank you for making this, however as someone only 2 weeks into learning code this is a very fast-pace and very difficult to code along too, there is not enough time spent showing the structure of the code or why we're using certain keys and formats. I have to pause the video type in a line of code I'm barley understanding and then un-pause only to have the screen change immediately too something else and then the line of code gets deleted and then replaced with a whole new string. I feel like I'm trying to chase a chicken coding along to this. Still liked and subscribed, I'm sure if I was a little more advanced this would be easier to follow along too.
for anyone reading this in future this since this comment is 1 year old first learn the basics of html, css and javascript and then see this video basics is important before moving on
Very grateful for these videos - but why so rushed? If this is for people who try to learn. Does it make a difference if the video would go on for 22 minutes, not 20?
My audio files aren't working. I can't click on anything on the page. Am I doing something wrong? I get this in the console: "Cannot play media. No decoders for requested formats: audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav"
Thanks for the challenge! I was able to build the drum kit! So I wanted to create a mobile version with functionality. I used an apache server to give my mobile device access to the files & when I changed the eventListener from 'keydown' to other touch events, 'touchstart' or 'touchmove' it doesn't work. Can anyone help?
There is a bug when I hold a key a few seconds, the key transform gets stuck. And when I remove the line of "if(e.propertyName !== "transform") return;" the bug gets fixed, and I got no errors. I'm confused what's going on. Why do we need this line then? Can you guys explain it to me?
Thank you for this Wes. I have been getting deeper and deeper into Vanilla JavaScript in order to better understand React and programming concepts in general. Your videos are clear, logical and most importantly FUN. It's much easier to work through a project when the end result is something cool and fun to use. I am a bassist and am going to sample myself playing and substitute the drum sounds for bass notes and/or bass licks. There are a lot of possibilities with this. Do you work with any MIDI and DAW's like Ableton, Pro Tools, Logic etc? I can see how this layout could be the foundation for some of the built in sampler/synth plugins in those apps.
Nice video, one question though: Is not easier to remove the class using the same logic of key down, but instead remove it at key up? This way you will avoid the loop on each key.
Got the same problem. I think keyup is not a solution. It's waiting for a transitionend event which will never come. And you can't create a new transition because "playing" class is already there so it doesn't start a transition. How to solve this? I would like to know aswell. I tried to add after the const = key query the following code: if (key.classList.contains('playing')){ key.classList.remove('playing'); } else { audio.currentTime = 0; audio.play(); key.classList.add('playing'); } Seems to be working. But i think it's still not a beautiful solution.
This fixed the bug for me too. From what I can see when we keep the key pressed, the event we are triggering changes from 'transitionend' type to 'keydown' and therefore loses the propertyName attribute "transform''. At the start of the removeTransition() metod we check if the propertyName attribute for our event is equal to "transform" and return from the method if it is not. Since it no longer will equal "transform" after holding down key it cannot get to the line in the method where we remove the css class causing the animation. So the animation stays.
You need e.target.classList.remove('playing') instead of this.classList.remove('playing') Not sure why it works for him in the video though, because 'this' is 'window' for me.
I started this couse and was absolutely surprised in a good way... thanks for sharing man... one thing though, the videos are not playing in my ipad, don't know why... im only able to see them in my mac. Thanks anyway.
+Ricardo Onodera sorry for the trouble, I fix this the other day. The videos are two higher resolution for some devices to play so I bumped it down to 1080 P
About that little bug, while holding the button: just change if (e.propertyName !== "transform") return; this.classList.remove("playing"); to this.classList.remove("playing"); if (e.propertyName !== "transform") return; It's not throwing an error in console. But we can also do: this.classList = "key"; if (e.propertyName !== "transform") return; We have to remove the "playing" class first.
To those following along with this as part of the Odin Project. If you are confused about updating the keyCode and data-key instructions.
1) Ctrl + F in code - search for "e.keyCode" -> replace with e.code
2) Ctr + F in code - search "data-keys" -> In the HTML body, replace numerical numbers in the classes for both audio and div with KeyA, Key D, etc. example: would become
Took me a sec to figure out. Hope that helps
is that the only change?
Thank you so much ! I was looking for this !
For some reason, I didn't check the comments, silly me. Solved it myself by changing e.keyCode with e.key. Then changed all the data-keys numerical values to letters in lowercase, a,s,d and so on.
THANK YOU!!! I've been trying to figure out how to get this to work for a better part of an hour!
Thank you!!
All hail The Odin Project WEB Development 101 ;)
how is it going for you?
@@ginnerzapata5909 Not OP, but I'm hurting lol
@@Donnshin add me on telegram @ginnerzapata we could help each other.. o dropped but this week I came back xD
@@ginnerzapata5909 I feel like up 'till now I'd been prepared for every challenge the Odin Project sent me too, but this video had me going like, 'wait, I haven't seen any of that stuff' . I'll open the files and see how it goes from here, but I'm feeling a little lost with this one. What was it like for you when you hit that point of the project?
So it's been 1 year since this comment was posted. Where are you now on your web dev journey?
13:27
I find the following is better for removing the "playing" class:
window.addEventListener('keyup', function(e) {
const key = document.querySelector(`.key[data-key = "${e.keyCode}"]`);
key.classList.remove('playing');
Not only is the code more readable, but it ensures that the transition effect stays in place as long as the user holds down the key. The key returns back to "key" class when the button is released.
Well done, concise and clear.
indeed, it's also a good solution.
but dont forget to add a return incase you dont press a button with a sound, or else you"ll have error on your console.
window.addEventListener('keyup', function(e) {
const key = document.querySelector(`.key[data-key = "${e.keyCode}"]`);
*if(!key) return;*
key.classList.remove('playing');
});
Tbh i largely prefered your solution, it's more clear. each action of the keyboard is determined.
I'm not sure where to implement this? Remove the original 'keydown' event listener?
@@Ludo045 I'm not sure where to implement this? Remove the original 'keydown' event listener?
@@simonshurety3870
In the video, you have 2 events listeners..
One was : 'keydown' and the second was: 'transitionnend'
but instead of using 'transitionnend', *Christos Binos*, proposed 'keyup' event and his following code.
So it's either keydown + transitionnend as in the video or keydown + keyup.
You keep the original keydown, but you dont implement the *keys.foreach((key => key.addeventlistenner('transionnend' bla bla bla...)* and use the code above. You'll have the same result with less code.
Really cool tutorial, grateful for Wes' videos. I found that if you are willing to code along, then go through the video several times and really break down each step, and make it a goal to add verbose comments to each section of the code, explaining everything that is happening - it will do a lot to bring home understanding how everything works here. Having done front-end development in 1999-2008 it blows my mind all of the efficiencies and improvements that are baked into the language now that were not before. Guys like Wes give me hope to learn and really understand the stuff that always seemed to elude me before.
found from The Odin Project - nice content. looking forward to looking at the other 29 :)
Hi from The Odin Project!
I understood this perfectly after checking some things I forgot or didn't learn properly.
Thanks Wes and Odin!
06:25
For the es6 template string make sure you are using the ` apostrophe/backtick and not the single quote '
you sir, are a life saver
welll first thnx , for people like me who searched where the heck was the problem showing "null" and not the audio element because like he said there is a difference between en apostrophe of ==> ' (3) and this one ==> ` (alt+ 7).
so querySelector( ` ````````````````````` )
Thank you for saving me from this dilemma 👍
phew.... thank you man
Dude, I had to create a snippet just to output some 'backticks'. It was killing me.
I have finished this series, I've learn so much about JS and even ES6 from this coding challenge, thanks Wes Bos!
How to download these sound effect
@@yashpurohit509 you can find all the files in his repo mate : github.com/wesbos/JavaScript30
@@murat6018 Thanks murat.I was searching for this in the comments
There's no way i'd be able to implement this logic on my own, but it was a fun follow along!
man I've been coding for 5 months now and mainly just use treehouse... but they don't teach stuff like this on there and as an electronic music producer as well it is really great to see this video! got my mind realizing how many possible things there are... also made me really happy that i understood a majority of what he was teaching! the ES6 stuff i have to go over a few times again especially for concatenating but man! this was great! thanks!
It was nice seeing an interesting web project that didn't need any dev tools or extra libraries to work. Thanks for the vid :)
The transitionend event will bubble up (like any other DOM event). You could have a single event listener on the ".keys" DIV which listens for transitionend, and then use the event.target object to determine the key DIV and remove the ".playing" class.
What about the annoying CSS transition problems regarding events? When you hold down the key for few seconds, it will get stuck. Mine gets stuck because transitionend will never come because ".playing" class is already present.
I'm surprised how many new things I've learned from this vid.
You should have watched for a keyup instead of a transition end to remove the class, that way if they press and hold it will stay yellow
I noticed that too! Except that what solved it for me was changing key.classList.add to key.classList.toggle, which seems to resolve the issue.
If you have a "null" message even though you are copying everything right...It might be because you have to use a backtick, here's one for free : `
thanks so much!!! i was looking through every line and wondering where i went wrong!!!! lmaoo backticks and regular ' look soo alike
I had this issue and somehow my quotation marks were curly rather than the normal quotation marks, so check that as well.
5 minutes in and when you broke down the data structure that holds all the data for key down event, a lightbulb just went off in my head and all these other ideas for apps started rushing into my head. What a great video.
For the people trying this exercise with e.key since e.keyCode is deprecated, you are probably getting "null" at the console. That's because e.key returns a letter not the key-code number so it won't find the audio file element. Think of a way of going around this.
My initial approach was to change the data-key values for the audio and the div data attributes to the corresponding letters. I still don't get anything in the console for my keydown events.
window.addEventListener('keydown', function(e){
console.log(e.which)
})
@@devluxx Nice one Sakinur. But 'which' is also deprecated.
Apparently e.code is now the accepted method, however using this I just get a null output in the console. keyCode is the only thing that works.
I've found a bug - if you hold key for more than 5 second, gold border becomes permanent. So I think it's better to implement keyup and keydown even. Also your function playsound adds class. As I heard it's hardly recommended to make functions to implement 1 action. Thank you a lot for your lessons!
mine is rock solid
just change the .add to toggle to fix this bug
@@johnpaulnarvasa8062 Wow, cool!
Truly don’t understand the huge credit Odin gets sometimes. This doesn’t have much that was taught throughout the curriculum yet it’s sending me here to do as an exercise. I have gotten to the point of LITERALLY copy and pasting what he has and the best I got is “null” for every console.log. I always get confident until the exercises on the site come and you have to use something that you know nothing of because you weren’t taught.
I agree I constantly get frustrated when Odin links to more advanced topics first and then explains those at a later stage(loops and arrays after the first project on rock-paper-scissor). The "flow" is really messed up and it actually interferes with learning not aiding it.
As someone who studies JS I want to tell you that I can not thank you enough for this series
It's just a treasure trove for JS students
Hey, instead of finding and looping through all the keys and listening for transition ends on all of them, you can just add the event listener at the end of the playSound() function since we've already gone through the trouble of finding the key being pressed down.
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if (!audio) return;
audio.currentTime = 0;
audio.play();
key.classList.add('playing');
key.addEventListener('transitionend', removeTransition);
};
Greetings from TOP, and thanks for the tutorial, i think i learned a lot!
yo i`m learning from TOP whatchu doin rn?
I consider using e.type !== "transitionend" as the value doesn't change to all TransitionEvent object once the user holds the key for long and when the key is release. It ensures the class "playing" is always removed.
(if e.type !== "transitionend") return;
Before discovering you channel I never really liked JavaScript cos I didn't think it was possible to write such concise yet powerful code! Subscribed! Keep up the amazing work. :)
A simpler way (for my taste) to deal with this is to directly call the removing function in the playing one, leaving us with a nice and clear 2 functions blocks and one line of calling.
function stopSound(e){
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
};
function playSound(e){
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if(!audio) return;
key.classList.add('playing');
audio.currentTime = 0;
audio.play();
key.addEventListener('transitionend', stopSound);
};
window.addEventListener('keydown', playSound);
This is fairly personnal tho, but he solution in the video looked weird to me and felt very confusing, and I humbly guess that if this is my case, it must be the same for others. This way is way clearer to me, so I hope it can help :)
You could also make a simple keyUp function which removes a class, so if you hold the key down the button stays yellow. Not exactly the same result but found it a bit easier and in a way it makes sense for the 'playing' class to act like that. Anyway great tutorial, thank!
hey, i've just found this same bug. would you mind show how the code would look like?
@@un9286 window.addEventListener('keyup', function(e) {
const key = document.querySelector(`.key[data-key = "${e.code}"]`);
if(!key) return;
key.classList.remove('playing');
});
My code was not removing the class, I spent two hours comparing the code. I ended up deleting it, and writing it again. It worked. I hate not knowing what happened, but I'm glad I'm done.
Thank you for making it look easy!
Some things I've encountered with this project:
1. "this.classList.remove" doesn't work.. glad to see it changed into "e.target.classList.remove"
2. removing the "ease" transition from .key Class makes the removeTransition command bug out
3. the L keydown does not output any sound, I can see the border and Class change but no sound output sadly..
Keep up the good work!!
SUPER!!
thanks for pointing that out. My 'J' button transition was sticking for some reason but this fixed it
@@Orangobang I couldn't resolve that issue. Care to clarify?
If you reach 6:38 and are getting null in the console, double check const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); is using back ticks and not single quotations. I totally missed that lol.
Thank you sir
I want to give you a big kiss right on your mouth thank you
i was stuck on this haha.....thanks a lot
There's an easier way to remove the class, add the event listener ('keyup').
There's also a third one, keypress.
how would you write the keyup event listener code?
Great tut. Lots of elements to work with and expand upon.
Thanks : )
Hi devs,
TIP for people who are also following the tutorial and notice that the fade out transition didn't work: (17:41) Inside of the removeTransition( ) , same as the final source code is, replace this.classList.remove('playing') for e.target.classList.remove('playing');
Because the first way didn't work, at least for me. #TheOdinProject
Keep coding, mates!
@0 0 I have researched to answer your doubt and I think I got the point. When we use the arrow function " ( ) =>" instead the normal function "function ( ) { }", it happens because arrow functions don't have arguments binding, in another words, we cannot access the object properties using "this".
convert "const keys" into array.
It will look like this: const keys = Array.from(the rest of the code here).
holding down the key bugs the transition out
Any idea how to fix it?
@@resa574 change the .add to .toggle
those from the odin project the assignment ask you to use keyboard eventlistener code instead of keycode used in the video above for that you that to work you need to change datakey from keyCode to code for example the first keycode is 40 but its code KeyA . it took me time to figure out hope that helps
YOU ARE A LIFESAVER!!! THANKS MAN! :D
Cool. This is the first JS walkthough that I didn't skip. It's because you applied it to audio, which is of great interest to me. It makes things way more fun
if a key is kept pressed down for a few seconds, the "playing" class stays forever on the element. I removed it using the "keyup" event.
Can you please explain why does this happen?
even easier: change the classList in the playSound function from classList.add to classList.toggle. Now the "playing" class won't linger after keyup.
: )
@@fibrep6623 No, I already tried that before using 'keyup'. It is not that responsive at all.
Sometimes, the playing class still remains, even if you use "toggle". So better to remove "playing" class using "keyup" event
here from the odin project ^~^
13:55 so to repeat what he said. you can't do "keys.addEventListener" to concisely add an event listener to every item in the node list. You have to loop through each item and add the event listener.
Odin Project gang rise up!
so a simple tag as audio poses that much property and function and we should learn all properties of all tag... it good to realize that very soon.
so "transitionend" and "keydown" are standard and predefined words !
yes bro
6 year old video that TOP is sending me to, wild
thanks for the keyEvent, audio, transition, and animation tutorial bro!
Came from The Odin Project WEB Development 101 :))
I'm into TOP as well are we supposed to watch the video tutorial and then build the project or shall we give it a try without watching the video? It's nos clear since they say to check out the video tutorial!
@@8ildandi watch this video and try to build it.
So I just found out about these.... who I'm I to say no????????? God bless you Bos ur a BOSS
Very informative and fun to follow video! I learned quite a lot just from these 20 minutes
This is exactly the type of challenge that I needed! Thank you for providing these JS examples!
The most funniest, useful Course Ever!!! You're the best Wes Bos :)
Hi @Wes Bos ,
for me the code is not working, when I log audio value to console, it giving "null" on the console.
if you are having error when using arrow function on the last part, you should use declaration instead because arrow functions have somthng with weird 'this'(read MDN documentation)
Awesome Wes Bos, thanks a lot for sharing valuable knowledge with us
th-cam.com/video/hDLH17qYD4E/w-d-xo.html
I am drawn to you.. Its crazy. Am sure al love this and i havent even started yet💖💖
Thanks so much for JS30! I'm just learning how to code.
Hi, @Wes Bos Thanks for this tutorial. I think the code can be shrink a little bit by the following code. Please let me know your opinion.
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
if(!audio) return;
audio.currentTime = 0;
audio.play();
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
key.classList.add('playing');
key.addEventListener('transitionend', (e) => {
e.target.classList.remove('playing');
});
}
window.addEventListener('keydown', playSound);
The problem with this is that actually you're adding an EventListener inside an EventListener, this will fill the key variable with one more 'transitioned' EvListener every time you hit one key , it will just unnecessary load up the page more.
11:27 to remove the 'playing' class simply inside the function
window.addEventListener('keydown',(e)=>{.........}
at the end add
key.addEventListener("transitionend", (event) => {
key.classList.remove('playing');
});
works the same.
Very cool, thank you for making this, however as someone only 2 weeks into learning code this is a very fast-pace and very difficult to code along too, there is not enough time spent showing the structure of the code or why we're using certain keys and formats. I have to pause the video type in a line of code I'm barley understanding and then un-pause only to have the screen change immediately too something else and then the line of code gets deleted and then replaced with a whole new string. I feel like I'm trying to chase a chicken coding along to this. Still liked and subscribed, I'm sure if I was a little more advanced this would be easier to follow along too.
I agree!
for anyone reading this in future this since this comment is 1 year old first learn the basics of html, css and javascript and then see this video basics is important before moving on
this was a lot of fun, thanks!
Hey Wes. . .Very good tut and simple to understand. Keep it up dude. . .
Honestly, I first found out about you because we have the same name (that is if your name really is Bos) but your tutorials are amazing. Keep it up!
I noticed that if you hold the key down, the glow will stay stuck on.
keyCode is deprecated for me, and also the audio doesn't play although the console does log that whatever key was hit.
Here from TheOdinProject
Very grateful for these videos - but why so rushed? If this is for people who try to learn.
Does it make a difference if the video would go on for 22 minutes, not 20?
For new comers the KeyboardEvent.keyCode is deprecated, it's recommended to use KeyboardEvent.key instead.
thanks!!
This is blowing my mind! Amazing!
My audio files aren't working. I can't click on anything on the page. Am I doing something wrong? I get this in the console: "Cannot play media. No decoders for requested formats: audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav, audio/x-wav"
Wes Bos, create a video talking about autocomplete and plugins that you use in the sublime.
KEREN PAK.
My greetings from INDONESIA.
Thanks for the challenge! I was able to build the drum kit! So I wanted to create a mobile version with functionality. I used an apache server to give my mobile device access to the files & when I changed the eventListener from 'keydown' to other touch events, 'touchstart' or 'touchmove' it doesn't work. Can anyone help?
Hey guys, the intro song is "For Tonight We're Strangers" by The Divided
There is a bug when I hold a key a few seconds, the key transform gets stuck. And when I remove the line of "if(e.propertyName !== "transform") return;" the bug gets fixed, and I got no errors. I'm confused what's going on. Why do we need this line then? Can you guys explain it to me?
setTimeout(() => {
key.classList.remove("playing");
}, 300);
1:46 they should really get that checked out
Thank you for this Wes. I have been getting deeper and deeper into Vanilla JavaScript in order to better understand React and programming concepts in general. Your videos are clear, logical and most importantly FUN. It's much easier to work through a project when the end result is something cool and fun to use.
I am a bassist and am going to sample myself playing and substitute the drum sounds for bass notes and/or bass licks. There are a lot of possibilities with this.
Do you work with any MIDI and DAW's like Ableton, Pro Tools, Logic etc? I can see how this layout could be the foundation for some of the built in sampler/synth plugins in those apps.
how has your journey been so far? i'm currently on the same boat.
@@chimaezeifeoma9693 I'd love to hear if you do a bass version. Any suggestions for where to get some cool .wav bass audio files?
in later part of video instead of using all that code woudnt it been better to use setTimeOut and remove class after 200ms. i did it works perfectly
Okay i'll come back once i finish the js es6 course
"Now each of these keys here, uh, obviously, has the clap" - I'm dying man xD That made me laugh too damn hard. 1:45
man this is quality content,dope
Wes, are you left handed? This organization of drums is something a lefty would do lol.
great tutorial, thanks!
Nice video, one question though: Is not easier to remove the class using the same logic of key down, but instead remove it at key up? This way you will avoid the loop on each key.
getting a major error in regards to key.classList.add('playing')
message => cannot read properties of null.
Please advise?
@6:20 is there a keyboard shortcut to switch the template backticks?
Great tutorial! Thank you Wes.
i came back after 2 years after i saw it last time.
So, Wes, keyCode is deprecated now. What do we do?
thank you for this series sir
Cool course! Thank you very much.
Very Welcome!
intro sounds tasty! are you a metalcore band member too :)?
thank you so much for such a good exercise
Great explanation - thanks!
I think there is a small bug, when I click continuously on any key the effect doesn't go away ,the function isn't removing it!
solution 'keyup' ?
window.addEventListener('keyup', playSound);
Got the same problem. I think keyup is not a solution. It's waiting for a transitionend event which will never come. And you can't create a new transition because "playing" class is already there so it doesn't start a transition. How to solve this? I would like to know aswell. I tried to add after the const = key query the following code:
if (key.classList.contains('playing')){
key.classList.remove('playing');
} else {
audio.currentTime = 0;
audio.play();
key.classList.add('playing');
}
Seems to be working. But i think it's still not a beautiful solution.
Removing if (e.propertyName !== 'transform') return; fixes the bug for me. Not exactly sure why it works though.
This fixed the bug for me too. From what I can see when we keep the key pressed, the event we are triggering changes from 'transitionend' type to 'keydown' and therefore loses the propertyName attribute "transform''.
At the start of the removeTransition() metod we check if the propertyName attribute for our event is equal to "transform" and return from the method if it is not. Since it no longer will equal "transform" after holding down key it cannot get to the line in the method where we remove the css class causing the animation. So the animation stays.
You need
e.target.classList.remove('playing')
instead of
this.classList.remove('playing')
Not sure why it works for him in the video though, because 'this' is 'window' for me.
Hi, thank you for your cool course, just wondering, which editor do you use, and how do you get the auto complete for javascript
+Yu Xue sublime! More info at wesbos.com/uses
I have a doubt !! Why not use the "keyup" event instead of the "transitionend" event. Is there any significant difference ?
TIME SPENT CODING: 20 MINUTES
TIME SPENT PLAYING THE DRUMS: 40 MINUTES
i love you
I am not getting the sounds in my browser what can I do?
I started this couse and was absolutely surprised in a good way... thanks for sharing man... one thing though, the videos are not playing in my ipad, don't know why... im only able to see them in my mac. Thanks anyway.
+Ricardo Onodera sorry for the trouble, I fix this the other day. The videos are two higher resolution for some devices to play so I bumped it down to 1080 P
Wes Bos
Hello from Egypt.
You are a perfect guy.
hello hakeeeeeeeeeeeeeeeeem
About that little bug, while holding the button:
just change
if (e.propertyName !== "transform") return;
this.classList.remove("playing");
to
this.classList.remove("playing");
if (e.propertyName !== "transform") return;
It's not throwing an error in console. But we can also do:
this.classList = "key";
if (e.propertyName !== "transform") return;
We have to remove the "playing" class first.
fantastic fix!
This do needs js background knowledge. Wait me ,bro. I will be back after learning basics.
I love playing drums. 😀
thanks for uploading videos to youtube ..... videos on your site are taking too long to load because of higher quality .... Great videos
Best
Tuto
Ever!