Create a music pad using HTML, CSS, and JavaScript

Music Pad

Here’s an example of a simple music pad with eight pads using HTML, CSS, and JavaScript, you will get pad sounds when pressing the keynoted on the music pad and you will also get some color changes on the music pad button when you press any key.

Creating a Music Pad or Drum Pad using HTML, CSS, and JavaScript following few steps:

Create the HTML structure for the music pad.

<div class="container">
    <div class="box">
         <button id="mpad">W</button>
          <button id="mpad1">E</button>
          <button id="mpad2">A</button>
          <button id="mpad3">S</button>
          <button id="mpad4">D</button>
          <button id="mpad5">F</button>
          <button id="mpad6">Z</button>
          <button id="mpad7">X</button>

          <audio id="sound1" src="https://weblink8.com/wp-content/uploads/2023/05/tom1.wav"></audio>
          <audio id="sound2" src="https://weblink8.com/wp-content/uploads/2023/05/tom2.wav"></audio>
          <audio id="sound3" src="https://weblink8.com/wp-content/uploads/2023/05/tom3.wav"></audio>
          <audio id="sound4" src="https://weblink8.com/wp-content/uploads/2023/05/tumba_low.wav"></audio>
          <audio id="sound5" src="https://weblink8.com/wp-content/uploads/2023/05/tumba_hi.wav"></audio>
          <audio id="sound6" src="https://weblink8.com/wp-content/uploads/2023/05/soundkick.wav"></audio>
          <audio id="sound7" src="https://weblink8.com/wp-content/uploads/2023/05/snare.wav"></audio>
          <audio id="sound8" src="https://weblink8.com/wp-content/uploads/2023/05/schash.wav"></audio>
        </div>
    </div>

Style the music pad using CSS.

*{
    margin: auto;
    box-sizing: border-box;
}
      
.container{
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: gray;
}
      
.box{
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: black;
}
.box button{
    width: 100%;
    height: 200px;
    padding: 10px;
    text-align: center;
    color: black;
    background-color: white;
    font-size: 50px;
}

Write the JavaScript code to play the audio files when pressing the keynoted on the pad.

function changebgc(){
      document.getElementById("mpad").style.backgroundColor = "white";
      document.getElementById("mpad1").style.backgroundColor = "white";
      document.getElementById("mpad2").style.backgroundColor = "white";
      document.getElementById("mpad3").style.backgroundColor = "white";
      document.getElementById("mpad4").style.backgroundColor = "white";
      document.getElementById("mpad5").style.backgroundColor = "white";
      document.getElementById("mpad6").style.backgroundColor = "white";
      document.getElementById("mpad7").style.backgroundColor = "white";
      
    }
    
    
    function sound(event){
    var key = event;
    key = event.key;
    
    if((key == 'W') || (key == 'w')){
    var audio= document.getElementById("sound1");
    document.getElementById("mpad").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
    }

    if((key == 'E') || (key == 'e')){
      var audio= document.getElementById("sound2");
      document.getElementById("mpad1").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'A') || (key == 'a')){
      var audio= document.getElementById("sound3");
      document.getElementById("mpad2").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'S') || (key == 's')){
      var audio= document.getElementById("sound4");
      document.getElementById("mpad3").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'D') || (key == 'd')){
      var audio= document.getElementById("sound5");
      document.getElementById("mpad4").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'F') || (key == 'f')){
      var audio= document.getElementById("sound6");
      document.getElementById("mpad5").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'Z') || (key == 'z')){
      var audio= document.getElementById("sound7");
      document.getElementById("mpad6").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'X') || (key == 'x')){
      var audio= document.getElementById("sound8");
      document.getElementById("mpad7").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }
    }

Create an HTML File (music-pad.html) and use this code.


<!DOCTYPE html>
<html>
<head>
  <title>Music Pad</title>

  <style>
*{
    margin: auto;
    box-sizing: border-box;
}
      
.container{
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: gray;
}
      
.box{
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: black;
}
.box button{
    width: 100%;
    height: 200px;
    padding: 10px;
    text-align: center;
    color: black;
    background-color: white;
    font-size: 50px;
}
  </style>

</head>
<body onkeypress="sound(event)" onkeyup="changebgc()">
    <div class="container">
    <div class="box">
         <button id="mpad">W</button>
          <button id="mpad1">E</button>
          <button id="mpad2">A</button>
          <button id="mpad3">S</button>
          <button id="mpad4">D</button>
          <button id="mpad5">F</button>
          <button id="mpad6">Z</button>
          <button id="mpad7">X</button>

          <audio id="sound1" src="https://weblink8.com/wp-content/uploads/2023/05/tom1.wav"></audio>
          <audio id="sound2" src="https://weblink8.com/wp-content/uploads/2023/05/tom2.wav"></audio>
          <audio id="sound3" src="https://weblink8.com/wp-content/uploads/2023/05/tom3.wav"></audio>
          <audio id="sound4" src="https://weblink8.com/wp-content/uploads/2023/05/tumba_low.wav"></audio>
          <audio id="sound5" src="https://weblink8.com/wp-content/uploads/2023/05/tumba_hi.wav"></audio>
          <audio id="sound6" src="https://weblink8.com/wp-content/uploads/2023/05/soundkick.wav"></audio>
          <audio id="sound7" src="https://weblink8.com/wp-content/uploads/2023/05/snare.wav"></audio>
          <audio id="sound8" src="https://weblink8.com/wp-content/uploads/2023/05/schash.wav"></audio>
        </div>
    </div>
  
 
<script type="text/javascript">
    function changebgc(){
      document.getElementById("mpad").style.backgroundColor = "white";
      document.getElementById("mpad1").style.backgroundColor = "white";
      document.getElementById("mpad2").style.backgroundColor = "white";
      document.getElementById("mpad3").style.backgroundColor = "white";
      document.getElementById("mpad4").style.backgroundColor = "white";
      document.getElementById("mpad5").style.backgroundColor = "white";
      document.getElementById("mpad6").style.backgroundColor = "white";
      document.getElementById("mpad7").style.backgroundColor = "white";
      
    }
    
    
    function sound(event){
    var key = event;
    key = event.key;
    
    if((key == 'W') || (key == 'w')){
    var audio= document.getElementById("sound1");
    document.getElementById("mpad").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
    }

    if((key == 'E') || (key == 'e')){
      var audio= document.getElementById("sound2");
      document.getElementById("mpad1").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'A') || (key == 'a')){
      var audio= document.getElementById("sound3");
      document.getElementById("mpad2").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'S') || (key == 's')){
      var audio= document.getElementById("sound4");
      document.getElementById("mpad3").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'D') || (key == 'd')){
      var audio= document.getElementById("sound5");
      document.getElementById("mpad4").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'F') || (key == 'f')){
      var audio= document.getElementById("sound6");
      document.getElementById("mpad5").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'Z') || (key == 'z')){
      var audio= document.getElementById("sound7");
      document.getElementById("mpad6").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }

      if((key == 'X') || (key == 'x')){
      var audio= document.getElementById("sound8");
      document.getElementById("mpad7").style.backgroundColor = "limegreen";
      audio.currentTime=0;
      audio.play();
      }
    }

  </script>
</body>
</html>

Note:- this is just a basic example of music pad or drum pad and there are many ways to customize and expand on a music pad or drum pad created with HTML, CSS, and JavaScript.

Leave a Reply

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