An interactive drum kit built with HTML, CSS, and JavaScript.
Play sounds by clicking the pads or using your keyboard keys.
DrumKit/ ├─ index.html ├─ css/ │ └─ style.css ├─ js/ │ └─ script.js ├─ images/ │ └─ drum.png └─ sounds/ ├─ kick.wav ├─ snare.wav ├─ hihat.wav ├─ tom.wav ├─ clap.wav ├─ ride.wav
| Key | Sound | Animation |
|---|---|---|
| K | Kick | Bounce |
| S | Snare | Shake |
| H | Hi-Hat | Pulse |
| T | Tom | Wobble |
| C | Clap | Pop |
| R | Ride | Spin |
- Click the pads or press the matching keys on your keyboard.
- Each pad has a short press effect and a unique animation.
-
Clone the repository:
git clone https://github.com/<username>/<repository>.git
-
Open index.html in your browser.
-
Interact with the pads or use the keyboard keys.
Go to Settings → Pages in your repository.
Under Build and deployment:
Source: Deploy from a branch
Branch: main (and /root)
Save.
After a few minutes, your project will be live at: https://.github.io//
Responsive layout with CSS Grid.
Interactive pads with press effects.
Keyboard support for fast playing.
Unique animations for each instrument.
Clean, modern UI with gradients and shadows.