Drum for beginners using HTML CSS javascript

I’ve got to know about this project on javascript30.com and I learned it from that website in this blog I will explain the whole project from the start to the end and will provide the resources that I have used to learn some of the topics in javascript,
now let’s start with the prerequisites for the project :

HTML :

  • kbd & audio tag
  • data-*

CSS :

  • transition
  • transform

Javascript :

  • window
  • Scope of variable
  • ES6 template literals
  • how to add class
  • how to create an array from queries
  • forEach loop
  • arrow function
  • how to use .addeventlistener
  • this keyword

    Even if you don’t know any of them I will explain some of the topics and I’ll give resources from where I learned this stuff.

HTML :

Now let’s start with the markup in the project what we want is when we click a key on the keyboard we should get the sound at that time so to do that we are gonna need to have something related to our keyboard’s key which can be taken as input so here’s one website from which you would be able to get the keycode of each key and the reason we are using the keycode is this is the way javascript listens to key clicks like in my case I have full-sized keyboard if I click ctrl key I’ll get o/p shown below :

So now you know why we use keycodes now let’s just identify the keycodes of the keys that we are gonna use to create our drum you should check the keycodes of your keys you just have to go on this website and start clicking your keys and you will get the keycodes because the keycode changes as the size of keyboard changes.

Now let us see where we gonna put this keycode, so for that, we are gonna use data-* which is used to create user define attribute and we will create data-key to give keycode to every div of our drum and we’ll give class named key to each div, and to be in the format of HTML we will use kbd tag for each key because it used when we take an input from the keyboard, create a span with class name sound and list out all the sound in each divs, here we have complete the keycode and the thing which we would able to see on the screen like kbd and span tag so now let’s get to the sound section because we want to have sound while we click a key.

the audio element is used to provide sound to download the sounds link is given at the end of this blog, to identify which audio will get played after a key is pressed we will give the data-key attribute to each audio element so when we click a key on the keyboard for that specific key one specific sound will be played according to its keycode and each keycode will be unique.

CSS :

In CSS we’ll mainly focus on transition and transform properties which will animat to each key so as given in the video below we want to add some animation while we click the key on the keyboard

To see the animation I have added one transition property to the class key by selecting all attributes and the transition time equals 1.07s which we will change at last it’s just for the better visuals, one new class named playing is been created with having transform: scale(1.5) which will increase the size of the key by 1.5x, as well as border color will change to orange and box-shadow will be given, to get this animation here I have used some lines of javascript to get this animation which I will explain further in the blog. code for the CSS and javascript will be given at the end of a blog, the image of the code is shown below.

To use this javascript given below you just have to put this code in a script tag above the closing body tag as given in the image below :

JAVASCRIPT :

let’s know why are we even using javascript in this project, as you can see we want the animation and sound effect at the exact time we click a key, the event when we click a key is called keydown event, we use Eventlisteners in javascript, now when an event of keydown occurs animation class will be added to that specific data-key key and according to data-key that particular audio will be played by javascript. now let’s get back to the coding part :

so as we spoke about the keydown event we will create one event listener for keydown event and create a function named playsound which will be called when a keydown event occurs here for the listening event we are using a window, which represents the browser’s window, it is a parent of all objects. with help of the window, we would be able to generate Eventlistner when we press a key on the window.

Now when we press a key, event of keydown will be generated and playsound function will be called which has one argument called e now what we want is to get the animation and audio at the same time, so here we are using queryselectors to get the data-key of both audio tag and key class, to play the audio play function is been used and one return statement is there which will return if there is no audio for that particular keycode currentTime of audio is set to zero so every time you click a key the audio will be played as many time as you press key without any delay, to add the animation add class function is used in which we are adding our playing class to the key, conclusion of this para is when we press a key one event gets generated which then calls function playsound in which we store the keycode of that particular event and according to that if it’s valid we play the audio and add the animation class if not then we return. this will create the output like this :

as we can see the animation is happening as well as the sound is been played but it’s not going to its previous state so to do that we gonna have to remove the transition how do we remove it let’s find out.

we will start with making an array of our class key which is given to each data-key and then we iterate to each element of an array to see if there is any transitionend event that has occurred when a transition ends that event is called transitioned, if it occurred it will call a function named removetransition because that’s what we want to do we want to remove the transition as soon as it ends code is shown below :

let’s print what is in data is in keys array :

and after pressing keys the playing class will be added O/P :

