Name: JavaScriptでピアノを作る - チュートリアル (Build A Piano With JavaScript - Tutorial)
Uploaded: 2021-01-14T10:21:52.000Z
Duration: 19 min 12 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

現在進行形

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 intruder 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.

Have simplified my name's Kyle, and my job is to simplify the Web for you.

So if that sounds interesting, make sure you subscribe 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.

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 Get Hubbard depository 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 without out of the way, the next thing we need to do is create our index dot html file socials create that inducts dot html.

Make sure it's in the root of our directory just like that.

And now we could 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 will call a piano, and then we're going to have a style sheet as well as a Java script page.

So we're gonna 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 Stiles Nazi SS, which we're going to create in just a little bit.

And we're also going to need a script tag, which is just going to be script out Js.

We just want to make sure that we defer this so that it loads after all of the body of our HTML.

Now, let's just create those files were quick Wolf Stiles, Nazi SS, and we have script dot Js and that's all the different files that we're gonna need.

Now we can actually work on designing the h t m o for a piano, which is actually very straightforward.

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 what's first creative, which is just called piano?

So when we have a class of piano and we have our div and inside here is where we're gonna 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 over different keys are going to share.

And then next, we're gonna make this a white Keep.

As you can see, it's our white key, which is the 1st 1 Our next key is a black one.

So we're 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 stay.

So we're gonna put a data note on here, and this is going to be the name of the file.

As you can see, we have a flat B B flat and so on.

And this very first key for us is just going to be our Seiki.

So it's copy this down onto our Blackie and there's Blackie here is just going to be a D flat.

What we need to do is just copy this town.

So we have the exact structure of our piano over here.

This key, this key, this key, this key, this key, this key, this key, this key.

Then we have white full by another white key.

Now we have black fall by a white key fall by Blackie, full by weight and black.

And here we have e and we have e foot and we have our f which is going to go into our G flat RG are a a flat, sir.

And that's all of our different notes set up as well as all of our different classes for a 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 their inner HTML so we can do just create an audio tag and his audio tech is going to have an i d.

So in our case, this will be see for our Seiki here.

Then we just want to put this source this is going to be inside of our notes folder, and this is going to be our si dot mp three just like that, and it will close off our audio and we need one of these for each one of our keys.

So we're gonna cock it is down a bunch of times, for example, have d flat here than D E.

They two more times be foot and B, and we also need to make sure that copies here.

He fights if g flat g a flat a be foot and be sure that was riveting to watch me type.

And also, while I was typing that I noticed I had my E and E flat keys here flipped.

So it's make sure we fix that here and then we'll just change it down.

Here is well, doesn't really matter if these were 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 over each team will taken care of.

And if we open this with live server by right, clicking open with Live server is gonna show up on the right here.

And of course, it's going to be completely blank because all of these air empty lives and now 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'd like to do in almost every style street 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.

This just makes working with wits 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.

It's 143 f six b, 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 of you height.

This is going to make it so it's possible to send to our piano in the middle and then also to do this center and we're gonna use display flux, justify content center and a line items in the center.

If you're unfamiliar with how flux box and display flex works, I have an entire video on it.

You can check out linked in the cards and description below.

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 flux is going to do that for us.

The next thing we have is our key selector, as bulls are white class and our black class here, and I'm gonna start with the white class, actually, because it'll make it really easy to figure out what we need to do in a black class and then what we have to share between them So the first thing I want to do said here is I want to set our with and in our case, I'm just gonna set the with here to be 100 pixels, and then we also need to set the height.

I'm gonna set the height to be four times the width is now we have 400 pixels and to make something actually show up.

Let's just change the background color here.

As you can see, we have this blob where all over keys are.

And if we want to see the distinction between them, we can put a border of one pixel solid and less issues.

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.

字幕リスト動画再生

JavaScriptでピアノを作る - チュートリアル (Build A Piano With JavaScript - Tutorial)

essentially

description

determine

negative