Welcome back in this lesson we'll focus on adding in the audio so adding in the music samples that we'll
play when we hit each key and also focus on giving each key its own color so that we don't always get
these orange fading to yellow and then green but we'll have some that are purple some that are blue
as you can see here all different colors.
But it's always the same color for any given key like H has always this orange cue is always this that's
T Y and so on.
OK.
So to get started we'll just figure out how we can play a sound at all.
So just how we trigger a sound using Hallard.
Yes in the Hausler is basically the opposite of Paperchase as far as its complexity it's really really
simple which makes it really nice.
Again you can play audio without a library but it is a little bit.
It's a little painful when you want to do something like what we want to do where we're not just playing
a sound one time but I want to be able to trigger a sound ten times in a row like let's say I'm doing
this crap here I want to be able to do something like
there's a little bit of work involved to making that actually behave the way that we want it to.
It's really easy to play a sound like play a song which is really annoying but if you go onto a Web
site and there's some you know some sort of sound or song it's playing in the background that's really
simple to do with h tim owl and javascript's.
But to do something like this where we can have a bunch of simultaneous sound going and we can repeat
things and that would be a lot easier to use something like Hallard J us.
So again not impossible.
Like anything that a library does you can do it yourself.
But we wouldn't really want to.
So if we take a look at how it works this is all that we'll need to use this little bit of code here
where we create a new how.
So how is the thing that we're initialising and knew how.
Then we give it a list of a few URLs of the files that we want to play.
So the reason that we give it an array of these different you are different files even though they look
like they're the same they're just different file types and the order that you put them in is the order
that howler will try and load them in.
So basically there are certain file types that will work in every browser some of them that won't work
in every browser.
So you can specify certain backups.
We're not going to do that.
We'll just have a single file.
But if you wanted to have backups basically the way that that works as far as I know at least you can
read about it here I'm sure.
Here we go you or else the source you are else to the track or tracks to be loaded for the sound.
These should be an order of preference.
Howard Jasc will automatically load the first one that is compatible with the current browser.
So there you go.
We could add in other versions of the same song.
In our case the same sample and holler would automatically load the first one that's compatible.
OK.
So the code that we need though is new Howell.
And then you go and that's it.
And then when we're ready to play it we just call plays.
You can see here
and we won't be stopping it.
We won't be pausing.
We won't be looping because our sounds are really short.
So we just want them to play and let them finish out.
Each one is about somewhere between half a second and a second.
So if you haven't done so already go ahead and download that zip file that has all the sounds and dragged
into the same directory where you been writing your code.
So instead of sounds we have all these files.
All right.
And the next thing we need to do is install HAUSLER In order to use it.
So you can download it.
But just for variety sake I'll use a CDN.
So I just did a search for howler CDN
copy this first.
You are all here could always test it out see if it is valid.
Here we go.
Here's the code that is for howler.
Perfect.
Let's go back to our app
and then we'll just add in a script.
So after paper can duplicate that and just change the source to be the howler you know let's make sure
it loads OK without any issue.
Perfect.
Next let's actually make our first howl.
So let's copy this code again from hower.
Just take this first one right here
and let's do it up top start.
So we'll just do it right here and we'll say VAR's sound equals knew how and then we'll just put in
one file and let's do the first one that we see.
So Bubbles got MP 3 so that's inside the sound directory slash bubbles stud MP 3.
So sound.
Slash bubble.
I already forgot to use bubbles.
There you go.
Is pluralized.
So sound like you Bubbles.
MP 3 and that's all we need.
And let's not play it right away.
Let's just create that.
That's all we need to do.
And then to play it let's just play it.
When you press a key down so it's sound dot play really nice and simple let's take a look try it out
.
There we go.
So every key pressing a bunch of different keys now triggers that sound ok.
Hopefully that wasn't too annoying.
So next up let's focus on adding in another sound.
So we'll just do two to start.
So we have bubbles.
Let's do Clay MP3 so that we could do is just duplicate this and do a sound two equals new Howell and
we'll do sound slash clay and P3.
And then what we'll do in here is have an if statement.
So let's focus on two keys.
Let's do a and s.
So if you press a if key is a then we'll play sound and let's call it sound one just to make it clearer
if key is s you put quotes around this as well.
Then we'll play sound too.
So to tell what key was pressed it's really easy with Paperchase we have this event object here and
we need to do is event dot key.
So we'll just read an if statement if event that key equals a.
Then we'll just do a play sound one.
So that's sound one play and then do the same thing.
If event dot key equals equals X then will do play sound too.
So sound to play just like that.
So we can try that out.
So only key keys and S should trigger things.
So I'll tell you right now I'm hitting q looks like we have an error.
What are we getting here.
Sound is not defined.
Ignore these warnings here for now we will be fixing those at the very end.
It's a more complex issue but it actually won't get in the way of our code working to start.
But this will so silly error.
I was referencing sound right here.
We don't have sound anymore.
OK.
So now nothing should play.
When I hit most keys but I'll hit a K other keys and now had s.
So we have a n s.
Perfect.
And what we could do as well is now assign a color to each one so we could do something like this.
Let's move this to the bottom of the same key down but right before we push we could have something
like this if event he has a play that sound and we can set the color of new circle dot fill color equals
and then we can give it a color like to see 3 5 0 and then do the same thing.
If we press S but with a different color like let's do 16 a 0 8 5 and then we can have an else
and hopefully you're thinking to yourself This probably isn't the best way of doing this.
It might be OK for two and us but what about 20 30 or 50 keys.
We use the entire keyboard and all different characters.
That would be a lot of code.
But let me just show you right now.
So cue most colors or most keys don't play sound.
They give us the same color.
Now if I had a UPS I hit two keys a gives us a slightly different color as gives us a blue.
So of course the color that I picked here is hard.
It is hard to see let me change changes to be purple.
And technically we should make this an else.
If so we'll check if key is a LCF and else if we have two if statements.
This one will run and then we have another if and if that's not true then the elso be true but it won't
take into account this one appear.
So if we only want one of these to be true which is we only want one color purple blue or orange.
Then we want them to be part of one if statement but it doesn't really matter because we are going to
change this in just a second.
Now our refresh here is normal keys.
I hit a though we get purple hit as we get blue and two different sounds.
OK.
So that's how we use Hausler.
Now we want to do this for every single key and there's a much better way than what we have here.
So I'm actually going to get rid of all of this
because we could.
As I mentioned earlier have an if statement for every single key if key is a do this if key is B and
for every single key.
But that's really not a good practice.
So what we'll do instead is define an object and we'll just call it key data and it's an object.
And this is what it will look like.
So we'll have a key like a.
And then when a is pressed we'll say that color should be purple and that sound should be.
And let's just put this entire thing in there.
So I'll go over this in just a second.
Let me put this here first and then we can do the exact same thing again for us.
So when is pressed color should be green and sound should be new.
How will.
Same thing you are or else and let's do sound slash Clay thought MP3
and then we could do that for every single key.
And yes it's a lot of syntax here but the advantage is that we have one place for all of our data is
defined and then we don't need an if statement or in a separate conditional for every single key.
All that we have to do is take where are you event dot key which actually got rid of.
Take this right here.
Event dot key which is the key that was pressed.
And let's say that that's the letter J.
If that's the case we just take it and plug it into key data and that will give us color purple sound
.
Is this sound.
So I'll show you what I mean.
Let's just go with these two examples and to make it more obvious let's add in one more duplicate what
we have.
So we have a n s let's also do D.
And color can be it's too yellow and then sound.
What else do we have.
Let's do confetti.
Perfect.
Get rid of this trailing comma.
We can get rid of this now and we'll need to change this around a little bit and the next thing that
will do is take that event duck key and plug it in to our key data.
So we could do something like this.
Key data bracket event key and that would give us for if if s was event he gives us this entire thing
here and then we can do color so we can start there.
So what we'll do is before we push new circle and we'll just say new circle fill color equals key data
event key color.
So just to reiterate the dark key is a letter.
Well in our case we'll make sure it's a letter.
Technically could be a number or shiftier tab but it's the key that was pressed.
Then we take that and plug it into key data.
We get this entire thing out.
If eventime key is a if the user pressed a then we're doing dark color which gives us purple.
So then we're setting new circle but fill color to be purple.
If event Duck Key is a but notice we don't have to have an if statement to do that.
So we don't have to say if Turkey has a do this if event that key is asked to do this.
This is the same line no matter what.
Because we have this one dictionary or this one source of our data defined there is a problem of course
.
This will only work for a S and D right now.
So I'll show you refresh make sure we don't have any syntax errors.
We do cannot read color or cannot read properly colored undefined and that's not a syntax error.
That's the error that I'm expecting.
So I'll show you.
I'll press a good press a or s are also good and D.
But now I press Q And we have a problem.
And that's because this is undefined key data of Q doesn't exist.
We have a S and D.
So that's a problem.
The way to fix that is simple.
All we'll do is check if you do this right here.
Top inside of that key press if key data bracket event Docky.
So remember if this is truthy Basically if it exists then we'll do all of this.
Otherwise if it doesn't exist we won't do anything to start.
I actually won't do anything at all.
So right now our Apple only work it will do anything or only do anything when you press a S and D.
So just to go back let's make sure that works now.
Q Nothing happens.
I'm pressing a bunch of keys.
Now I hit a.
And it works.
S and D but no other key does anything.
Great.
So now let's get the sound to play.
So that's also nice and simple.
We just need key data event key sound and I'm not sure why I named these two sounds that should have
been sound.
There we go that sound dot play.
Remember the Venki plugs into this savey press D.
We get this object.
We do dat sound on it.
We get this which we then run play on just like before.
OK let's give it a shot.
A As the.
And the other keys don't do anything.
Perfect.
So all we have left to do here is really just add in all of her other keys and that would be really
painful for you to watch me type from scratch.
I have that pre-done I gave you the file in the download.
I called it day to day.
Yes.
So if we open that up it's just a giant object that has all of the letter keys.
So we have q w e r.
They're not really in any order.
Well they are but no particular order as far as colors and sounds.
I just picked random ones and they each have a color.
So if we copy this and replace what we have here make sure we call it key data
perfect.
We've now provided this Dictionary of sounding colors for every single key every single alphabet key
at least.
And we can use that.
We don't have to change our code at all.
So it's really nice if we want to add in numeric keys where we want to add in tab and shift and escape
and whatever else we just add an extra properties on this object.
So let's try out close it down refresh.
Perfect.
All right.
So don't get carried away here.
Pretty fun though
.
OK.
All right that's enough.
So we've covered a lot but at the end of the day all we really did was take some code that we found
to make a circle.
We took some code that we found to animate a circle to change the color.
We found some code to do events.
So when you press a key.
And then we combine that with some other code we found to play some music.
And when you put it together you can make some cool things and there's a lot more you can do here.
And we're not 100 percent done.
We are done with the functionality so we're not adding in any new features and won't look any different
.
But if you do open up the console you'll see we get all of these cannot load files SML HTP request cross
origin.
Blah blah blah.
I'll cover that in the next video.
Talk about why that's happening and also how we can fix it.
And then the other thing that we'll do is talk about a small way of refactoring this because right now
every time I press I'm adding a new circle to the circle's array and I'm never removing them from that
array.
So I might have 10000 in there right now.
Well I don't but I might have a hundred and there are 200 and we're looping over that entire thing.
Even if we don't see the circles because they're so small.
So we'll make a small change to get rid of those in the next video.
But again we're done with functionality so if you don't care to see that you just liked making this
and you want to move on.
Go ahead and move on to the next unit.