Build a Piano using Html, CSS and JavaScript

In this tutorial, we’ll learn how to build a piano from stretch 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 be used in CSS for designing.

Audio files you can download from here.

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

Event listener used to listen when user clicks (click) or presses keys(keydown).

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

index.html

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    <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>
   </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>
</html>

style.css

body {
    background: rgba(39, 34, 34, 0.986);
  }
  
  h1{
    color: cyan;
    text-align: center;
  }
  h3{
    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;
  }
  
  .white.black:after {
    content: "";
    position: absolute;
    top: 0;
    background: rgb(17, 11, 11);
    right: -25%;
    width: 50%;
    height: 50%;
    z-index: 1;
  }

script.js

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('.key.black');
let whiteKeys=document.querySelectorAll('.key.white');

// eventlistener for mouse click
keys.forEach(key =>{
key.addEventListener('click',()=>playMusic(key));
});
//eventlistener for key press using keydown
document.addEventListener('keydown',e=>{
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);
    audio.currentTime=0;
    audio.play();
}

Output:

piano

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 *