Build a Drum Kit Website

Introduction

Hello, fellow developers! I'm excited to share my latest project with you: a Drum Kit. This project is a fun and interactive way to practice JavaScript, especially in handling user inputs and audio playback. Whether you're a beginner looking to dive into JavaScript or someone who loves music and coding, this project is perfect for you.

Project Overview

The Drum Kit is an interactive web application that simulates a drum set. Users can play sounds by clicking on the drum buttons or pressing corresponding keys on their keyboard. The project demonstrates how to work with events, audio, and CSS animations to create a responsive and engaging user experience.

Features

• Interactive Drum Buttons: Clickable buttons that play different drum sounds.
• Keyboard Controls: Press specific keys to trigger drum sounds.
• Visual Feedback: Buttons animate when pressed, providing immediate visual feedback.
• Responsive Design: The layout adjusts to different screen sizes, ensuring a consistent experience across devices.

Technologies Used

• HTML: Provides the structure of the drum kit interface.
• CSS: Styles the drum kit, including the button animations and overall layout.
• JavaScript: Handles user interactions, sound playback, and animations.

Project Structure

Here's a quick look at the project structure:

Drum-Kit/
├── index.html
├── styles.css
└── index.js

• index.html: Contains the HTML structure of the drum kit.
• styles.css: Includes CSS styles for the drum kit and animations.
• index.js: Manages user interactions, sound effects, and animations.

Installation

To get started with the project, follow these steps:

1. Clone the repository:
   

   git clone https://github.com/abhishekgurjar-in/Drum-Kit.git
   

2. Open the project directory:
   

   cd Drum-Kit
   

3. Run the project:

   • Open the index.html file in a web browser to see the drum kit in action.

Usage

1. Open the website in a web browser.
2. Click the drum buttons or press the corresponding keys (w, a, s, d, j, k, l) to play different drum sounds.
3. Observe the button animations when pressed to get visual feedback.

Code Explanation

HTML

The index.html file sets up the structure of the drum kit, including buttons for each drum sound and a footer. Here’s a snippet:

8b05045a5be5764f313ed5b9168a17e6
2cf86155e6fe984523d87d7c3f8662dc
  93f0f5c25f18dab9d176bd4f6de5d30e
    37c4eb5109be9bfa4ea9e5c231a37be0
    b2386ffb911b14667cb8f0f91ea547a7Drum Kit6e916e0f7d1e588d4f442bf645aedb2f
    14d13e98ea612ebaf5524878bba079c7
    a529d501bd43260127412109e0c165f0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4cc3f2f27241bff45c0eb97469e3154bDrum ? Kit473f0a7621bec819994bb5020d29372a
    6fe4c85fa23811ad3b4f95e80c67d9b6
      a363111c4c97db79a33be1e7c9faeacdw65281c5ac262bf6d81768915a4a77ac0
      040c7d2ea3d126856c2768c245c34acba65281c5ac262bf6d81768915a4a77ac0
      32f01e34bbd63039390f0166cc02bbe3s65281c5ac262bf6d81768915a4a77ac0
      8a646e68c59c77869073ea0de90cf8a0d65281c5ac262bf6d81768915a4a77ac0
      c7113ff65de7ed91c48c5a0c80aadfbbj65281c5ac262bf6d81768915a4a77ac0
      79b9cca3663eb92ea95d2f995be299fbk65281c5ac262bf6d81768915a4a77ac0
      c1185b1f8daf584f7ca679734825f6fcl65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
    96d2c81a82afe2994a2bf7f85a438d4b2cacc6d41bbb37262a98f745aa00fbf0
    c37f8231a37e88427e62669260f0074dMade with ❤️ by Abhishek Gurjar84122da5b51c58ef54d7045814144010
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

The styles.css file styles the drum kit, including the drum buttons and animations. Here are some key styles:

body {
  text-align: center;
  background-color: #283149;
}

h1 {
  font-size: 5rem;
  color: #DBEDF3;
  font-family: "Arvo", cursive;
  text-shadow: 3px 0 #DA0463;
}

footer {
  color: #DBEDF3;
  font-family: sans-serif;
}

.w { background-image: url("images/tom1.png"); }
.a { background-image: url("images/tom2.png"); }
.s { background-image: url("images/tom3.png"); }
.d { background-image: url("images/tom4.png"); }
.j { background-image: url("images/snare.png"); }
.k { background-image: url("images/crash.png"); }
.l { background-image: url("images/kick.png"); }

.set {
  margin: 10% auto;
}

.pressed {
  box-shadow: 0 3px 4px 0 #DBEDF3;
  opacity: 0.5;
}

.drum {
  outline: none;
  border: 10px solid #404B69;
  font-size: 5rem;
  font-family: 'Arvo', cursive;
  line-height: 2;
  font-weight: 900;
  color: #DA0463;
  text-shadow: 3px 0 #DBEDF3;
  border-radius: 15px;
  display: inline-block;
  width: 150px;
  height: 150px;
  text-align: center;
  margin: 10px;
  background-color: white;
}

JavaScript

The index.js file controls the drum kit's functionality, including sound playback and button animations. Here’s a snippet:

const numberOfDrumButtons = document.querySelectorAll(".drum").length;

for (let i = 0; i < numberOfDrumButtons; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function () {
    const buttonInnerHTML = this.innerHTML;

    makeSound(buttonInnerHTML);
    buttonAnimation(buttonInnerHTML);
  });
}

document.addEventListener("keypress", function (event) {
  makeSound(event.key);
  buttonAnimation(event.key);
});

function makeSound(key) {
  switch (key) {
    case "w":
      const tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();
      break;
    case "a":
      const tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;
    case "s":
      const tom3 = new Audio("sounds/tom-3.mp3");
      tom3.play();
      break;
    case "d":
      const tom4 = new Audio("sounds/tom-4.mp3");
      tom4.play();
      break;
    case "j":
      const snare = new Audio("sounds/snare.mp3");
      snare.play();
      break;
    case "k":
      const crash = new Audio("sounds/crash.mp3");
      crash.play();
      break;
    case "l":
      const kick = new Audio("sounds/kick-bass.mp3");
      kick.play();
      break;
    default:
      console.log(key);
  }
}

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

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

Live Demo

You can check out the live demo of the Drum Kit here.

Conclusion

Building this Drum Kit was a fantastic experience that allowed me to dive into JavaScript's event handling and audio capabilities. I hope this project inspires you to experiment with interactive web applications and create your own fun and engaging projects. Feel free to explore the code, customize it, and use it in your own work. Happy coding!

Credits

This project was created to showcase JavaScript's potential for creating interactive web elements.

Author

• Abhishek Gurjar
  • GitHub Profile

The above is the detailed content of Build a Drum Kit Website. For more information, please follow other related articles on the PHP Chinese website!