Drum-Kit: Entertainment App using DOM and Javascript

I created a Drum-Kit with 7 different sounds that play on mouse-click or when the user presses the specified keywords on the keyboard.

Drum-Kit

Read ahead to know the development process of this project else click the link below to see the app running live!

https://drumkit-vercelhack.vercel.app/

The Idea💡!

Well, it was pretty simple and I wanted to experiment with my Javascript and DOM skills and in the process, I understood the power of For-Loops which I will realize in the blog very soon enough.

What Can You Do With It🤔?

• Play 7 different sounds based on the basic drum-kit.
• Play this sounds either on mouse-click or key-press which is mentioned on each button.
• The source code is available on GitHub, feel free to check it out, fork it and maybe bring a few pull requests - I'm active on GitHub.

Development Process🛠

I was in the learning phase of React and I had known nothing other than using HTML~CSS~JS. So I went forward with it but I assure you once I'm done I'll be experimenting with Next js.

Structuring the page using HTML

The first task as usual is to structure the page which included three sections at first- The header, The drum buttons, and the footer.

• For the header, I used an H1 tag and then centered it using the text-align: center; property and applied it to the body tag.
• Then made 7 buttons and wrapped it all in a div tag.
• And then the footer.

Structuring was easy enough what was challenging was to write out the script for the interaction of the buttons.

Implementing Interaction to the buttons.

Interaction or basically hear for a button click....what comes to the mind first is adding event listeners for all the buttons for mouse-click.

Now if you think practically, adding event listeners to each button will take a lot of code. How do we do this in a better way?

For-Loops to the rescue!

Open up a for-loop, initialize i=0. Now if I add the .drum class to all my button elements and select all the elements using the query selector it will return an array containing all the buttons.

> document.querySelectorAll(".drum") 
NodeList(7) [button.w.drum, button.a.drum, button.s.drum, button.d.drum, button.j.drum, button.k.drum, button.l.drum]

Array numbering starts from zero, we can use this advantage to select all the button elements and add event listeners to them.

The next job is to play the sound. For this, I made a function called makeSound() which takes only one value and that is, the name of the button. Each button corresponds to a sound it should play. For this, I searched in for a few drum sounds and put them all in a separate folder. Now to get the name of the button, I stored the value of the innerHTML using a variable and passed it on to the function. For playing the sound I used a Switch case.

var buttonName = this.innerHTML;
makeSound(buttonName);

• So that makes 7 cases in total each containing the name of the button respectively.
• If the name of the button matches with the case a variable is created which takes the audio's file location.
• variableName.play() - Plays the audio file and thus breaks from the loop using the break; statement.

function makeSound(key) {
  switch (key) {
    case "w":
      var tom1 = new Audio('sounds/tom-1.mp3');
      tom1.play();
      break;

    case "a":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;

    case "s":
      var tom3 = new Audio("sounds/tom-3.mp3");
      tom3.play();
      break;

    case "d":
      var tom4 = new Audio("sounds/tom-4.mp3");
      tom4.play();
      break;

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

    case "k":
      var kickBass = new Audio("sounds/kick-bass.mp3");
      kickBass.play();
      break;

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

    default:
      console.log(this.innerHTML);
      break;
  }
}

So playing the drum sound on button click is done, now let's move on to playing the drum sound when the user presses the key. For this we again use our friendly Event Listener to hear for a keydown event which returns the above array when the event occurs:

> KeyboardEvent {isTrusted: true, key: "c", code: "KeyC", location: 0, ctrlKey:false, .....}

We just need to grab hold of the key value for our switch case to validate to play the respective sound.

Now another thing I added is to give the user feedback to make assure that he has clicked the button.

• For this, I made a class in my CSS file with the name .pressed and made a new function with the name makeAnimation().
• This function also takes in one value and that's the name of the button. For each button, it has a corresponding className attached to it. Inside this function, we create a new variable that stores the className of the pressed button and uses concatenation to add the passed button name to the query selector, and then finally add the newly created class .pressed which changes the opacity when clicked using className.classList.add("pressed").
• After this we also need to remove this class after a short period of time and luckily we can use the setTimeout() function to set a timeout of 100ms, quick enough to remove the className.

function makeAnimation(currentKey){
  var activeButton = document.querySelector("." + currentKey);
  activeButton.classList.add("pressed");

  setTimeout(function(){
    activeButton.classList.remove("pressed");
  }, 100);
}

With this, I achieved all the main goals of my project and I'm ready to deploy to vercel which was the fun part of all.

Deployment🛰

• All I had to do was firstly make a new Vercel account.
• Link my GitHub account to it.
• Select the repository which contained all my code.
• Select the directory which contained my index.html file in my case it was the root directory so I left it as default.
• And then finally deploy it!🚀

Thanks for reading till here, if there's any correction to be made let me know in the comments section, and If this article did help you make sure you give it a ❤.