 Okay, welcome to intro to JavaScript playing sound files with Tokyo EdTech. That is me in this video We're gonna learn how to do some events. So we're gonna have some buttons We're gonna click on those buttons and when we click on it. We want to play a sound We're actually gonna be constructing a simple one octave piano keyboard and we're gonna be using some functions This is vanilla JavaScript from scratch No libraries no nothing And we're gonna need to use a little bit of HTML and CSS So if you haven't done that before this probably is not the video to start with go check out my HTML and CSS Introductory videos, so let's take a look at what we have here so far. We have an HTML page So if you notice from here to here, it says HTML down here, we have our script I'm not saying this is the best way to do it. This is an easy way for beginners to understand the organization This is the kind of I teach high school students and this is an easy way for them to kind of understand the organization So inside the head we have the style tags So this is where we're gonna put some of our CSS later So you see I've already added an H1 so I got a title and I've got the 12 notes of the normal I guess my Western musical scale so notice we have a a sharp B C There's no B sharp and there is also no e sharp that is F and B sharp is C So let's go ahead and get started because we've got a lot to do and I think it's gonna be pretty cool So I'm kind of doing this for memory. So we'll see if I can Get this done So what we want to do or what we need first if we're gonna play sounds is we need some sound files So I went on Google I googled I found this random reddit post that and links to some MP3 files And so what I did was I downloaded those and I'll put the link down below I downloaded those files. I got it's called mp3 notes and you'll see here a bunch of MP3 files and My file here my HTML file is saved into the exact same Folder it's not in the same folder. It's not gonna work So those of you that don't know how to manage your files figure that part out first Okay, so what we're gonna do is we're gonna look at we're gonna look at a five We're gonna do a dash five. That's just how they labeled sharp So that's gonna be a sharp five. So we're gonna do a five a sharp five B five C five C sharp five etc. Etc. So all of these files are here in this folder And so I'm gonna go ahead and put that get that out of our way. Okay, so Let's go ahead and create a button Cuz we're just gonna make a bunch of buttons. So button and Our first note over here is a So I'm gonna go ahead and create a button. Hey, I'm gonna save it refresh it. Let's see what we got here Okay, there's a tiny little button now We're gonna go ahead and make it look like a piano here in a little bit But first let's go ahead and focus on the JavaScript since that's the title of this video Let's get the JavaScript side working. Then we'll go ahead and make it look pretty so what we want to do is we want to When I should say when we click this button, we want to play that mp3 file So the first step we need to do is we need to create Our create our sound objects Now I'm a very logical person So I'm gonna create a variable. I'm gonna call it a five because that's the note We're playing notice. I kept it lower case just to be consistent with everything and it is gonna be new oops, new audio And put this I put some single quotes or double quotes doesn't really matter A five dot mp3. Okay says that is the name of the audio file Over here, so you see we got a three a four a five I'm just using the fifth octave you can do whatever you want to do and later you can add the third and fourth octaves as well, so This creates the sound object, but it doesn't play it. Okay, so to do that we're going to Create some functions to play the sounds So I'm gonna call my first function Go figure play a five No, I made this one capital. Just that's kind of the naming convention. I'm gonna use here parentheses and It's very simple. I'm gonna do a five a five dot play No, no at the parentheses note semi-colon So let's go ahead and save it. I'm gonna refresh this and I'm gonna run it. I want to click this now I do not hear a sound. I assume you do not hear a sound either okay, and so if you've done a little bit of You know coding in JavaScript in htl before you might realize we missed a step which was the event Okay, so what we want to do is want to use an on-click event. So when we Click on that button We want to call this function. It's very easy to do. We just do on click Equals and I need to double quotes and the function we're gonna call is play a five parentheses and semi-colon So I'm gonna save that I'm gonna refresh it and hopefully you should be able to hear it in the microphone Okay, I don't know how well it's coming through but let me turn the volume up here Maybe I can't turn it there. Yeah Okay, so we have some sounds So this is the basic concept. Okay. I'm just gonna apply this basic concept to the other Notes, but I'm gonna show you a way to do this a lot easier But let's just go ahead and just for you know for fun Let's go ahead and add a sharp And this is something I tell my students look at the pattern Okay, once you have one button working It's very easy just to copy and paste to make the changes that you need. So let's go ahead. I'm gonna copy that There's three parts. We got a copy. I'm gonna copy that Paste it and I'm gonna copy this function and paste it. So we want to do a sharp And again the way that this particular file is saved. It's a dash five So let's go a dash five And let's play a dash five and a dash five Now you see how the colors have changed. I'm doing this for a reason. So let's go ahead. I've saved it I'm gonna refresh it. So let's try a Okay, no sound No sound nothing. Okay, and the reason is that we can't use a dash Oops, this should have been a five as well. I can't use a dash because it interprets it as a Minus sign. So what I'm gonna do is I'm gonna use an underscore so Instead of a dash we use underscore I'm gonna use underscore But the file name it doesn't matter because it's a file name I can just use dash or I could rename the file name to underscore when I gave this to my students I just renamed it for them to make their lives easier, but let's test it. I've saved it. I've refreshed it. Okay a Sharp is not working. What did I do wrong? I forgot to change it up here So you got to keep track of all these different things now in a minute I'm gonna make all this moot. It's not gonna matter, but it's important to know that this is a way to do it The other thing is like if you try to click a You have to wait till the previous note is done. There's a way around that but we're just gonna do it this way for now So That basically I can stop there. This is what I wanted to show in this video Okay, was how do I play a note when I click a button? So just to review that Okay, so I've made a function For each note. I've made an audio file an audio object for each Note, okay Again, the file name has to match exactly capitalizations probably pretty important these depending your operating system and then in the function I just play it and From the click I call the function So it's kind of like a one two three parts to play a sound file. It's really that simple Now if we were to continue this I would need to make See one two three four five six seven eight nine ten I would do I'd need to make ten more functions and I can do that That's what a lot of my students did when we tried this and there's nothing wrong with that But as I like to tell my students kind of lazy. I don't want to do it that way so what I want to do is I'm gonna go ahead and create a new function and I'm gonna go ahead and delete these two and I'm gonna call this function Yeah, we can call it play notes. I guess what my students liked and then I'm gonna use notes in here I'll explain that in a second the note dot play So this function Okay, so I need to change this up here So what I'm gonna do is when I call the function, I'm gonna tell it exactly which note I want to play Okay, so I'm gonna go up here. I'm gonna say play note and it's gonna be a Five and that a five comes from here A five notice. There's no quote a quote quotes or anything here. It's not a string So a underscore five. That's gonna be my a sharp so play note all right, so let's go ahead and Test it and I always tell my students before you do anything anytime you make a change test it make sure it works Let's refresh it and it should still play Okay, I'm still hearing a a sharp and so you can see now one function We'll take care of every note that I want to play So like, you know a piano has 88 keys So instead of making 88 functions, I can just make one function that does everything so the next step here is what I might consider doing is Just doing a lot of copying and pasting Well, I actually tell you what let's let's do a slightly different way because we're gonna have to Do something else. So again at this point You could stop and kind of try it out yourself and see if you can figure out How to get the rest of them working, but what I want to do now is I want to do a little bit with the CSS So I want the like I mean whole I only call is the non sharp notes I'm not sure what they're called. Sorry music people well non sharp notes to these are like the white piano keys and then the sharp notes are the Like the thinner black keys on a piano So what I'm gonna do is I want to make two classes, so let's say normal And I'm gonna make another one. I'll call it sharp sharp in my CSS again if you haven't done CSS before You know, I'll talk you through it here But you should probably come into this with a little bit of CSS knowledge So what we want is we want the background color to be white We want the text to be black for the white keys and Then for the black keys, it's gonna be reversed. So let's go ahead and try this and see how that goes Yeah, we'll go ahead and refresh that And you can see It still works, but nothing happens and this is what things I like to explain to myself like to show this to my students so soon so this will say well, it didn't change it's broken and It's not broken. It's just it's not finished yet So the computer doesn't know that this is normal and this is sharp So we have to tell it down here this button is a class normal and this button is class Sharp, so I'm gonna save it and refresh it Now we can see this is white with black text. This is black with white text Pretty cool. Okay Now the next thing I might say is like well, they don't really look like Piano keys. So let's go ahead and fix that. So let's go ahead and make The height of the normal key. Let's make that. I think I did 150 when I practiced this PX and We'll make the width 50 try that. So yeah, see what it looks like and Let's refresh it. Okay, that's again. No, it's still working, which is good. So let's do the same thing here But make it slightly Different slightly smaller because those keys tend to be smaller keyboard So let's say let's say a height of 100 and a width of 30 I'll just try and see what it looks like and Okay, that looks really good except it looks kind of strange because it's centered and So I think it's vertical. I should look this up vertical a line And top So I'm pretty sure for the sharp we have to do vertical a line and that will move it to the top. Let's fingers crossed. Yes Fantastic, okay So I'm pretty happy with this The only other thing I might do here in the style is change the body color. So the body Notice, it's not a dot because it's HTML tag. So I might say background Color, I don't want a good background color. Let's try brown That's kind of a wood color. Let's see what happens there Okay, I can live with that. No, it's not pretty but it works so We've got a little CSS. It's given us some design elements It looks a bit more like a piano key because we got the the big white keys and the smaller black keys They're still working. Yeah, notice how everything works together the HTML the CSS and the JavaScript So the next step of this would be to add all of the rest of the keys Okay, so B C C sharp D D sharp E F F sharp G and G sharp and to test them at this point probably what I would do is You know, the next one is B and then C. So they are You're gonna be normal. So that'd be B then C So I'll just do those parts for you. So B C So it's gonna be B five. It's gonna be C five Now if I run this and this I've watched my students do this Refresh it. Okay. The keys came up. I'm happy. That looks good So let's go click it and they'll tell me well, it's not working and of course because we skipped a step Okay, we didn't do we didn't actually create the sound objects for those notes So I'm gonna do B five C five B five and C five. Let's go ahead and save it refresh and test it Pretty pretty cool. Okay, so that's it. That's what I really wanted to show you here with a little bit of CSS Maybe these should be a little bit wider. I don't know but you can you can play with the sizes and stuff a little bit of CSS a little bit of HTML Okay, so use some CSS classes. We used the on click To determine, you know the the way that we're gonna interact with this but these buttons. Okay, we're calling a particular function We're telling it which note to play But first we have to create the sound objects which sound object is a to play And again, it's a logical name because we could have a for we can have a 3 you saw that in the in the files But what's nice about it is because our function is generalized Hey, we only need one function So each function kind of takes care of one job and because we are sending the values here We don't have to have function play a five function play a underscore five function play B five function play C, you know C five. We have one function that does everything for us. So Yeah, that's it. So just kind of Basically pretty quick review there. So we talked about events playing sounds Functions and how to use one function to take the place of many functions And I think that's it. We've done our job JavaScript. We played some sound files I'll leave it to you to create the rest of the piano and to kind of play around with that and see what you can get working and Yeah, I said I'll put a link to the sound files because that's really key fill out the sound files It's not gonna work, but I appreciate you watching Thanks for following along and as I like to say keep on coding. Take care