All language subtitles for 006 How to Play Sounds on a Website.en

Now in the last lesson we figured out how we could add an event listener to all of our buttons.

In this lesson we're going to take it a step further and instead of showing an alert we're going to

play the sound of a drum. So playing sound is super easy using Javascript,

but let's see if we can find out how to do it

if we didn't know. So let's say something like play sound javascript.

Let's see what we get.

So the first result that we get back is a Stack Overflow post where somebody is asking how you can play

audio using Javascript.

And the first answer says that you can do it by creating a new audio object by saying new Audio, and

you give it the name of the file that you want to play and then you simply call the method play on your

new audio object.

So that seems pretty easy.

Well let's test it out.

Inside our event listener,

let's get rid of the alert and let's instead try to play our sound.

Now notice that all of our sounds are located inside the sounds folder,

so you'll have to specify the folder when you try to locate the sound that you're trying to play.

So as a challenge I want you to try and implement this code inside our function here,

and I want you to play the tom 1 drum that we've got here.

So it's called tom-1.mp3.

And if you do succeed, then pressing on each of these buttons no longer generates an alert but

instead plays the sound of the drum.

So pause the video now and see if you can make that code work.

All right.

So let's move this code over here and see if we can figure out what it's trying to do.

So the first thing it does is create a new variable and then it seems to create some sort of new audio

object and it specifies the name of the sound file.

So in our case our sound file is called tom-1.

So in order to navigate to it we will have to say sounds, which is the folder that it's in, and then it's

called tom-1.mp3.

And then with this new object created, we're going to call play on it, which seems to be a method

that will play the sound.

So let's hit save and refresh our web site and see if that worked.

Cool. Nice, right?

Now that was pretty easy,

but what exactly are we doing with this line of code?

And very often when you're trying to do something you will come across code snippets that helpful programmers

have provided in Stack Overflow,

but it's really important that if you're going to implement it in your own code, to find out what the

code is doing and how it works.

So let's do that now.

Now if we search in Google for new Audio() javascript, which is basically the part of the code that we

used when we created a new audio object, then you can see that the first thing that pops up is our ever

so helpful MDN web docs, and it shows us what we're trying to create. By writing that line of code,

we're essentially creating an HTMLAudioElement, and you can see this is exactly the same syntax.

So you're creating a variable that stores this new object by writing new Audio,

and then here you've got the URL or the location of that audio.

And what this line of code will do behind the scenes is it will actually construct an HTMLAudioElement.

Now this HTMLMediaElement that we create has a whole bunch of properties.

So for example you can set the current time that you want to play,

or you can see whether it's been played or if it's paused, but it's also got a whole bunch of methods,

so things that you can make that object do.

And that includes the play method which basically plays back our media.

Now at the moment no matter which button we press we always get the same sound which is of course the

tom 1 drum that we specified here.

But if you take a look inside our images we've got all of these different images of different drums

that we can play.

And each of the images correspond to a different sound sample that corresponds to those images.

So let's go ahead and assign each of these buttons a background image using our CSS.

So here's a challenge for you.

I want you to take a look inside the styles.css and assign a background image to each of these buttons.

Now you can order your buttons in whichever way you like.

So if you want the tom drums to begin with, then you might do tom 1 through 4, or you might begin

with the snare and end with the kick drum. It's completely up to you.

But by the end of this,

each button should have a background image that's going to give the user a hint as to which sound it

will make.

So you might need to take a look at the documentation or Stack Overflow in order to figure out how to

do this. But pause the video now and see if you can complete this challenge.

Now I've decided to have the four tom drums, so tom 1, 2, 3, 4, for the first four buttons, and

the last three to be the snare, the crash and the kick drum.

So, remember we're now writing CSS, and the property that we want to tap into is the background-image, and

we're going to set it to a image

URL, so this is going to be the source or the location of our image, which is going to be a string

that's images,

so that's the folder that contains the image,

and then we're going to start off at tom1.png.

And now if we hit save and refresh and you can see we've assigned an image to the background of our first

button.

And I've gone through this to assign the images in the order that I want it to show up.

Now if you created this in a different order from me, then that's completely fine, but just remember to

check back your images to remember which one is that which button so that you can assign the correct

sounds.

So now we have to solve the next problem which is how do we get each of these buttons to play the sound

of the corresponding drum image.

Well if you think back to our lessons in the introduction to the DOM modules we know that we can grab

the innerHTML or the text content of any of these buttons, and you can see that they all have a different

character associated with each drum.

So what if we use that to differentiate the buttons so that when a user presses on a button we get the

character that the button contains and then we use that to determine which sound we're going to play

them? So that seems easy enough.

So I'm going to put our sound code down at the bottom and I'm going to comment it out so that we can

focus on one thing at a time without this code distracting us.

So now we need this function to be called when a button detects a click and we need to know which button

got clicked so that we can play the right sound.

So essentially we just need to know which button triggered the event.

So at the moment we've attached a listener to our button and when the user clicks on the button the

listener gets triggered, and the function that was linked to the event listener gets called.

Now we can figure out the identity of the button that triggered the event by tapping into something

called this.

And this is basically the identity of the button that triggered the event listener.

So let me show this to you by logging it in the console.

So let's console.log this, and let's refresh our web site.

So now if I click on one of these buttons you can see I'm actually getting the button object that triggered

the event by simply console logging this.

And I can do this with all of the different buttons.

And now, if I have access to this object, then I can use properties such as innerHTML, which we've

seen before.

So now it will print out the innerHTML of the button that triggered the click event

every single time I click on a new button.

Now there's quite a few lines of code that we've just written,

so let's break it down so we can understand what's going on.

So inside the loop the first thing that we do is we look through the document and we try to grab all

of the elements that have a class of drum. So that basically gets us all of those buttons that have

that class of drum.

Now the next thing we do is we loop through all of those elements starting from when i is equal to zero,

and we add an event listener to it. And the next time we loop through, then the i becomes 1,

and now we add the event listener to the second button.

So essentially our code will go through all of the buttons in turn, selecting them and adding the event

listener,

until we've gotten to the end of all of our buttons.

So now that all of our buttons have an event listener attached to it,

what happens when we click on the first button? Then that button's event listener will trigger the function

that was attached to the event listener.

And in this case that's simply to just console.log(this), which is simply the button that triggered the

event.

Now we're not simply limited to console logging the identity of the button.

We can also use its identity to change its style.

So as a challenge can you see how you can modify this code to change the text color of the button that

got clicked to the color white?

Pause the video and see if you can complete this challenge.

So if we already know the identity of the button that got clicked then we can simply say this.style

.color = "white". And instead of console logging it, we're just going to run this line of code.

So now if I refreshed the web site with that new code, then you can see that whenever I click on a button

I change the text color to white because we're able to get the identity of the button that triggered

the event and we can change its style and color to white.