How to Play Drum Kit Pro
Drum Kit Pro puts a full synthesized drum kit in your browser—no downloads, no plugins, just pure Web Audio API sound generation. Each of the 9 pads produces a unique synthesized drum sound: a deep oscillator sweep for the kick, layered noise and oscillator for the snare, filtered short/long noise bursts for the hi-hats, mid-range oscillator sweeps for the three toms, and complex decaying noise for the crash and ride cymbals.
Keyboard Controls
- A — Crash cymbal
- S — Open Hi-Hat
- D — Ride cymbal
- F — Tom 1 (high)
- G — Closed Hi-Hat
- H — Tom 2 (mid)
- J — Snare
- K — Kick drum
- L — Tom 3 (low)
Using the Metronome
Toggle the metronome on to hear a click track at the BPM you select (60–200 BPM). The four beat indicators light up in sequence—the red indicator marks beat 1 of each bar. Use this to practice staying in time. The volume slider controls the master output level of all sounds and the metronome click.
Tips for Better Playing
For the most natural feel, use your left hand on the hi-hats and cymbals (A, S, D) and your right hand on snare, kick, and toms (J, K, L). Practice basic rock beats: kick on beats 1 and 3 (K), snare on 2 and 4 (J), and hi-hat on every eighth note (G repeated). Once you have the pattern, add crash accents and tom fills.
Sound Design Details
All sounds are synthesized in real time using the Web Audio API. The kick uses a sine oscillator with a rapid frequency sweep from 150 Hz to near zero. The snare layers band-passed white noise with a short sine burst. Hi-hats use high-pass filtered noise—the closed hat cuts off quickly while the open hat sustains with a gentle fade. Toms sweep from their fundamental frequency down to about 40% over 300ms. Crash and ride use high-pass and band-pass filtered noise with longer decay tails of 1.2 and 0.8 seconds respectively.