Blog

Basic javascript project, create your own piano (any other instrument) using javascript.

Creating Javascript project helps to build up your skills and getting yourself more ready for a job.

Here is a javascript code for a piano but it can be manipulated to create your desired musical instrument or a basic music player or maybe anything.

First let us create a html file

<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Lets piano</title>
  <link rel="stylesheet" href="styles.css">

</head>

<body>
  <h1 id="title">Piano</h1>
  <div class="set">
    <button class="piano" id="pia">a</button>
    <button class="piano">s</button>
    <button class="piano" id="pia">d</button>
    <button class="piano">f</button>
    <button class="piano" id="pia">g</button>
    <button class="piano">h</button>
    <button class="piano" id="pia">j</button>
    <button class="piano">k</button>
    <button class="piano" id="pia">l</button>
  </div>


<script src="index.js" charset="utf-8"></script>
<script type="text/javascript" src="content.js"></script>
 
</body>
</html>

Some styling to it


style.css

body {
  text-align: center;
  background-color: orange;
}

h1 {
  font-size: 5rem;
  
  
  

}.piano {
  font-family: sans-serif;
  padding: 300px 60px;
  color: black;
  background-color: white;
  cursor: pointer;
  margin: 0px;

}

#pia{
  font-family: sans-serif;
  cursor: pointer;
  padding: 300px 60px;
  color: white;
  background-color: black;
  margin: 0px;
}

Now the javascript


index.js

var numberOfDrumButtons = document.querySelectorAll(".piano").length;

for (var i = 0; i < numberOfDrumButtons; i++) {

  document.querySelectorAll(".piano")[i].addEventListener("click", function() {

    var buttonInnerHTML = this.innerHTML;

    makeSound(buttonInnerHTML);

    

  });

}

document.addEventListener("keypress", function(event) {

  makeSound(event.key);

  
});


function makeSound(key) {

  switch (key) {
    case "a":
      var tom1 = new Audio("sounds/tom1.mp3");
      tom1.play();
      break;

    case "s":
      var tom2 = new Audio("sounds/tom2.mp3");
      tom2.play();
      break;

    case "d":
      var tom3 = new Audio('sounds/tom3.mp3');
      tom3.play();
      break;

    case "f":
      var tom4 = new Audio('sounds/tom4.mp3');
      tom4.play();
      break;

    case "g":
      var snare = new Audio('sounds/tom5.mp3');
      snare.play();
      break;

    case "h":
      var crash = new Audio('sounds/tom6.mp3');
      crash.play();
      break;

    case "j":
      var kick = new Audio('sounds/tom7.mp3');
      kick.play();
      break;
      case "k":
      var kick = new Audio('sounds/tom8.mp3');
      kick.play();
      break;
      case "l":
      var kick = new Audio('sounds/tom9.mp3');
      kick.play();
      break;


    default: console.log(key);

  }
}



Note: Sound of each key must be in the folder. you can also make your own extension. Learn how

Chrome extension