Who, in this exercise we're going to make this really sweet, JavaScript drum kit, not really exactly sure what it is, but it's really fun to play and when you hit the corresponding key on your keyboard, it's going to do two things.
First of all, it's going to play the sound that's associated with that key and, second of all, it's going to do this short little animation, where it pops the button up to be a little bit bigger than we want, and then also it will apply that yellow Border and that little background there, it's really really subtle and I'll.
Show you how that's working here if we inspect on this kick one right here, you see we have this data key and we'll look at that in just a second, but when I press it yeah, you can't even see it adding because it's going so quickly, but What that's doing is adding a class of playing to that element which will then kick in the CSS.
If I open up today's exercise and we look at the style that CSS you see, we have a class of playing it's going to scale it up by 1.
1.
In our CSS, it's going to change the border color, it's going to change the box shadow now, because if we look at a regular key here, you see that we have a transition that is 0.
07 seconds long, really really quick and that's going to scale it up And change the background color behind it.
So that's really the two things that we have here and if you would like to sort of go at this on your own pause, the video here try get this up into working.
Otherwise, let's go ahead for the ride and take a look at what we're working with here.
So we've got a div with a class of keys, and inside of that, we've got a whole bunch of divs with a class of key.
Now each of these keys here obviously has like the the clap what sound it's going to make as well as the key that you should hit on your keyboard.
But the important thing here is that every key on your keyboard, when you press the up or the down when you key up or key down event, there's going to be something called a key code that is associated with that key.
Now.
I'Ve got a little website here.
I whipped up a couple years ago because I always find myself searching for it and it's called key code info and when you press a key on your keyboard, let it escape or space or a it's going to have a number associated with that specific key on Your keyboard - and this is the most consistent way that I found cross browser across languages - is not absolutely perfect, but it gets you most of the way for most of your standard keys.
So when you click or when you hit 65 like when you key up and we're going to check, if that was the a key, then we're going to play the corresponding audio element.
That also has a data key now.
What is this data key if you've never used a data attributes before this is not a standard? You won't go, find this googling anything anywhere.
You want, and essentially data attributes were brought about in HTML when people were just making up their own attributes.
We have things like source in class and those are standards, and then people just started making up their own and the people who made HTML were like whoa whoa chill out.
You can't just start adding like for whatever you want.
So we came up with this idea of data attributes where, if you want to make up something like a key, you have to put it behind a data, something.
So what I'm doing here is I'm using data attributes to hook up this.
The data key 65, along with the data key audio, so that when someone hits a key on their keyboard, we're going to find the audio element and play it and we're going to find the key div and we're going to add a class of playing.
So it will animate itself on in.
So let's get started, go over to our script tag here, and first thing we need to do is just be focused on listening for a key up event.
Now, the way that we do, that is you first get whatever element that you're listening for and in our case I'm going to listen on window.
Sometimes you might want to listen on the input or a div or a text area, or something like that.
We'Re going to add an event listener and the event that we're listening here is called key down, and then next we have a function which will give us the event.
Inside of that, we have nothing and then I'm going to get rid of this rest of the stuff here.
So we're going to sin for the key down event and when that happens, we're going to run this function, which will give us the event and I'm just going to console.
log that event open up my console.
Now, whenever I press one of these keys on my keyboard, you'll see that we get this keyboard event.
That'S what E is the event is just a object, full of data describing what happened, and it will tell us all kinds of info like what key was actually hit.
But the thing we're concerned with here is the key code, which is the number that is associated with that key and that's essentially Hall.
This website is when someone hits a key up, we're just going to display the corresponding number that you have so we go down here.
We can log a key code, see what we've got good now.
We'Ve got all these different and if you hit spacebar egging at 32, if you hit escape you're going to get 27 now, what we need to do is say: is there an element, an audio element on the page that has a data key of 65 and we're Going to use document query selector, so we're only looking for one.
If I was looking for many, I would say: query selector all, but in our case is just query selector and we're going to listen for an audio we're going to try, select an audio element, but we want to select it where it has a data key like There'S no class on here, and sometimes I I see people say like class, equals key 65 and then like split it and select something with a class of key 65.
That'S a bit messy to me.
I rather just use its own data attribute here, so we can use an attribute selector if you've ever used.
This in CSS works the same way in JavaScript, attribute selectors, say something like this data key equals and normally would say, 65 right, but that is going to be a variable that lives inside of this event.
So what I'm going to do is I'm going to switch these two back ticks and we're going to use es6 template strings which is dollar sign, curly brackets, say e key code.
Now we can console.
log audio and see if we've selected an actual audio element.
So I'm going to refresh I'm going to hit my a button note we got an error.
Audio data equals 65 is not a valid selector.
What did we do here? I think we need to pop a set of quotes around this actual key here.
Let'S see if that works for us hit a there we go so looks like you.
Do.
Need quotes around your actual number here now.
When I hit the key and hit s and hit D, you see that we are getting the corresponding audio element for that specific key.
Now, sometimes we're going to hit I'm going to go ahead and hit Q we get null.
Why do we get null? That'S because there is no audio element associated with 81, so right away right there we can do is we can say if there is no audio? If bang audio, then we are just going to return and that will just stop the function from running all together.
Okay, good and that will just stop it now.
What we can do is, since we have this audio element, we can play it.
Let'S try that s D F.
Now it kind of works, but here hit hit F over and over again.
F.
F, F, F.
F.
F, I'm hitting it multiple multiple times, but it really only plays once every so often and that's because the open hat F it plays and it takes like maybe two or three seconds to actually get to the end.
And if you call dot play on an audio element that is already playing, it won't play it again because it's like oh, why would I do that? I'M clearly already playing with that.
So what we want to do before we do that is sort of rewind it to the start of the element, so that, if you hit it in succession over and over and over again, it will just rewind it to the start so say: audio dot.
Current time equals zero.
Now this is going to rewind to the start, and now, if I just hammer on F, you see we get it over and over again AAA SSS g dgfo good playing over and over again I'm going to try some of the other keys on the keyboard.
Nothing happens because we're doing this check if there's no audio element now, what we also need to do is select the corresponding key.
That is with it, because we want to add that little animation that we have here.
So I guess I can't ski equals and I'm going to take this entire thing and switch it out with a key.
So, instead of selecting an audio element with the data at a key, we could select a div or in our case something with the class of key, but also the data key.
Now, let's go to the bottom here in console.
log, the actual key element, good look.
These are the corresponding key elements that we have and how do we get them to do that cool little animation? Well again, if we go back to our style, dot, CSS we've got here, you see that I've already styled the the CSS, and most of this does not matter except the one line that we have here.
That is transition all 0.
07 seconds and when you add a class of playing to that, we're going to scale it up, we're going to change the border color and we're going to change the box shadow color.
So what we can do is we'll say key dot, class list, dot, add and then we say playing and if you've never used this, if you've just used it using jQuery, that's the same thing as saying like key dot, add class playing except we're not using jQuery.
Here we're just using vanilla JavaScript, so that's the way that you do it in vanilla, JavaScript, you call classless they've add.
Similarly, we also have dot remove and we have dot toggle, which will allow you to add in remove the different classes that you want.
So, let's see how that works, ha s D! F! You see how it's adding them.
If you want to see how it works a little bit slower, what you can do is go into your CSS and change this.
Maybe let's make the scale like two and let's make the trends in 1.
07 seconds now, when I hit D, you see over a second at F G, so that's what's happening, but because we did it in such a short time span 0.
07 seconds it just.
Does it really really quickly and also we don't want to scale it up exactly that much now that works, but what? Why isn't it going away? And that's because we are adding in the class, but we have not yet removed the class.
You might think.
Oh, that's! No problem we'll do like a set timeout here, we'll run a function side here and after zero point zero seven seconds.
Well, that's, okay! But what tends to happen if you have a timeout here as well as you have a timeout in your CSS JavaScript, which is right here, they start to get out of sync because maybe like a designer comes around, that's not quite right.
Let'S change that to like 0.
9 and that that feels a little bit better to me and then you have to go into the JavaScript and make sure that that that lines up as well so rather than like just setting a timer to do it.
What we can do is use a transitioned end event that will fire when the thing has saw stopped animating itself on in now.
What is the transition end event? Well, let's, let's take it back a second.
What is a click event? A click event is when you click something and it will fire off the event and say somebody clicked me.
We also have events in JavaScript.
That will say I didn't get clicked, but I was transitioned.
I transitioned myself from scale one boarder black to scale.
One point: one border: yellow: that's what we're going from here.
Just supporters black to here, which supporter is that specific, yellow.
So what we can do is we can listen on each key for when the transition and event happens.
So let's do that.
First, let's go to so: let's go down here and we'll say con skies.
I need to select every single key on the page because we want to listen for it on each one, so say: document, query selector and we want Clery, selector all will say dot key now.
Let'S just see if I were to run that in my console here.
Let'S see what that gives us that gives us an array of every single element that is matched okay, good, then what we want to do is we want to listen for an event called transition end on each one, so say: Keys dot for each and we're going To get each key if you're wondering why do we have to do this like? Why can't we just do Keys dot, add event, listener and listen for transition, and and that's because, if you're used to jQuery or anything like that, the problem is with.
When you have an array of elements, you cannot listen on all of them.
You must explicitly loop over every single element and attach an event listener.
So the way that I like to do, that seems to be the simplest way for me.
Is you can say key.
We use a little arrow function here if you've followed along in my es6 series, like key dot, add event listener and then the listener that we are listening for is transition end, and when that ends we are going to run a function called remove transition.
Now we have to make that now.
Let'S just take a quick look at here, so each key gets a event listener added to it, which is transition end and then, when someone when a transition is ending, we will remove it now.
We need to actually make that function here, so we'll say: function remove transition that will give us the event inside of that, let's just console law the event just to see what we're working with here.
So I'm going to press a whoa.
What happened here? Okay? So we have one two three, four five six transition end events for that one little fade in work out a little bit bigger and that's because a whole bunch of things transitioned here the border right, color transition, all of the different all of the borders have have Transitioned, the Box shadow, which is that yellow glow, has transitioned and then also the transform has finished.
Now we don't really care about all of these.
We really just want to do it when one thing is over generally they'll the longest one.
So, let's pick the transform so say: if e dot in what was the event, we were looking for here, event: dot property name.
If it doesn't equal transition, then we will return and that will say skip it if it's not a trans form transform, not transition.
I always mess them up.
Thank you for yelling at me through the computer screen now what's up next, let's just console.
log eat property name, let's see what we're working with here.
So we got this function that will run when a transition has ended.
You see what's happening.
It'S console logging, the word transform, because that is the thing, the property that is being ended.
Now it does it really quickly.
But if I were again to change this transform to 2.
0 seven seconds and press a one two there we go.
It took two seconds and then that's when it ended in coincidentally while instantly that's why we want to do it when that happens, when it's done moving itself in, we just want to reverse everything that we know about that.
So we can head to our remove transition function here and first of all, I will say this now: what is this going to be equal to? Well, if you are having a hard time understanding what this is equal to a really cheap and dirty way to understand what this is equal to is well first, you can just console log in see what it is.
That'S a nice way to to find it out.
So let me press a and then after two seconds I still have it on two seconds.
This is equal to the key, and why is that? Because this is always equal to the whatever got called against it.
So add, eventlistener car called what got called against it.
Key, so this is equal to the actual key, so say this that classlist that remove I'm going to remove the class of playing.
If that Dave.
Now it's two seconds so I'm going to hit it two seconds later.
Transition end is going to fire which is going to remove the transition of playing and it should fade itself out.
So I'm going to hit D it's in and then it's done and it'll take the class off.
If we inspect that watch it right here see that's got a class of playing and then two seconds later it will remove it.
Now, if we go to our CSS and change that back to zero point, zero seven seconds, it's just nice and quick nice and quick nice and quick for all of those, it will immediately and and the same thing happens there.
If you were to add a class of playing in dev tools, it will still remove it because the JavaScript is listening on that element for when you remove it.
One last thing I want to do is we go into our HTML? I'M never a big fan of attaching these functions right to the key down here.
So what I want to do is put these in its own function, and it will call that play sound, say, function play sound, I'm going to put all this logic inside here and that is going to take in the event which and then bring down my event.
Listener down to the bottom here and we're going to say when someone Keys down we're going to play, the sound should keep it for us, still works fine and we've got them nice and separate, so that, if I ever wanted to play the sound based off of Something else I totally could so that is a basic JavaScript drum kit.
Again, the things we learned about was key events as well as playing audio as well as listening for the transition and event.
Similarly, if you're also dealing with animations, you can listen for the animation end event, which works exactly the same way thanks.
First of all, it's going to play the sound that's associated with that key and, second of all, it's going to do this short little animation, where it pops the button up to be a little bit bigger than we want, and then also it will apply that yellow Border and that little background there, it's really really subtle and I'll.
Show you how that's working here if we inspect on this kick one right here, you see we have this data key and we'll look at that in just a second, but when I press it yeah, you can't even see it adding because it's going so quickly, but What that's doing is adding a class of playing to that element which will then kick in the CSS.
If I open up today's exercise and we look at the style that CSS you see, we have a class of playing it's going to scale it up by 1.
1.
In our CSS, it's going to change the border color, it's going to change the box shadow now, because if we look at a regular key here, you see that we have a transition that is 0.
07 seconds long, really really quick and that's going to scale it up And change the background color behind it.
So that's really the two things that we have here and if you would like to sort of go at this on your own pause, the video here try get this up into working.
Otherwise, let's go ahead for the ride and take a look at what we're working with here.
So we've got a div with a class of keys, and inside of that, we've got a whole bunch of divs with a class of key.
Now each of these keys here obviously has like the the clap what sound it's going to make as well as the key that you should hit on your keyboard.
But the important thing here is that every key on your keyboard, when you press the up or the down when you key up or key down event, there's going to be something called a key code that is associated with that key.
Now.
I'Ve got a little website here.
I whipped up a couple years ago because I always find myself searching for it and it's called key code info and when you press a key on your keyboard, let it escape or space or a it's going to have a number associated with that specific key on Your keyboard - and this is the most consistent way that I found cross browser across languages - is not absolutely perfect, but it gets you most of the way for most of your standard keys.
So when you click or when you hit 65 like when you key up and we're going to check, if that was the a key, then we're going to play the corresponding audio element.
That also has a data key now.
What is this data key if you've never used a data attributes before this is not a standard? You won't go, find this googling anything anywhere.
You want, and essentially data attributes were brought about in HTML when people were just making up their own attributes.
We have things like source in class and those are standards, and then people just started making up their own and the people who made HTML were like whoa whoa chill out.
You can't just start adding like for whatever you want.
So we came up with this idea of data attributes where, if you want to make up something like a key, you have to put it behind a data, something.
So what I'm doing here is I'm using data attributes to hook up this.
The data key 65, along with the data key audio, so that when someone hits a key on their keyboard, we're going to find the audio element and play it and we're going to find the key div and we're going to add a class of playing.
So it will animate itself on in.
So let's get started, go over to our script tag here, and first thing we need to do is just be focused on listening for a key up event.
Now, the way that we do, that is you first get whatever element that you're listening for and in our case I'm going to listen on window.
Sometimes you might want to listen on the input or a div or a text area, or something like that.
We'Re going to add an event listener and the event that we're listening here is called key down, and then next we have a function which will give us the event.
Inside of that, we have nothing and then I'm going to get rid of this rest of the stuff here.
So we're going to sin for the key down event and when that happens, we're going to run this function, which will give us the event and I'm just going to console.
log that event open up my console.
Now, whenever I press one of these keys on my keyboard, you'll see that we get this keyboard event.
That'S what E is the event is just a object, full of data describing what happened, and it will tell us all kinds of info like what key was actually hit.
But the thing we're concerned with here is the key code, which is the number that is associated with that key and that's essentially Hall.
This website is when someone hits a key up, we're just going to display the corresponding number that you have so we go down here.
We can log a key code, see what we've got good now.
We'Ve got all these different and if you hit spacebar egging at 32, if you hit escape you're going to get 27 now, what we need to do is say: is there an element, an audio element on the page that has a data key of 65 and we're Going to use document query selector, so we're only looking for one.
If I was looking for many, I would say: query selector all, but in our case is just query selector and we're going to listen for an audio we're going to try, select an audio element, but we want to select it where it has a data key like There'S no class on here, and sometimes I I see people say like class, equals key 65 and then like split it and select something with a class of key 65.
That'S a bit messy to me.
I rather just use its own data attribute here, so we can use an attribute selector if you've ever used.
This in CSS works the same way in JavaScript, attribute selectors, say something like this data key equals and normally would say, 65 right, but that is going to be a variable that lives inside of this event.
So what I'm going to do is I'm going to switch these two back ticks and we're going to use es6 template strings which is dollar sign, curly brackets, say e key code.
Now we can console.
log audio and see if we've selected an actual audio element.
So I'm going to refresh I'm going to hit my a button note we got an error.
Audio data equals 65 is not a valid selector.
What did we do here? I think we need to pop a set of quotes around this actual key here.
Let'S see if that works for us hit a there we go so looks like you.
Do.
Need quotes around your actual number here now.
When I hit the key and hit s and hit D, you see that we are getting the corresponding audio element for that specific key.
Now, sometimes we're going to hit I'm going to go ahead and hit Q we get null.
Why do we get null? That'S because there is no audio element associated with 81, so right away right there we can do is we can say if there is no audio? If bang audio, then we are just going to return and that will just stop the function from running all together.
Okay, good and that will just stop it now.
What we can do is, since we have this audio element, we can play it.
Let'S try that s D F.
Now it kind of works, but here hit hit F over and over again.
F.
F, F, F.
F.
F, I'm hitting it multiple multiple times, but it really only plays once every so often and that's because the open hat F it plays and it takes like maybe two or three seconds to actually get to the end.
And if you call dot play on an audio element that is already playing, it won't play it again because it's like oh, why would I do that? I'M clearly already playing with that.
So what we want to do before we do that is sort of rewind it to the start of the element, so that, if you hit it in succession over and over and over again, it will just rewind it to the start so say: audio dot.
Current time equals zero.
Now this is going to rewind to the start, and now, if I just hammer on F, you see we get it over and over again AAA SSS g dgfo good playing over and over again I'm going to try some of the other keys on the keyboard.
Nothing happens because we're doing this check if there's no audio element now, what we also need to do is select the corresponding key.
That is with it, because we want to add that little animation that we have here.
So I guess I can't ski equals and I'm going to take this entire thing and switch it out with a key.
So, instead of selecting an audio element with the data at a key, we could select a div or in our case something with the class of key, but also the data key.
Now, let's go to the bottom here in console.
log, the actual key element, good look.
These are the corresponding key elements that we have and how do we get them to do that cool little animation? Well again, if we go back to our style, dot, CSS we've got here, you see that I've already styled the the CSS, and most of this does not matter except the one line that we have here.
That is transition all 0.
07 seconds and when you add a class of playing to that, we're going to scale it up, we're going to change the border color and we're going to change the box shadow color.
So what we can do is we'll say key dot, class list, dot, add and then we say playing and if you've never used this, if you've just used it using jQuery, that's the same thing as saying like key dot, add class playing except we're not using jQuery.
Here we're just using vanilla JavaScript, so that's the way that you do it in vanilla, JavaScript, you call classless they've add.
Similarly, we also have dot remove and we have dot toggle, which will allow you to add in remove the different classes that you want.
So, let's see how that works, ha s D! F! You see how it's adding them.
If you want to see how it works a little bit slower, what you can do is go into your CSS and change this.
Maybe let's make the scale like two and let's make the trends in 1.
07 seconds now, when I hit D, you see over a second at F G, so that's what's happening, but because we did it in such a short time span 0.
07 seconds it just.
Does it really really quickly and also we don't want to scale it up exactly that much now that works, but what? Why isn't it going away? And that's because we are adding in the class, but we have not yet removed the class.
You might think.
Oh, that's! No problem we'll do like a set timeout here, we'll run a function side here and after zero point zero seven seconds.
Well, that's, okay! But what tends to happen if you have a timeout here as well as you have a timeout in your CSS JavaScript, which is right here, they start to get out of sync because maybe like a designer comes around, that's not quite right.
Let'S change that to like 0.
9 and that that feels a little bit better to me and then you have to go into the JavaScript and make sure that that that lines up as well so rather than like just setting a timer to do it.
What we can do is use a transitioned end event that will fire when the thing has saw stopped animating itself on in now.
What is the transition end event? Well, let's, let's take it back a second.
What is a click event? A click event is when you click something and it will fire off the event and say somebody clicked me.
We also have events in JavaScript.
That will say I didn't get clicked, but I was transitioned.
I transitioned myself from scale one boarder black to scale.
One point: one border: yellow: that's what we're going from here.
Just supporters black to here, which supporter is that specific, yellow.
So what we can do is we can listen on each key for when the transition and event happens.
So let's do that.
First, let's go to so: let's go down here and we'll say con skies.
I need to select every single key on the page because we want to listen for it on each one, so say: document, query selector and we want Clery, selector all will say dot key now.
Let'S just see if I were to run that in my console here.
Let'S see what that gives us that gives us an array of every single element that is matched okay, good, then what we want to do is we want to listen for an event called transition end on each one, so say: Keys dot for each and we're going To get each key if you're wondering why do we have to do this like? Why can't we just do Keys dot, add event, listener and listen for transition, and and that's because, if you're used to jQuery or anything like that, the problem is with.
When you have an array of elements, you cannot listen on all of them.
You must explicitly loop over every single element and attach an event listener.
So the way that I like to do, that seems to be the simplest way for me.
Is you can say key.
We use a little arrow function here if you've followed along in my es6 series, like key dot, add event listener and then the listener that we are listening for is transition end, and when that ends we are going to run a function called remove transition.
Now we have to make that now.
Let'S just take a quick look at here, so each key gets a event listener added to it, which is transition end and then, when someone when a transition is ending, we will remove it now.
We need to actually make that function here, so we'll say: function remove transition that will give us the event inside of that, let's just console law the event just to see what we're working with here.
So I'm going to press a whoa.
What happened here? Okay? So we have one two three, four five six transition end events for that one little fade in work out a little bit bigger and that's because a whole bunch of things transitioned here the border right, color transition, all of the different all of the borders have have Transitioned, the Box shadow, which is that yellow glow, has transitioned and then also the transform has finished.
Now we don't really care about all of these.
We really just want to do it when one thing is over generally they'll the longest one.
So, let's pick the transform so say: if e dot in what was the event, we were looking for here, event: dot property name.
If it doesn't equal transition, then we will return and that will say skip it if it's not a trans form transform, not transition.
I always mess them up.
Thank you for yelling at me through the computer screen now what's up next, let's just console.
log eat property name, let's see what we're working with here.
So we got this function that will run when a transition has ended.
You see what's happening.
It'S console logging, the word transform, because that is the thing, the property that is being ended.
Now it does it really quickly.
But if I were again to change this transform to 2.
0 seven seconds and press a one two there we go.
It took two seconds and then that's when it ended in coincidentally while instantly that's why we want to do it when that happens, when it's done moving itself in, we just want to reverse everything that we know about that.
So we can head to our remove transition function here and first of all, I will say this now: what is this going to be equal to? Well, if you are having a hard time understanding what this is equal to a really cheap and dirty way to understand what this is equal to is well first, you can just console log in see what it is.
That'S a nice way to to find it out.
So let me press a and then after two seconds I still have it on two seconds.
This is equal to the key, and why is that? Because this is always equal to the whatever got called against it.
So add, eventlistener car called what got called against it.
Key, so this is equal to the actual key, so say this that classlist that remove I'm going to remove the class of playing.
If that Dave.
Now it's two seconds so I'm going to hit it two seconds later.
Transition end is going to fire which is going to remove the transition of playing and it should fade itself out.
So I'm going to hit D it's in and then it's done and it'll take the class off.
If we inspect that watch it right here see that's got a class of playing and then two seconds later it will remove it.
Now, if we go to our CSS and change that back to zero point, zero seven seconds, it's just nice and quick nice and quick nice and quick for all of those, it will immediately and and the same thing happens there.
If you were to add a class of playing in dev tools, it will still remove it because the JavaScript is listening on that element for when you remove it.
One last thing I want to do is we go into our HTML? I'M never a big fan of attaching these functions right to the key down here.
So what I want to do is put these in its own function, and it will call that play sound, say, function play sound, I'm going to put all this logic inside here and that is going to take in the event which and then bring down my event.
Listener down to the bottom here and we're going to say when someone Keys down we're going to play, the sound should keep it for us, still works fine and we've got them nice and separate, so that, if I ever wanted to play the sound based off of Something else I totally could so that is a basic JavaScript drum kit.
Again, the things we learned about was key events as well as playing audio as well as listening for the transition and event.
Similarly, if you're also dealing with animations, you can listen for the animation end event, which works exactly the same way thanks.
Comments
Post a Comment