Abhishek GurjarIntroduction
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:
-
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Drum-Kit.git -
Open the project directory:
cd Drum-Kit -
Run the project:
- Open the
index.htmlfile in a web browser to see the drum kit in action.
- Open the
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>
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
