An interactive online drumpad that lets you play beats using your keyboard or touch controls. Perfect for music enthusiasts and aspiring drummers.
Try it now: Online Drum-pad
Before I started playing guitar, I dreamed of playing the drums. Unfortunately, this instrument didn't meet with approval from other household members. However, I managed to convince my parents to buy me a bass guitar instead, which worked out well for me.
Many years have passed, I still don't have drums and probably never will. But the desire to learn at least basic drumming skills remained. What if I could practice finger-drumming on my phone? That's how the idea for this app was born.
I know there are many similar applications, but I wanted something simple that could run on any phone (and computer) without installation. The tool is ready, now it's time to practice!
- 🎵 12 high-quality drum samples
- 📱 Touch-enabled for mobile devices
- ⌨️ Keyboard mapping for quick access
- 🖱️ Mouse and touch support
- 🔊 Velocity sensitive controls (the closer the center, the louder)
- 🎨 Clean, minimalist interface
- 🌓 Dark/Light theme support
- Alpine.js for reactive UI
- Howler.js for audio processing
- HTML5 Audio API
- CSS3 Grid Layout
- Responsive design principles
- Clone the repository
- Open
index.htmlin your browser - Use your keyboard or click/tap the pads to play sounds
| Key | Sound |
|---|---|
| 1, V | Crash |
| 2, F | Cowbell |
| 3, R | Ride |
| Q | Low Tom |
| W | Mid Tom |
| E | High Tom |
| C | Closed HH |
| D | Open HH |
| Z | Kick |
| S | Rim |
| X | Snare |
| A | Clap |
This 3x4 grid layout adjusts to a 4x3 layout when the screen is wider than it is tall.
This drum-pad uses the LM1 drum sample pack. All samples are included in the repository.
MIT License