Introduction

I've always enjoyed working on fun projects, and this blog is going to help you do just that. Back in my university days, I was a huge fan of a music band, and I was particularly fascinated by how the drummer played their drum kit. One day, I decided to create my own drum kit using programming, allowing me to play drums using a keyboard.

So, I hit up Google to learn the basic drum kit names and downloaded a bunch of different drum sounds. Then, I started coding my way to becoming the best drummer 😂. This blog is all about fun and helping you build a beginner-friendly project. Once you've built this project, I bet you're going to be hooked. Let's dive into how we're going to build it.

Prerequisites

To maximize the benefits from this blog, it is recommended that you have familiarity with the following areas:

• Code Editor (Preferred VS Code)

• Basic React Knowledge

What are Key codes in keyboard?

Key codes are numerical values assigned to each key on a keyboard, uniquely identifying them. These codes play a vital role in programming for detecting and managing keyboard input, enabling the identification of specific keys upon their press or release.

Key codes are generally specific to the platform or programming language in use. For example, in JavaScript, key codes are employed within event handlers to determine which key has been pressed or released. The key code for the letter "A" is 65, for the letter "H" is 72, and for the letter "B" is 66.

Creating our Drum App

Let's dive into making our Drumkit app! I won't walk you through setting up a React project - you've got this. Instead, I'll share the code directly. You can grab the drum audio file from the Github repo. Happy coding!

Here is the CSS design for our app

*{
    margin: 0;
    padding: 0;
}
html{
    background: url('music.jpg');
    background-size: cover;
}
body{
    height: 100vh;
    widows: 100vw;
    background-color: rgb(0, 0, 0, 0.7);

}
.keys{
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}
.key{
    border: 0.4rem solid black;
    border-radius: 0.5rem;
    margin: 1rem;
    font-size: 1.5rem;
    padding: 1rem 0.5rem;
    width: 10rem;
    text-align: center;
    color: white;
    background: rgba(92, 92, 92, 0.4);
    text-shadow: 0 0 0.5rem white;
    transition: all 0.07s;
}

kbd{
    display: block;
    font-size: 4rem;
}
.sound{
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: #ffc600;
}

Here is the React code

import React from 'react';

const App = () => {
  const playSound = (e) => {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);

    if (!audio) return;
    audio.currentTime = 0;
    audio.play();
  };

  React.useEffect(() => {
    window.addEventListener('keydown', playSound);
    return () => {
      window.removeEventListener('keydown', playSound);
    };
  }, []);

  return (
    <div className="keys">
      <div data-key="65" className="key">
        <kbd>A</kbd>
        <span className="sound">clap</span>
      </div>
      <div data-key="83" className="key">
        <kbd>S</kbd>
        <span className="sound">hihat</span>
      </div>
      <div data-key="68" className="key">
        <kbd>D</kbd>
        <span className="sound">kick</span>
      </div>
      <div data-key="70" className="key">
        <kbd>F</kbd>
        <span className="sound">openhat</span>
      </div>
      <div data-key="71" className="key">
        <kbd>G</kbd>
        <span className="sound">boom</span>
      </div>
      <div data-key="72" className="key">
        <kbd>H</kbd>
        <span className="sound">ride</span>
      </div>
      <div data-key="74" className="key">
        <kbd>J</kbd>
        <span className="sound">snare</span>
      </div>
      <div data-key="75" className="key">
        <kbd>K</kbd>
        <span className="sound">tom</span>
      </div>
      <div data-key="76" className="key">
        <kbd>L</kbd>
        <span className="sound">tink</span>
      </div>
      <audio data-key="65" src="sounds/clap.wav"></audio>
      <audio data-key="83" src="sounds/hihat.wav"></audio>
      <audio data-key="68" src="sounds/kick.wav"></audio>
      <audio data-key="70" src="sounds/openhat.wav"></audio>
      <audio data-key="71" src="sounds/boom.wav"></audio>
      <audio data-key="72" src="sounds/ride.wav"></audio>
      <audio data-key="74" src="sounds/snare.wav"></audio>
      <audio data-key="75" src="sounds/tom.wav"></audio>
      <audio data-key="76" src="sounds/tink.wav"></audio>
    </div>
  );
};

export default App;

Output

Here's how it will look when you play the drum

Conclusion

In wrapping up, we've traversed the exciting journey of transforming your keyboard into a dynamic drumkit using React. This project not only serves as a testament to the power of programming in creating interactive applications but also offers a unique avenue for music enthusiasts to explore their passion.

Whether you're a beginner looking to dive into the world of React or someone seeking a fun project, this drumkit application stands as a perfect blend of learning and entertainment. As you embark on this coding adventure, remember the joy lies not just in the destination but in the journey of creation.

Happy coding, and may your beats be ever rhythmic!

Also, Follow me on Twitter orLinkedin share Cloud, System Design, Code, and many more tech stuff 😊