Now in the last lesson we figured out how we could add an event listener to all of our buttons. 1
In this lesson we're going to take it a step further and instead of showing an alert we're going to 2
play the sound of a drum. So playing sound is super easy using Javascript, 3
but let's see if we can find out how to do it 4
if we didn't know. So let's say something like play sound javascript. 5
Let's see what we get. 6
So the first result that we get back is a Stack Overflow post where somebody is asking how you can play 7
audio using Javascript. 8
And the first answer says that you can do it by creating a new audio object by saying new Audio, and 9
you give it the name of the file that you want to play and then you simply call the method play on your 10
new audio object. 11
So that seems pretty easy. 12
Well let's test it out. 13
Inside our event listener, 14
let's get rid of the alert and let's instead try to play our sound. 15
Now notice that all of our sounds are located inside the sounds folder, 16
so you'll have to specify the folder when you try to locate the sound that you're trying to play. 17
So as a challenge I want you to try and implement this code inside our function here, 18
and I want you to play the tom 1 drum that we've got here. 19
So it's called tom-1.mp3. 20
And if you do succeed, then pressing on each of these buttons no longer generates an alert but 21
instead plays the sound of the drum. 22
So pause the video now and see if you can make that code work. 23
All right. 24
So let's move this code over here and see if we can figure out what it's trying to do. 25
So the first thing it does is create a new variable and then it seems to create some sort of new audio 26
object and it specifies the name of the sound file. 27
So in our case our sound file is called tom-1. 28
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 29
called tom-1.mp3. 30
And then with this new object created, we're going to call play on it, which seems to be a method 31
that will play the sound. 32
So let's hit save and refresh our web site and see if that worked. 33
Cool. Nice, right? 34
Now that was pretty easy, 35
but what exactly are we doing with this line of code? 36
And very often when you're trying to do something you will come across code snippets that helpful programmers 37
have provided in Stack Overflow, 38
but it's really important that if you're going to implement it in your own code, to find out what the 39
code is doing and how it works. 40
So let's do that now. 41
Now if we search in Google for new Audio() javascript, which is basically the part of the code that we 42
used when we created a new audio object, then you can see that the first thing that pops up is our ever 43
so helpful MDN web docs, and it shows us what we're trying to create. By writing that line of code, 44
we're essentially creating an HTMLAudioElement, and you can see this is exactly the same syntax. 45
So you're creating a variable that stores this new object by writing new Audio, 46
and then here you've got the URL or the location of that audio. 47
And what this line of code will do behind the scenes is it will actually construct an HTMLAudioElement. 48
Now this HTMLMediaElement that we create has a whole bunch of properties. 49
So for example you can set the current time that you want to play, 50
or you can see whether it's been played or if it's paused, but it's also got a whole bunch of methods, 51
so things that you can make that object do. 52
And that includes the play method which basically plays back our media. 53
Now at the moment no matter which button we press we always get the same sound which is of course the 54
tom 1 drum that we specified here. 55
But if you take a look inside our images we've got all of these different images of different drums 56
that we can play. 57
And each of the images correspond to a different sound sample that corresponds to those images. 58
So let's go ahead and assign each of these buttons a background image using our CSS. 59
So here's a challenge for you. 60
I want you to take a look inside the styles.css and assign a background image to each of these buttons. 61
Now you can order your buttons in whichever way you like. 62
So if you want the tom drums to begin with, then you might do tom 1 through 4, or you might begin 63
with the snare and end with the kick drum. It's completely up to you. 64
But by the end of this, 65
each button should have a background image that's going to give the user a hint as to which sound it 66
will make. 67
So you might need to take a look at the documentation or Stack Overflow in order to figure out how to 68
do this. But pause the video now and see if you can complete this challenge. 69
Now I've decided to have the four tom drums, so tom 1, 2, 3, 4, for the first four buttons, and 70
the last three to be the snare, the crash and the kick drum. 71
So, remember we're now writing CSS, and the property that we want to tap into is the background-image, and 72
we're going to set it to a image 73
URL, so this is going to be the source or the location of our image, which is going to be a string 74
that's images, 75
so that's the folder that contains the image, 76
and then we're going to start off at tom1.png. 77
And now if we hit save and refresh and you can see we've assigned an image to the background of our first 78
button. 79
And I've gone through this to assign the images in the order that I want it to show up. 80
Now if you created this in a different order from me, then that's completely fine, but just remember to 81
check back your images to remember which one is that which button so that you can assign the correct 82
sounds. 83
So now we have to solve the next problem which is how do we get each of these buttons to play the sound 84
of the corresponding drum image. 85
Well if you think back to our lessons in the introduction to the DOM modules we know that we can grab 86
the innerHTML or the text content of any of these buttons, and you can see that they all have a different 87
character associated with each drum. 88
So what if we use that to differentiate the buttons so that when a user presses on a button we get the 89
character that the button contains and then we use that to determine which sound we're going to play 90
them? So that seems easy enough. 91
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 92
focus on one thing at a time without this code distracting us. 93
So now we need this function to be called when a button detects a click and we need to know which button 94
got clicked so that we can play the right sound. 95
So essentially we just need to know which button triggered the event. 96
So at the moment we've attached a listener to our button and when the user clicks on the button the 97
listener gets triggered, and the function that was linked to the event listener gets called. 98
Now we can figure out the identity of the button that triggered the event by tapping into something 99
called this. 100
And this is basically the identity of the button that triggered the event listener. 101
So let me show this to you by logging it in the console. 102
So let's console.log this, and let's refresh our web site. 103
So now if I click on one of these buttons you can see I'm actually getting the button object that triggered 104
the event by simply console logging this. 105
And I can do this with all of the different buttons. 106
And now, if I have access to this object, then I can use properties such as innerHTML, which we've 107
seen before. 108
So now it will print out the innerHTML of the button that triggered the click event 109
every single time I click on a new button. 110
Now there's quite a few lines of code that we've just written, 111
so let's break it down so we can understand what's going on. 112
So inside the loop the first thing that we do is we look through the document and we try to grab all 113
of the elements that have a class of drum. So that basically gets us all of those buttons that have 114
that class of drum. 115
Now the next thing we do is we loop through all of those elements starting from when i is equal to zero, 116
and we add an event listener to it. And the next time we loop through, then the i becomes 1, 117
and now we add the event listener to the second button. 118
So essentially our code will go through all of the buttons in turn, selecting them and adding the event 119
listener, 120
until we've gotten to the end of all of our buttons. 121
So now that all of our buttons have an event listener attached to it, 122
what happens when we click on the first button? Then that button's event listener will trigger the function 123
that was attached to the event listener. 124
And in this case that's simply to just console.log(this), which is simply the button that triggered the 125
event. 126
Now we're not simply limited to console logging the identity of the button. 127
We can also use its identity to change its style. 128
So as a challenge can you see how you can modify this code to change the text color of the button that 129
got clicked to the color white? 130
Pause the video and see if you can complete this challenge. 131
So if we already know the identity of the button that got clicked then we can simply say this.style 132
.color = "white". And instead of console logging it, we're just going to run this line of code. 133
So now if I refreshed the web site with that new code, then you can see that whenever I click on a button 134
I change the text color to white because we're able to get the identity of the button that triggered 135
the event and we can change its style and color to white.