Air Drum — Play a Drum Kit with Your Hands
A full drum kit appears on your webcam feed. Strike down through a pad to hit it — kick, snare, hi-hat, three toms, crash, and ride. No sticks, no kit, no install. Completely free and private — all processing happens in your browser.
Click here to Start
Last Hit
—
Strike down through a drum pad to hit it
How to Play
- Click Enable Sound first — browsers require a user tap to unlock audio. You'll hear a test snare and the button turns green.
- Click the camera area to start — allow camera access when prompted. Stand or sit ~60–100 cm from your camera.
- Colourful drum pads appear overlaid on your camera feed, arranged like a real kit.
- Hold your hands above the pads, then strike downward through a pad to hit it — the same motion as hitting a real drum.
- Use both hands simultaneously — the kit tracks up to two hands at once for full rhythmic patterns.
- Cymbals (Crash, Hi-Hat, Ride) are in the top row. Toms are in the middle. Snare and Kick are at the bottom.
Drum Pad Reference
| Pad | Sound | Position | Colour |
|---|---|---|---|
| Crash | Cymbal crash — long shimmer | Top left | Yellow |
| Hi-Hat | Closed hi-hat — short tick | Top centre-left | Blue |
| Ride | Ride cymbal — lower shimmer | Top right | Violet |
| Tom 1 | High tom | Mid centre-left | Red |
| Tom 2 | Mid tom | Mid centre-right | Orange |
| Floor Tom | Low floor tom | Mid right | Deep orange |
| Snare | Snare — crack + rattle | Bottom left | Green |
| Kick | Bass kick — deep thump | Bottom centre | Pink |
How It Works
The Air Drum uses MediaPipe Hands to track 21 keypoints on each hand at up to 30 fps. Each drum pad is an ellipse on the canvas. When any tracked point — fingertip, knuckle, or wrist — crosses downward through the pad's top edge, the pad fires. A dead-zone system ensures the hand must fully retreat above the pad before it can retrigger, preventing false double-hits from jitter.
All sounds are synthesised in real time via the Web Audio API — no audio files are downloaded. The kick uses a pitched sine sweep (808-style). The snare combines a triangle wave body with bandpass-filtered noise. The hi-hat is short high-pass noise. Cymbals use a cluster of inharmonic square oscillators. Toms use a pitched sine sweep with an attack transient. A dynamics compressor prevents clipping when multiple pads fire simultaneously.
Frequently Asked Questions
Does this send my camera feed to a server?
No. All hand tracking runs in your browser via WebAssembly. Your camera feed never leaves your device.
A pad keeps triggering when I hold my hand over it.
Each pad uses a dead zone — it won't retrigger until your hand rises clearly above the pad. Try lifting your hand fully between hits rather than hovering at the pad surface.
Can I use both hands at the same time?
Yes — MediaPipe tracks up to two hands simultaneously, so you can play the hi-hat with one hand and snare with the other, just like real drumming.
Can I use this on mobile?
Yes, on modern mobile browsers with a front-facing camera. Hand tracking is CPU-intensive so performance varies — a recent mid-range or better device works best. Landscape orientation gives more room for the pad layout.
Why is the kick drum at the bottom centre?
The layout mirrors a real drum kit viewed from the player's seat — cymbals up high, kick in the centre-bottom where your foot would be. On screen, your hands play the kick rather than a foot pedal.