How to Optimize Your Website SEO Using JavaScript

Build a Piano using Html, CSS and JavaScript

Last Updated : 29 Jul, 2024

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:

pianoPrev — 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:

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-key="01"></li>
                <li class="piano-keys black-key" data-key="02"></li>
                <li class="piano-keys white-key" data-key="03"></li>
                <li class="piano-keys black-key" data-key="04"></li>
                <li class="piano-keys white-key" data-key="05"></li>
                <li class="piano-keys black-key" data-key="06"></li>
                <li class="piano-keys white-key" data-key="07"></li>
                <li class="piano-keys white-key" data-key="08"></li>
                <li class="piano-keys black-key" data-key="09"></li>
                <li class="piano-keys white-key" data-key="10"></li>
                <li class="piano-keys black-key" data-key="11"></li>
                <li class="piano-keys white-key" data-key="12"></li>
                <li class="piano-keys white-key" data-key="13"></li>
                <li class="piano-keys black-key" data-key="14"></li>
                <li class="piano-keys white-key" data-key="15"></li>
                <li class="piano-keys black-key" data-key="16"></li>
                <li class="piano-keys white-key" data-key="17"></li>
                <li class="piano-keys black-key" data-key="18"></li>
                <li class="piano-keys white-key" data-key="19"></li>
                <li class="piano-keys white-key" data-key="20"></li>
                <li class="piano-keys black-key" data-key="21"></li>
                <li class="piano-keys white-key" data-key="22"></li>
                <li class="piano-keys black-key" data-key="23"></li>
                <li class="piano-keys white-key" data-key="24"></li>
            </ul>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

CSS

@import url(
'https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap');

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: &quot;Poppins&quot;, 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;
    }
}

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) =&gt; {
    key.addEventListener('click', (e) =&gt; {
        const clickedKey = e.target.dataset.list;
        pianoSound.src = `./KeySounds/key${clickedKey}.mp3`;
        pianoSound.play();
    })
})

Output:

How to Optimize Your Website SEO Using JavaScript

A

abhish8rzd

Improve

Article Tags :

Similar Reads

Build a PIN Pad using HTML CSS & JavaScript

In this article, we will see how to implement a PIN pad for entering and checking whether the PIN is valid with the help of HTML, CSS, and JavaScript. Here, we have provided a numeric keypad/PIN pad through which the user can input the PIN. Once the user enters a PIN and hits "OK", the code validate

Build a Memory Card Game Using HTML CSS and JavaScript

A memory game is a type of game that can be used to test or check the memory of a human being. It is a very famous game. In this game, the player has some cards in front of him and all of them facing down initially. The player has to choose a pair of cards at one time and check whether the faces of

How To Build Notes App Using Html CSS JavaScript ?

In this article, we are going learn how to make a Notes App using HTML, CSS, and JavaScript. This project will help you to improve your practical knowledge in HTML, CSS, and JavaScript. In this notes app, we can save the notes as titles and descriptions in the local storage so the notes will stay th

Build A Drag & Drop Kanban Board using HTML CSS & JavaScript

A Kanban board is a project management tool designed to visualize work, limit work in progress, and maximize efficiency. With drag & drop functionality, users can easily move tasks between different stages of completion, providing a visual representation of the workflow. Approach:The below defin

Pin Ball Game using HTML CSS & JavaScript

Pinball is a classic arcade game that has been around since the 1930s. It involves the player using flippers to hit a ball around a table aiming to score points by hitting various targets and obstacles. PrerequisitesHTMLCSSJavaScriptApproachThe pinball game operates by moving a ball within a confine

Anagram Count using HTML CSS and JavaScript

In this article, we will create an Anagram Counting app using HTML, CSS, and JavaScript. Anagrams are the words of rearranged characters or letters in random order. These words contain the same letters. These rearranged words on sorting result in the same words with the same letters used.Â Consider

Create a Paint clone using HTML CSS & JavaScript

In this article, we will see how we can create a simple paint clone using HTML, CSS, and JavaScript. Users will be able to draw, change colors, adjust brush size, erase, and clear the canvas. Preview of final output: Let us have a look at how the final output will look like Prerequisites:HTMLCSSJavs

Build a Virtual Keyboard using HTML CSS & JavaScript

In this article, we will build a virtual keyboard using HTML, CSS, and JavaScript. A virtual keyboard is a user interface component that allows users to input text by clicking on the keys displayed on the screen. Our keyboard will support standard alphanumeric characters, special characters, and a C

Design a Tip Calculator using HTML, CSS and JavaScript

The tip is the money given as a gift for good service, to the person who serves you in a restaurant. In this project, a simple tip calculator is made which takes the billing amount, type of service, and the number of persons as input. As per the three inputs, it generates a tip for the serving perso

Percentage calculator using HTML CSS and JavaScript

The percentage calculator is useful for students, shopkeepers, and for solving basic mathematical problems related to percentages. In this article, we are going to learn, how to make a percentage calculator using HTML CSS, and JavaScript Formula used:What is X percent of Y is given by the formula: X