Virtual Drums: Browser Drum Machine & Finger Beats
Turn your webcam into an interactive drum kit and step sequencer. With 31 distinct percussion slots mapped across 5-bit finger combinations, you can trigger acoustic kicks, snares, claps, and hi-hats on the fly, program 16-step rhythms, and drive your music with punchy live percussion.
How Hand Gesture Tracking Works
Tunevate uses your device’s webcam and client-side computer vision to track 21 hand landmarks in 3D space with sub-millisecond precision. Here is how your hands shape chords, melodies, and sound parameters:
31-Slot Finger Combinations
Each unique combination of your 5 right-hand fingers triggers a distinct drum sound. With 5 fingers, there are 2^5 - 1 = 31 available finger patterns for kick drums, snares, open/closed hi-hats, rimshots, and claps.
16-Step Pattern Programming
Open the visual drum panel to edit 16-step patterns. Program complex polyrhythms, syncopated funk beats, straight four-on-the-floor house rhythms, and half-time hip-hop grooves.
Real-Time Beat Layering
Toggle Drum Mode on to play live beats with hand gestures while your background chord loops continue cycling underneath.
Built for Real-Time Music Creation
Engineered with Tone.js, Web Audio API, and MediaPipe AI for professional synthesis, responsive acoustic instruments, and seamless loop recording.
31-Slot Percussion Kit
Comprehensive kit containing acoustic bass kicks, snappy snares, dry claps, tight closed hi-hats, sizzling open hats, and percussion.
16-Step Grid Sequencer
Interactive step matrix allows visual programming, velocity adjustment, and instant preset recall.
Master Transport Clock Sync
Locked to a precise musical clock with BPM tempo slider and 1/16th note quantisation for rock-solid timing.
5-Bit Gesture Decoding
MediaPipe hand landmark detection translates finger states into binary masks at 60 FPS with zero noticeable lag.
Preset Groove Library
Includes rock beats, funk rhythms, four-on-the-floor club patterns, and hip-hop boom-bap grooves ready to launch.
Private In-Browser Audio
All percussion samples are triggered locally through Tone.js Web Audio. No video or audio is ever uploaded.
Audio & Machine Learning Architecture
| Percussion Architecture | Tone.js DrumMachine sample playback + synthesized transient generator |
| Number of Slots | 31 finger-addressed percussion slots (5-bit binary finger matrix) |
| Step Grid Length | 16 steps per bar (quantised to 1/16th notes) |
| Tempo Range | 60 to 200 BPM (synchronized with looper clock) |
| Processing Latency | < 12ms buffer response for responsive live drumming |
Frequently Asked Questions
Everything you need to know about playing this instrument online with hand gestures.
How do virtual drums work with hand gestures?
Tunevate checks which of your 5 fingers are raised on your hand. Each of the 31 possible finger combinations maps directly to a percussion sample: raising your index finger triggers a kick drum, index and middle triggers a snare, and thumb triggers hi-hats.
Can I use the drum machine while playing virtual piano or synth?
Yes! You can toggle between Instrument mode and Drum mode in the top dock. The drums keep playing your programmed step groove automatically while your hands switch back to playing piano, guitar, or synth chords.
Can I export my drum beats and loops?
Yes. Your drum patterns, tempo, and recorded loop layers are saved directly into `.tvate` session files that you can export, share, and reload anytime.