Build a Piano using Html, CSS and 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:

Build a Piano using Html, CSS and JavaScript

A

abhish8rzd

Improve

Article Tags :

Similar Reads

How To Build Notes App Using Html CSS JavaScript ?

In this article, we are going to learn how to make a Notes App using HTML, CSS, and JavaScript. This project will help you 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 t

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. Final OutputApproach:The

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

Create a Crowdfunding Platform using HTML CSS & JavaScript

In this article, we will see how we can implement a Crowdfunding Platform with the help of HTML, CSS, and JavaScript. The crowdfunding platform project is a basic front-end prototype developed using HTML, CSS, and JavaScript. Preview of final output: Let us have a loo at how the final project will l

Create a Simon Game using HTML CSS & JavaScript

In this article, we will see how to create a Simon Game using HTML, CSS, and JavaScript. In a Simon game, if the player succeeds, the series becomes progressively longer and more complex. Once the user is unable to repeat the designated order of the series at any point, the game is over.Prerequisite

Build A Weather App in HTML CSS & JavaScript

A weather app contains a user input field for the user, which takes the input of the city name. Once the user enters the city name and clicks on the button, then the API Request is been sent to the OpenWeatherMap and the response is been retrieved in the application which consists of weather, wind s

Whack-a-Mole Game using HTML CSS and JavaScript

Whack-A-Mole is a classic arcade-style game that combines speed and precision. The game is set in a grid of holes, and the objective is to "whack" or hit the moles that randomly pop up from these holes. In this article, we are going to create Whack-a-Mole using HTML, CSS and JavaScript.Preview Image

Build a Survey Form using HTML and CSS

Creating a survey form is a great way to understand the basics of web development. In this tutorial, we will build a Survey Form that allows users to easily submit their responses. The form will include different input types such as text fields, checkboxes, and radio buttons, all designed using HTML

Build a Text to Speech Converter using HTML, CSS & Javascript

A text-to-speech converter is an application that is used to convert the text content entered by the user into speech with a click of a button. A text-to-speech converter should have a text area at the top so that, the user can enter a long text to be converted into speech followed by a button that

Building a Dice Game using JavaScript

We will be building a Dice Game Project using HTML, CSS, and JavaScript. The Dice Game is based on a two-player. Both players roll the dice and the player who gets the highest phase value will win the game. Images of Dice Phases: The list of dice phases images are given below. Save all the images in