How to make piano sounds with computer keyboard?

1)- Step 1: Create 7 div containers using HTML

Let’s start by creating 7 simple divs and give each div a 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….

On the browser this will look like:

So far nothing fancy, and the outcome on the browser looks ugly, so let’s style it to make it more attarctive.

2)- Step 2: Add some CSS to the div containers

1st things first. Let’s add a border, a width and a height to all our div containers.

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.

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.

the div containers will look like this now:

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.

This is the final div containers styled that you will get on the browser:

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:

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:

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:

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.

These numbers are called keyCodes. You can visit the following website to see all keyCodes associated to the computer keyBoard letters: https://asawicki.info/nosense/doc/devices/keyboard/key_codes.html

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:

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.

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.

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.

So now, if we click on the F keyboard of our computer, we’ll have the following results:

Below you’ll find the entire code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
     initial-scale=1.0">
    <title>List Style Type</title>

    <style>
        div{
            border:2px solid blueviolet;
            width:50px;
            height:50px;
            display:inline-block;
            text-align:center;
            background-color:aquamarine;
            line-height:45px;
            margin:0px 0px 0px 80px;
        }

        .scale{
            transform:scale(2,2);
        }
    </style>

    </head>

    <body>
       <div class="do-1">A <audio class="pianodo1"><source src="piano/do.wav"></audio></div>
       <div class="re">F <audio class="pianore"><source src="piano/re.wav"></audio></div>
       <div class="mi">K <audio class="pianomi"><source src="piano/mi.wav"></audio></div>
       <div class="fa">G <audio class="pianofa"><source src="piano/fa.wav"></audio></div>
       <div class="sol">M <audio class="pianosol"><source src="piano/sol.wav"></audio></div>
       <div class="la">N <audio class="pianola"><source src="piano/la.wav"></audio></div>
       <div class="si">S <audio class="pianosi"><source src="piano/si.wav"></audio></div>
       <div class="do-2">W <audio class="pianodo2"><source src="piano/do.wav"></audio></div>
    
    <script>
        var pianodo1= document.querySelector(".pianodo1");
        var pianore= document.querySelector(".pianore");
        var pianomi= document.querySelector(".pianomi");
        var pianofa= document.querySelector(".pianofa");
        var pianosol= document.querySelector(".pianosol");
        var pianola= document.querySelector(".pianola");
        var pianosi= document.querySelector(".pianosi");
        var pianodo2= document.querySelector(".pianodo2");
        var re=document.querySelector(".re");

        document.addEventListener("keydown",(event)=>{
            if(event.keyCode==65){
                pianodo1.play();
            }else if(event.keyCode==70){
                pianore.play();
                re.classList.add("scale");
            }else if(event.keyCode==75){
                pianomi.play();
                dive.classList.add("scale");
            }else if(event.keyCode==71){
                pianofa.play();
                dive.classList.add("scale");
            }else if(event.keyCode==77){
                pianosol.play();
                dive.classList.add("scale");
            }else if(event.keyCode==78){
                pianola.play();
                dive.classList.add("scale");
            }else if(event.keyCode==83){
                pianosi.play();
                dive.classList.add("scale");
            }else if(event.keyCode==87){
                pianodo2.play();
                dive.classList.add("scale");
            }
        })

    </script>
    </body>
</html>