Build a Piano using Html, CSS and JavaScript

Last Updated : 08 Dec, 2023

In this article, we will build a piano using HTML, CSS, and JavaScript. A piano is a musical instrument consisting of different keys that produce different sounds to create a sweet musical sound when used in a particular sequence. Similarly, a piano app also contains keys that produce different sounds once the user clicks on them and creates different sweet musical sounds with the feeling of playing a real piano.

Preview Image:

Preview Image of Piano

Project Structure:

pianoStr

NOTE: Please note that the sounds will not play on your local system until you haven’t downloaded the key sounds. As you can see in the above project structure, there is a KeySounds folder that contains all the key sounds and plays the respective sound for the pressed key.

Approach

Create a folder with project name that contains all the rquired HTML, CSS, JavaScript files and the sounds folder.
Structure the Piano and other heading on the web page using HTML tags like <ul>, <li>, <div> and headings.
Style the piano keys which makes it look like the real piano using CSS styling.
Now, use JavaScript to add the click event on every piano key and make it to play sound for the particular clicked key.

Example: The below example will explain you the use of HTML, CSS, and JavaScript to build a Piano:

Javascript

const keys = document.querySelectorAll('.piano-keys');
 
// Creating a object of Audio with a default sound
const pianoSound = new Audio('./KeySounds/key01.mp3');
 
keys.forEach((key) => {
    key.addEventListener('click', (e) => {
        const clickedKey = e.target.dataset.list;
        pianoSound.src = `./KeySounds/key${clickedKey}.mp3`;
        pianoSound.play();
    })
})

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Piano Playing</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
 
    <div class="container">
        <div class="intro-container">
            <h1>
                  How to build a Piano using Html, 
                  CSS and JavaScript
              </h1>
            <h3>
                  This is a 24 Key Piano, Click any 
                  piano key to play the sound.
              </h3>
        </div>
        <div class="piano-container">
            <ul class="piano-keys-list">
                <li class="piano-keys white-key"
                    data-list="01">
                  </li>
                <li class="piano-keys black-key"
                    data-list="02">
                  </li>
                <li class="piano-keys white-key"
                    data-list="03">
                  </li>
                <li class="piano-keys black-key"
                    data-list="04">
                  </li>
                <li class="piano-keys white-key"
                    data-list="05">
                  </li>
                <li class="piano-keys black-key"
                    data-list="06">
                  </li>
                <li class="piano-keys white-key"
                    data-list="07">
                  </li>
                <li class="piano-keys white-key"
                    data-list="08">
                  </li>
                <li class="piano-keys black-key"
                    data-list="09">
                  </li>
                <li class="piano-keys white-key"
                    data-list="10">
                  </li>
                <li class="piano-keys black-key"
                    data-list="11">
                  </li>
                <li class="piano-keys white-key"
                    data-list="12">
                  </li>
                <li class="piano-keys white-key"
                    data-list="13">
                  </li>
                <li class="piano-keys black-key"
                    data-list="14">
                  </li>
                <li class="piano-keys white-key"
                    data-list="15">
                  </li>
                <li class="piano-keys black-key"
                    data-list="16">
                  </li>
                <li class="piano-keys white-key"
                    data-list="17">
                  </li>
                <li class="piano-keys black-key"
                    data-list="18">
                  </li>
                <li class="piano-keys white-key"
                    data-list="19">
                  </li>
                <li class="piano-keys white-key"
                    data-list="20">
                  </li>
                <li class="piano-keys black-key"
                    data-list="21">
                  </li>
                <li class="piano-keys white-key"
                    data-list="22">
                  </li>
                <li class="piano-keys black-key"
                    data-list="23">
                  </li>
                <li class="piano-keys white-key"
                    data-list="24">
                  </li>
            </ul>
        </div>
    </div>
 
    <script src="script.js"></script>
</body>
 
</html>

CSS

@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
 
.container {
    background-image: 
          linear-gradient(90deg, #9331d4, rgb(239 5 92 / 70%));
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
 
.intro-container {
    color: #fff;
    text-align: center;
}
 
.piano-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.piano-keys-list {
    list-style: none;
    display: flex;
    justify-content: center;
}
 
.piano-keys {
    width: 5rem;
    cursor: pointer;
    position: relative;
    height: 20rem;
    border-radius: 10px;
    border: 1px solid #000;
}
 
.white-key {
    background-color: #fff;
}
 
.black-key {
    width: 2rem;
    height: 13rem;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #000;
    z-index: 2;
    margin: 0 -20px 0 -20px;
}
 
@media screen and (min-width: 821px) and (max-width: 1024px) {
    .piano-keys {
        width: 4rem;
        cursor: pointer;
        position: relative;
        height: 20rem;
        border-radius: 10px;
        border: 1px solid #000;
    }
 
    .black-key {
        width: 2rem;
        height: 13rem;
        border-radius: 5px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background-color: #000;
        z-index: 2;
        margin: 0 -20px 0 -20px;
    }
}
 
@media screen and (min-width: 768px) and (max-width: 820px) {
    .piano-keys {
        width: 3.5rem;
        cursor: pointer;
        position: relative;
        height: 16rem;
        border-radius: 10px;
        border: 1px solid #000;
    }
 
    .black-key {
        width: 1.8rem;
        height: 10rem;
        border-radius: 5px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background-color: #000;
        z-index: 2;
        margin: 0 -20px 0 -20px;
    }
}
 
@media screen and (max-width: 576px) {
    .piano-container {
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow: auto;
    }
 
    .piano-keys {
        width: 3.5rem;
        cursor: pointer;
        position: relative;
        height: 16rem;
        border-radius: 10px;
        border: 1px solid #000;
    }
 
    .black-key {
        width: 1.8rem;
        height: 10rem;
        border-radius: 5px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background-color: #000;
        z-index: 2;
        margin: 0 -20px 0 -20px;
    }
}