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 Drumpad
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
- Pure JavaScript (ES6+)
- Howler.js for audio processing
- HTML5 Audio API
- CSS3 Grid Layout
- Responsive design principles
- Clone the repository
- Open
index.html
in 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 drumpad uses the LM1 drum sample pack. All samples are included in the repository.
MIT License