Build A Piano With JavaScript - Tutorial

hello everyone today is going to be an exciting video because we're gonna be building a piano entirely with JavaScript and you can check it out right up there that's me playing the intro to Yankee Doodle which I somehow remember from fifth grade I don't know why but either way let's get into this video and actually make this piano [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so that sounds interesting make sure you're subscribed to the channel for more videos just like this one and now as you can see on the right hand side here we have the finished product of the piano we can click any of these keys and we can also play these keys with the keyboard if we want which is in my opinion a lot easier it's more like playing the real piano and now to get started creating this the first thing that we need to do is we need to download all of the notes for the piano I have all of these in the github repository linked into the description of this video but it's also pretty easy to find these types of files online and download them for free or even just record your own so with that out of the way the next thing we need to do is create our index.html file so let's just create that index.html make sure it's in the root of our directory just like that and now we can just type exclamation point and hit enter and that's going to create all of the boilerplate code for us when it comes to setting up this HTML file the next thing we need to do is just give it a title we'll call it piano and then we're going to have a style sheet as well as a JavaScript page so we're going to need to come in here and we're gonna want to add in a link so we'll just say link and this is going to be for styles dot CSS which we're going to create in just a little bit and we're also going to need a script tag which is going to be script j s we just want to make sure that we defer this so that it load after all of the body of our HTML now let's just create those files real quick well styles.css and we have script J s and that's all the different files that we're going to need now we can actually work on designing the HTML for our piano which is actually very straightforward all we have are these different keys we have white and black and they're going to be inside of a piano container which is going to Center it on the screen so let's first create a div which is just called piano so now we have a class of piano and we have our div and inside of here is we're going to put all of our different keys so for example our first key instead of here we're just going to give it a class which is key which all of our different keys are going to share and then next we're going to make this a white key as you can see it's our white key which is the first one our next key is a black one so we're just gonna copy this and we're going to put black in here and one other thing that I need to note is that we want to make sure we say which note each of these keys are so we're gonna put a data note on here and this is going to be the name of the file essentially that this is linking to as you can see we have a a flat B B flat and so on and this very first key for us is just going to be our C key and we want this to be on all of our discs so let's copy this down onto our black key and this black key here is just going to be a D flat what we need to do is just copy this down so we have the exact structure of our piano over here so I'm just going to copy this down that's this key this key this key this key this key this key this key this key this key and finally this key so let's come in here we have white and then black and we have white followed by another white key and then we have black called by a white key followed by a black key followed by a white and black and then finally our one last white key and as for our notes we have D D flat and here we have E and we have E flat and then we have our F which is going to go into our G flat our G our a whoops a flat sorry and then a and then here B flat and finally B and that's all of our different notes set up as well as all of our different classes for our different keys but in order to play these sounds we need to have audio tags for each one of our note files here because right now we can't access these files unless they're innerhtml so we can do is just create an audio tag and this audio tag is going to have an ID which is going to match this data note so in our case this will be C for our C key here then we just want to put this source this is going to be inside of our nodes folder and this is going to be our C mp3 just like that and then we'll close off our audio we need one of these for each one of our keys so we're just gonna copy this down a bunch of times for example have D flat here then D e gonna have a flat oops f you want G flat G a flat a two more times B flat and B and we also need to make sure that copy is here so we have D flat D E flat F G flat G a flat a B flat and B I'm sure that was riveting to watch my type and also while I was typing that I noticed I have my e and E flat keys here flipped so let's make sure we fix that here and then we'll just change it down here as well doesn't really matter if these are in order but it's nice to have them in the same order as what's up here now with that done we have all of our HTML taken care of as I said it's really simple HTML it's just going to be this right here and if we open this with live server by right-clicking and open with live server it's gonna show up on the right here and of course it's going to be completely blank because all these are empty divs and that we need to actually work on our styles to make this work and if you don't have this open with live server pop up it's actually an extension for Visual Studio code that you can download and then you can use just like I am it allows it so that every time we make a change it's going to refresh over here automatically so the first thing I like to do in almost every style sheet is make sure to select every type of element so in our case we have our before our after and our wild card selector and I just want to change the box sizing here oops to be border box this just makes working with widths and Heights so much easier the next thing that I want to do is actually set up the body so we can select our body here and we want to set that cool blue background color that you saw I've just copied this over it's 1 4 3 f 6b and if we say that you can see we get that blue black on color which looks really nice we also want to remove any margins on our body we want to set the minimum height here to be 100 view height this is going to make it so it's possible to Center RPN in the middle and then also to do the center and we're going to use display flex justify content center and align items in the center and if you're unfamiliar with how flexbox and display flex works I have an entire video on it you can check out linked in the cards and description below now let's actually work on the piano and the thing that we need to do in here is make sure we change to display flex this way all of our keys will line up next to each other instead of on top of each other up and down we want them to be side by side so display flex is going to do that for us now the next thing we have is our key selector as well as our white class and our black class here and I'm going to start with the white class actually because it'll make it really easy to figure out what we need to do in the black class and then what we have to share between them so the first thing I want to do inside of here is I want to set our width and in our case I'm just gonna set the width here to be 100 pixels and then we also need to set the height and I'm just going to set the height to be 4 times the width so now we have 400 pixels and to make something to actually show up let's just change the background color here to white as you can see we have this blob where all of our keys are and if we want to see the distinction between them we can put a border of 1 pixel solid and let's just use this 333 color it's kind of a dark grey and now you can see all of our white keys right next to each other which is perfect the next thing we need to work on is adding in the black keys and it's gonna be very similar I'm just gonna actually copy this code and I'm gonna change the background color here to be black and of course we want to change this height I'm just going to change it to 60 pixels and 240 pixels so it's about half the size of the white key and we don't need the border on these because they're already black and if we say that you can see our keys are showing up but they're spaced out from each other we want the black keys to show up on top of the white keys and a really easy way to do that is to make the margin left and the margin right b-negative so we can change the margin right here and the margin left and we want to be the same amount negative so we can just take this width here and divide it by two so we'll say negative 30 pixels on the left and negative 30 pixels on the right and as you can see that's made us that the black keys are showing up overtop of our weight keys which is what we want and to make it so that they show up over all the white keys we can just change the z-index here to be two for example and now it's going to show up over top of our Black Keys obviously this piano does not quite look like this piano though so it looks like we're missing one of our white keys if we go into our HTML here we can see that we used accidentally capitalized this white here so if we're not we save that you can see that extra white key is shown up and we have all the keys inside of our piano exactly where they need to be with our Styles right here but you'll notice there's quite a bit of shared and duplicated code between these for example our width is always 1/4 of our height and our margin left and margin right are going to be half of our width so what we can do inside of this key is we can actually set the height to be based on a variable which is the width so we can see our height is going to be a calculation and we're going to get a variable so we just have to set a bar - - and then this variable is called width we just want to multiply that by 4 because our height is 4 times our width and then our width is just going to be set to that width the variable and this is using CSS variables I have an entire video on these so if you want to check that out it's gonna be in the cards in the description down below now what we can do is we can change this with to our variable of width we can get rid of the height we can also do the same thing with the black keys get rid of the height and if we save you see that it still works just as it did before everything is in the right positions also we can change this margin left and margin right to be a calculation which takes into account our width and we just want to divide it by negative 2 essentially we want half of our width and we want it to be negative so let's copy that down here save and you see it still looks exactly the same but we were able to clean up a lot of our code by putting all that shared logic in the key class and making sure we can change our width at any time for example I could change this to be 80 and now all the keys resize and everything looks perfectly fine other than the fact this piano looks ridiculous so going back here to 100 and we're back to a much better looking piano and that's all of the styling for the piano and we finally get to move on to the fun part which is the JavaScript where we can actually make the piano work now the first thing that we need to do is to get all of the keys as elements so we can just create a variable here called keys we just want to do document that query selector all we want to get everything which has a class of key so we can just say dot key this is going to be all of our key elements then we can loop over those so we can say Keys dot for each and what we want to do is for each key we want to run this function and inside of here we're just going to add an event listener we want to do this whenever we click on the key and all we want to do is run a function which is going to call a function called play note with our key and we're going to create this play note function essentially it's going to play the audio for our note and it's passing in the key that we want to play for example our element here so let's create that function which is going to be called a play note it's going to take in a key like I mentioned earlier now the first thing we want to do is we want to get the audio element from our HTML here based on the data note property for the key that we pressed so in order to do that we can say our note audio is going to be equal to document dot get element by ID we're going to pass it the ID from that data set so we know dataset note is going to be equal to our ID it essentially corresponds to this value right here either C D flat which all correspond to an ID down here so now we actually have our audio element inside this note audio variable and we can just call dot play on this and now what we can do is we can come over to our piano and when we click on a key it's actually going to play that sound but we do have a small bug if I click this really really fast for example to play a note over and over again it's only going to play it as soon as the audio file ends it won't stop the audio file and restart it from the beginning unlike a normal piano would so in order to get around that we can do is we can take our note audio and we want to do is change the current time to be 0 essentially it's restarting the file at the beginning and then replaying it so if we save that and now I click a key a bunch of times it's going to play that sound Oh and over and over again right from the beginning like a normal piano would one thing you probably noticed though is when I click on a key it doesn't actually show me any form of animation I can't tell I'm clicking on it there's no press state so what we want to do is add a class to our key when we click on it so limit the audio starts playing we're going to say key class list add we're going to add an active class to our key and then inside of our style sheet we can just say for our white keys for example we want to change our background color to be just a really off-white so we'll say CCC and then inside of our Black Keys whoops black keys we can do the same thing but we'll just do an off black color in this case 333 and now if we save that we click a key you can see that it has changed color both for black and for white but that color is not going away we need to remove the active class when the note is done playing so we can do is we can set up an event listener we just say add event listener and we want to say ended this is going to fire as soon as the audio clip finishes playing we just run a run inside of here key dot class lists that remove we want to remove active now when we click on a key it's going to be active and as soon as it ends it's going to go away and no longer be active so it's going to remove the color the last thing we have left to do though is to actually make it so we can play the piano using our keyboard and what we need to do is determine which keys we want to use in order to play each note so what I like to do is I just want to use a row of keys on the very bottom because they are arranged kind of like a piano they have keys above them that are about 50% of the way between each key which kind of simulates the black notes so in order to save you the boredom of watching me type out all these different letters you can see we have a variable with all of our white keys and this is going to be essentially the bottom row of your keyboard every single letter in it and then the Black Keys is going to be the row above that which correspond with where these Black Keys would align on that row of your keyboard and now all we need to do is set up an event listener that's going to listen to when we press these keys and actually allow us to play the note for the key that we pressed so we can do is we can come into here we can say document whoops document that add eventlistener and we want to do this on key down so as soon as we press the key down it's going to fire this event and it's going to have an event variable inside of it and one thing that's really important to make this function work is that our white keys variable and black keys variable are in the exact order of our keys that we're going to be getting so our white keys the Z is our left key and our n is our right key and the black keys s is the left one and J is the right one they're in the exact correct order which is really important so now inside of here what we want to do is we want to get the key we pressed that's actually really easy there's an e key we can just get the key that we pressed with this VD this is going to correspond with the actual letter of the key that we pressed then what we can do is we can get the index from our array so we'll just say white key index is going to be equal to white keys that index of how we want to get that key and the reason it's important these are arrays are in the correct order is because we're going to use this index to get the correct white key based on that ordering but the next thing we need to do is we want to check to see if it's in the black keys obviously and this is going to be our black key index and now what we want to do is if we have a white key index we want to run some code so if this is greater than negative one because negative one is returned when it can't find anything so essentially if it found something what we want to do is we want to play our note but we need to determine which key this is going to be so what we need to do is actually give all of our white keys so we'll say white keys is going to be equal to key dot white and we want to get all of our black keys which is going to be the same thing but it's going to be the class black instead of a class white so we can just come in here and put black like that then what we can do is we can say we want to get all of our white keys and we want to get it for the index of that white key index essentially what we're doing is we're finding the index of the key that we pressed and then corresponding that to the index in this array which we already know they're in the exact same order so this third key here is going to be our third white key that's how this index trick works you can do the same exact thing with our black key index we just need to make sure that we iterate over two black keys and that we do the black key index here now if I go ahead and I press the Z key when I have this highlighted you should see this left note be played and you can see that worked and M for example is over here J is going to be right here and so on all of the keys now work and I can actually play the piano if I wanted to there is only one last bug with this code and that's if I hold down a key to play it it's going to sound really bad just listen you can hear it's trying to repeat the sound over and over again and that's because generally when you have a key held down it'll call the key down method over and over again after a short delay in order to check for that we could just say if e dot repeat essentially what this means is that it's one of those repeat calls from holding the button down if that's the case all we need to do is just call return we just don't want to do anything and now if I come over here and I hold down the key you notice it's only gonna play that note once and it's not going to repeat it over and over and over again which is incredibly annoying and that's all there is to making this awesome JavaScript piano if you like this video make sure to check out my other project-based videos linked over here and subscribe to my channel for more videos just like this one thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 107,889

Keywords: webdevsimplified, javascript es6, javascript, js, javascript piano, javascript music, javascript music player, javascript tutorial, js piano, js piano tutorial, js tutorial, js music player, js music, js music tutorial, javascript es6 tutorial, javascript project, javascript project tutorial, javascript fun project, javascript tutorial for beginners, javascript project for beginners, js project, js project tutorial, js for beginners, js tutorial for beginners, web development

Id: vjco5yKZpU8

Length: 19min 11sec (1151 seconds)

Published: Sat Dec 14 2019