so now we know that to remove the transition we just have to remove the playing class from that div now let’s know how to do that we will write the removetranstition function to remove the playing class first we will check if there is any active transform(scale(1.1)) property if there is we will remove the playing class using remove class function else return.

here e attribute has all the transitions that is ended now all of them are types of transitionend and here we are looking for the transform property so if there is one transform property we will remove it by using this keyword now let’s see why we are using this keyword let’s see what this keyword gives us image shown below :

when we press a key ‘this’ keyword returns all of the transition that are performed and on which div with which class in it so that’s what want right it’s the simplest way to remove the ‘playing’ class from the div now after removing the playing class the end product will look like shown below :

so we have created the project and I tried to explain it in my way I hope you liked it link background and audio are given below :

https://drive.google.com/drive/folders/19yLo4u-e_MGzUJmi8FEOj5Qy3A8CKAW4?usp=sharing

reference for the topics from where I learned all this:

CSS: transition, transfrom
Javascript: Scope of variable, Function, Loops, DOM navigation, Eventlistener

<!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>Drum!</title>
    <style>
      * {
        padding: 0px;
        margin: 0px;
      }

      body {
        background: url(../img/yvette-de-wit-NYrVisodQ2M-unsplash.jpg) no-repeat
          center center/cover;
      }

      .keys {
        display: flex;
        height: 100vh;
        flex-direction: row;
        justify-content: center;
        justify-content: space-around;
        align-items: center;
      }

      .key {
        width: 80px;
        border: 4px solid black;
        margin: 1rem;
        font-size: 1.5rem;
        padding: 1rem 0.5rem;
        transition: all 0.07s;
        text-align: center;
        color: white;
        background: rgba(0, 0, 0, 0.4);
        text-shadow: 0 0 5px black;
      }

      .playing {
        transform: scale(1.1);
        border-color: #ffc600;
        box-shadow: 0 0 10px #ffc600;
      }
      kbd {
        font-size: 25px;
        display: block;
        text-align: center;
      }

      span {
        display: block;
        margin: 5px;
        font-size: 19px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="keys">
      <div data-key="65" class="key">
        <kbd>A</kbd>
        <span class="sound">clap</span>
      </div>
      <div data-key="83" class="key">
        <kbd>S</kbd>
        <span class="sound">hihat</span>
      </div>
      <div data-key="68" class="key">
        <kbd>D</kbd>
        <span class="sound">kick</span>
      </div>
      <div data-key="70" class="key">
        <kbd>F</kbd>
        <span class="sound">openhat</span>
      </div>
      <div data-key="71" class="key">
        <kbd>G</kbd>
        <span class="sound">boom</span>
      </div>
      <div data-key="72" class="key">
        <kbd>H</kbd>
        <span class="sound">ride</span>
      </div>
      <div data-key="74" class="key">
        <kbd>J</kbd>
        <span class="sound">snare</span>
      </div>
      <div data-key="75" class="key">
        <kbd>K</kbd>
        <span class="sound">tom</span>
      </div>
      <div data-key="76" class="key">
        <kbd>L</kbd>
        <span class="sound">tink</span>
      </div>
    </div>

    <audio data-key="65" src="../music/clap.wav"></audio>
    <audio data-key="83" src="../music/hihat.wav"></audio>
    <audio data-key="68" src="../music/kick.wav"></audio>
    <audio data-key="70" src="../music/openhat.wav"></audio>
    <audio data-key="71" src="../music/boom.wav"></audio>
    <audio data-key="72" src="../music/ride.wav"></audio>
    <audio data-key="74" src="../music/snare.wav"></audio>
    <audio data-key="75" src="../music/tom.wav"></audio>
    <audio data-key="76" src="../music/tink.wav"></audio>
    <script>
      window.addEventListener("keydown", playsound);
      function playsound(e) {
        const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
        const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
        audio.play();
        if (!audio) return;
        audio.currentTime = 0;
        key.classList.add("playing");
      }

      const keys = Array.from(document.querySelectorAll(".key"));
      keys.forEach((key) =>
        key.addEventListener("transitionend", removeTransition)
      );

      function removeTransition(e) {
        console.log(this);
        if (e.propertyName != "transform") return;
        console.log(e.propertyName);
        this.classList.remove("playing");
      }
    </script>
  </body>
</html>

Leave a Comment

Your email address will not be published.

Scroll to Top