Name: How to build a Drum Kit with javascript
Rating: 1.3 (3065 reviews)
Author: coderamrin

Hello everyone, today we are going to build a Drum Kit with JavaScript.

Let’s get started.

Prereq:
To build the project you must have the knowledge of:

Css Fundamentals
JavaScript fundamentals

If you prefer video, check it out here:

What you’ll learn

At the end of this project, you’ll learn how to work with JavaScript DOM Keyboard events. And How to work with HTML5 Audio elements.
You’ll also learn how to use Flexbox to center divs 🙂

Step#1: Setup

Download the starter files from here, and download the audio from here.

Create a project folder and copy over all the files from the starter and audio. And open it up in your code editor.

Now that we have the files ready, let’s write the markup.

Step#2: Html

In HTML we have three parts, Header, Screen, and Keyboard.

Let’s write them down.

<div class="container">
   <h1>Keyboard</h1>
   <div class="screen"></div>
   <div class="keyboard">
   </div>
</div>

This is the base markup. Let’s add the keyboard keys.

            <div class="keyboard">
        <div class="row">
          <div class="key" id="q">
            q
            <audio src="./sound/1.wav"></audio>
          </div>
          <div class="key" id="w">w <audio src="./sound/2.wav"></audio></div>
          <div class="key" id="e">e <audio src="./sound/3.wav"></audio></div>
          <div class="key" id="r">r <audio src="./sound/4.wav"></audio></div>
          <div class="key" id="t">t <audio src="./sound/6.wav"></audio></div>
          <div class="key" id="y">y <audio src="./sound/6.wav"></audio></div>
          <div class="key" id="u">u <audio src="./sound/7.wav"></audio></div>
          <div class="key" id="i">i <audio src="./sound/8.wav"></audio></div>
          <div class="key" id="o">o <audio src="./sound/9.wav"></audio></div>
          <div class="key" id="p">p <audio src="./sound/10.wav"></audio></div>
        </div>
        <div class="row">
          <div class="key" id="a">a <audio src="./sound/11.wav"></audio></div>
          <div class="key" id="s">s <audio src="./sound/12.wav"></audio></div>
          <div class="key" id="d">d <audio src="./sound/13.wav"></audio></div>
          <div class="key" id="f">f <audio src="./sound/14.wav"></audio></div>
          <div class="key" id="g">g <audio src="./sound/15.wav"></audio></div>
          <div class="key" id="h">h <audio src="./sound/16.wav"></audio></div>
          <div class="key" id="j">j <audio src="./sound/17.wav"></audio></div>
          <div class="key" id="k">k <audio src="./sound/18.wav"></audio></div>
          <div class="key" id="l">l <audio src="./sound/19.wav"></audio></div>
        </div>
        <div class="row">
          <div class="key" id="z">z <audio src="./sound/20.wav"></audio></div>
          <div class="key" id="x">x <audio src="./sound/21.wav"></audio></div>
          <div class="key" id="c">c <audio src="./sound/22.wav"></audio></div>
          <div class="key" id="v">v <audio src="./sound/23.wav"></audio></div>
          <div class="key" id="b">b <audio src="./sound/24.wav"></audio></div>
          <div class="key" id="n">n <audio src="./sound/25.wav"></audio></div>
          <div class="key" id="m">m <audio src="./sound/26.wav"></audio></div>
        </div>
        <div class="space">Space</div>
      </div>

These are all the markups we will need.

Let’s move on to add the stylings.

Step#3: CSS

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  padding: 2rem 0;
}

.screen {
  width: 65%;
  height: 150px;
  background-color: lightgray;
  border-radius: 5px;
  margin: 1rem 0;
  padding: 1rem;
}

.keyboard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
}

.key,
.space {
  background-color: black;
  border: 4px solid black;
  width: 70px;
  height: 60px;
  color: white;
  margin: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

.key:hover,
.space:hover {
  border-color: orange;
}

.space {
    width: 60%;
}

We started out by adding the reset styles. Then centered everything horizontally and vertically with a flexbox.

And at the end, we styled the keyboard and screen.

Step#4: JavaScript

const screen = document.querySelector(".screen");

window.addEventListener("keydown", (e) => {
  const key = document.getElementById(e.key);

  if (e.key === " ") {
    screen.textContent = screen.textContent + e.key;
  }

  if (!key) {
    return;
  }

  key.children[0].play();
  screen.textContent = screen.textContent + e.key;
});

The JavaScript is simple. First, we got the screen. And then, we added a key-down event on the window object.

So, when any of the keys are clicked we get the button associated with the key. And then add the text to the screen and play the audio of the button.

That’s it.

We got a musical keyboard built with JavaScript.

Conclusion:

In this article, we’ve built a musical keyboard with Html, CSS, and JavaScript.

Hope you enjoyed the article.
If you want more articles like these, don’t forget to follow me and like the post.

Twitter: https://twitter.com/CoderAmrin