Let’s start by creating 7 simple divs and give each div a class.
div with class
Now let’s assign to each div a letter of the PC keyboard. In other words, let’s tell the browser that the 1st div represents the letter A of the computer for example, and the 2nd div represents letter F, and the 3rd div represents letter k….
Associating letters to divs
On the browser this will look like:
div outcome on the browser
So far nothing fancy, and the outcome on the browser looks ugly, so let’s style it to make it more attarctive.
1st things first. Let’s add a border, a width and a height to all our div containers.
placeholder-120" data-inserter-version="2">
So as a color of the border we’ll add blueviolet, and we’ll give the div containers a width and a height of 50px each.
- incontent_8 -->
Styling the div containers
On the browser side we have:
Now that we added some style to the div containers, we want them to be aligned one next to another instead of one below another.
Also, we want the letters to be centered in the middle of the div.
So let’s align the div containers using the CSS style property display and give it inline-block as a value.
And let’s center the letters using text-align property and give it center as value.
We will give the div containers a background-color of aquamaring.
More style added to the div containers
the div containers will look like this now:
div containers with a background color
Not bad so far, however the letters are not centered vertically, they are centered horizontally only. Also, we want to have some space between the div containers.
So to center the letters vertically we’ll use the CSS property line-height and give it 45px as value.
And to make some space between the containers we’ll use margin property and give it a value of 80px from the left side.
Final div style
This is the final div containers styled that you will get on the browser:
Keybords with style
3)- Step 3: Add the audio files to the HTML code
As the project is about making a piano keyboard, I downloaded the piano keys mp3 files (do, re, mi, fa, sol, la , si do) and put them in a file that I named “piano” on my desktop.
You can download the piano keys on any website on the internet or you can download any other music if you want to work with a different kind of music.
After downloading the files, it is time to add these audio files to the HTML code. To do that we’ll use the <audio></audio> tag. At the same time, we’ll add also classes to our auido tags.
So the code will be:
Audio tags added to the HTML code
On the browser side, nothing will happen, you will not see anything displayed on the browser.
For better practice, let’s add the audio tags inside the div containers. This way we won’t get confused and we will know that for example for the keyboard A it is the audio that has the class name “pianodo1” that will be played, and for the keyboard F it is the audio that has the class name “pianore” that will be played….
So the code becomes:
Code for better readibility
Again, nothing will change or be displayed on the browser, this is just for better readibility.
4)- Step 4: Now it’s time to add some JS
1st let’s select our audio elements.
Just below the <div></div> tags add a <script></script> tag where you will add the javascript code.
To select each one of the <audio></audio> tags we’re going to create 7 variables and use the document.querySelector() syntax.
So the code becomes:
All audios selected
Now we have to say to the browser, if I click on the A keyboard play “do” sound, and if I click on the F keyboard play “re” sound, and if I click on the K keyboard play “mi” sound and so on….
However, the computer and the browser will not understand the A keyboard and the F and the K and the G keyboards, that is because computers are binary and understand binary data only. So we have to find numbers that the computer can transform into binary data to give us the outcome that we want to see.
Luckily, our keyboard letters have numbers already associated to them.
For example the associated keyCode to letter a is 65, and the associated keyCode to letter F is 70, and the associated keyCode to letter K is 75…
So instead of telling the browser if I click on A keyboard, we will tell it if I click on 65.
The event that we’ll use for the buttons or keyboards is not “click”, but “keydown”. So the code is:
code for keydown events
Now if you click on your A,F,G,M,N,S,W keyboards on the computer, you will hear the piano sounds.
5)- One last thing
One last thing, if you want you can add a style to the div containers, so that when you click on a keyboard, let’s say F keyboard, this keyboad will scale and change its width and height.
To do that we have to select first the div that contains the F keyboard.
This div has a class name of “re”. So let’s select it.
“re” div selected
Now in the if statements we will add a code in the if statement that covers the F keyboard, which means that covers the number 70, and we’ll say if the F keyboard is pressed, not only play the souns “re” but also change the width of the div.
So we’ll add a line of code that adds a class named “scale” to the div that contains letter F.
Adding a class to the div
After adding the class to the div, it’s time to add some properties to this class via CSS.
So in CSS code we will say every element that has a class name of “scale” the width and the height of the element will be changed. And for this we’ll use transform property.
scale property
So now, if we click on the F keyboard of our computer, we’ll have the following results: