Build a Piano using Html, CSS and JavaScript

In this tutorial, we’ll learn how to build a piano from scratch using simple HTML, CSS, and JavaScript.

Firstly, we’ll structure our web app using HTML. We’ll use the <div> tag to make a structure for the piano.

We will create classes to show white and black keys, and classes will be further used in CSS for designing.

Audio files you can download from here.

In script.js arrays, the data structure is used for storing keyboard key values.

The event listener is used to listen when the user clicks (click) or presses keys(keydown).

playMusic() function will help to play audio files from the source.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <h1>------------ CodeSpeedy ----------</h1>
    <div class="container">
    <!-- white and black keys -->
    <div data-note="C" class="key white black" ><h3>C</h3></div>
    <div data-note="O" class="key white black" ><h3>O</h3></div>
    <!-- white keys -->
    <div data-note="D" class="key white" ><h3>D</h3></div>
     <!-- white and black keys -->
    <div data-note="E" class="key white black" ><h3>E</h3></div>
    <div data-note="S" class="key white black" ><h3>S</h3></div>
    <div data-note="P" class="key white black" ><h3>P</h3></div>
    <!-- white keys -->
    <div data-note="E1" class="key white" ><h3>E</h3></div>
     <!-- white and black keys -->
    <div data-note="E" class="key white black" ><h3>E</h3></div>
    <div data-note="D" class="key white black" ><h3>D</h3></div>
    <!-- white keys -->
    <div data-note="Y" class="key white" ><h3>Y</h3></div>

    <!-- Audio files -->
   <audio id="C" src="music/tune0.mp3"></audio>
   <audio id="O" src="music/tune (1).mp3"></audio>
   <audio id="D" src="music/tune (2).mp3"></audio>
   <audio id="E" src="music/tune (3).mp3"></audio>
   <audio id="S" src="music/tune (4).mp3"></audio>
   <audio id="P" src="music/tune (5).mp3"></audio>
   <audio id="E1" src="music/tune (4).mp3"></audio>
   <audio id="E" src="music/tune (3).mp3"></audio>
   <audio id="D" src="music/tune (2).mp3"></audio>
   <audio id="Y" src="music/tune (1).mp3"></audio>
   <script src="script.js"></script>


body {
    background: rgba(39, 34, 34, 0.986);
    color: cyan;
    text-align: center;
    margin-top: 350px;
    text-align: center;
    font-size: large;
  .container {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
.white {
    position: relative;
    background: rgb(241, 240, 240);
    width: 10%;
    height: 400px;
    margin: 0 2px;
  } {
    content: "";
    position: absolute;
    top: 0;
    background: rgb(17, 11, 11);
    right: -25%;
    width: 50%;
    height: 50%;
    z-index: 1;


const WHITE=['a','s','d','f','j','k','k'];
const BLACK=['r','t','y','u','i'];
let keys=document.querySelectorAll('.key');
let blackKeys=document.querySelectorAll('');
let whiteKeys=document.querySelectorAll('.key.white');

// eventlistener for mouse click
keys.forEach(key =>{
//eventlistener for key press using keydown
let key=e.key;
let whiteKeyIndex=WHITE.indexOf(key);
let blackKeyIndex=BLACK.indexOf(key);

if(whiteKeyIndex>-1) playMusic(whiteKeys[whiteKeyIndex]);
if(blackKeyIndex>-1) playMusic(blackKeys[blackKeyIndex])

// this function will play audio
function playMusic(key){
    const audio=document.getElementById(key.dataset.note);



If you like the content then please share it with your friends and comment us for the next topic.

Leave a Reply

Your email address will not be published. Required fields are marked *