An interactive Virtual Drum Kit built using HTML, CSS, and JavaScript.
Play realistic drum sounds with your keyboard keys or by clicking on the buttons.
Simple, fun, and a great beginner project to learn about DOM manipulation and web audio.
- 🎶 Play drum sounds via mouse click or key press
- ⌨️ Keyboard controls: W, A, S, D, J, K, L
- ✨ Button animations when activated
- 📱 Responsive layout for mobile and desktop
- 🔊 Adjustable volume and mute/unmute (optional)
| Key | Sound |
|---|---|
| W | Tom 1 |
| A | Tom 2 |
| S | Tom 3 |
| D | Tom 4 |
| J | Snare Drum |
| K | Crash Cymbal |
| L | Kick Drum |
-
Clone the repository:
git clone https://github.com/MS134340/Drum-kit.git
-
Navigate to the project folder:
cd Drum-kit Open the index.html file in your browser.
Recommended: Use the Live Server extension in VS Code for automatic reload on save.
- HTML5
- CSS3
- JavaScript (ES6)