Build a Drum Kit Website-CSS Tutorial-php.cn

Build a Drum Kit Website

王林

Release： 2024-08-15 06:03:02

Original

263 people have browsed it

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

Copy after login

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:

Clone the repository:

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

Copy after login

Open the project directory:
```
cd Drum-Kit
```
Copy after login
Run the project:
- Open the index.html file in a web browser to see the drum kit in action.

Usage

Open the website in a web browser.
Click the drum buttons or press the corresponding keys (w, a, s, d, j, k, l) to play different drum sounds.
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:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Drum Kit</title>
    <link rel="stylesheet" href="styles.css" />
    <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" />
  </head>
  <body>
    <h1 id="title">Drum ? Kit</h1>
    <div class="set">
      <button class="w drum">w</button>
      <button class="a drum">a</button>
      <button class="s drum">s</button>
      <button class="d drum">d</button>
      <button class="j drum">j</button>
      <button class="k drum">k</button>
      <button class="l drum">l</button>
    </div>
    <script src="index.js" charset="utf-8"></script>
    <footer>Made with ❤️ by Abhishek Gurjar</footer>
  </body>
</html>

Copy after login

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;
}

Copy after login

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);
}

Copy after login

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!