The six sounds of a drum kit
A basic drum kit splits into two families. Drums have a skin that is struck: the bass drum (kick) gives the low thump you feel in your chest, the snare gives the sharp crack on beats 2 and 4, and the toms give pitched booms that are used mostly in fills. Cymbals are metal: the hi-hat keeps a steady pulse of short ticks, and the crash marks the start of a section with a long splash.
On this page each sound has its own pad and color, and the same color is used in the step grid, so you can match a row of the grid to the pad without reading labels. On a phone held upright the pads are arranged in two columns of three, large enough for two thumbs; on a wider screen they switch to a drum-kit layout with cymbals and toms on top and hi-hat, snare and bass drum below.
How to read the step grid
The grid is a simplified drum score, the same idea as the step sequencer on a drum machine. Each row is one instrument and each column is a moment in time, read from left to right. A colored cell means “hit this pad here”; an empty cell means rest. The top line counts the beats: the bold numbers 1 2 3 4 are the beats you would tap your foot to, and the small marks between them are the subdivisions.
- 8 cells per bar (1 & 2 & …): eighth notes, two cells per beat — most rock and pop beats.
- 16 cells per bar (1 e & a …): sixteenth notes, four cells per beat — disco and bossa nova.
- 12 cells per bar (1 & a …): triplets, three cells per beat. In the shuffle the hi-hat plays the first and third of each three, which gives the long-short swing feel.
- Fill-in practice spans two bars: one bar of groove, then the snare and toms take over at the end of the second bar before the crash brings you back to beat 1.
How the timing is judged
Every hit is compared with the moment its cell should sound. Within 45 milliseconds counts as Perfect, within 110 ms as Good with a note that you were early or late and by how much, and a cell that passes without a hit is Missed. A hit with no cell nearby for that pad is counted as an extra hit. The score weighs perfect hits fully and good hits at 70 percent; extra hits are shown but do not lower the score.
The clicks and the judging both run on the Web Audio clock, the same high-resolution timeline your speakers play from, rather than on page timers that slip when the browser is busy. The page also asks the browser how long sound takes to reach the speaker and corrects for it, so a hit that sounds on time to you is scored on time.
A practice order that works
Drummers learn coordination one limb at a time. If a rhythm feels hard, slow it down by 10 to 20 BPM rather than pushing through mistakes — accuracy at a slow tempo carries over to fast tempos, but sloppy repetitions do not.
- Start with Basic rock: hi-hat on every beat, bass drum on 1 and 3, snare on 2 and 4.
- Move to 8-beat rock, doubling the hi-hat, then Stomp-stomp-clap and Half-time to feel the snare in different places.
- Disco puts the hi-hat between the beats — the off-beat is the hard part.
- Finish with Shuffle, Bossa nova and Fill-in practice, which mix subdivisions and several pads.
Playing on a phone, tablet or PC
Each pad responds the instant your finger lands, not when you lift it, and two pads can be hit at the same time — bass drum and crash together, for example. Use two thumbs on a phone, or two or three fingers on a tablet lying flat. On a PC the pads are mapped to Q W E for crash, high tom and floor tom, A and S for hi-hat and snare, and the Space bar for the bass drum, so the left hand plays cymbals and snare while the thumb plays the kick.
Frequently asked questions
Why is there no sound on my iPhone?
On iPhone and iPad, sounds made by web pages follow the silent switch. Turn silent mode off (or use headphones) and tap a pad again. Browsers also keep audio off until you first touch the page, so the very first tap may only wake the sound up.
My hits are always judged late. What can I do?
Bluetooth headphones and speakers add a delay of 100–300 ms that browsers cannot always report, so you end up hitting after the sound you hear. Use the phone speaker or wired headphones for rhythm practice. If it still feels late, close other apps that play audio and try again.
Can I hit two pads at once?
Yes. Each finger is tracked separately, so bass drum and crash, or hi-hat and snare, can sound together. On a PC you can press several keys together as well, for example A and the Space bar.
Which keys play which drum on a keyboard?
Q is crash, W is high tom, E is floor tom, A is hi-hat, S is snare and the Space bar is the bass drum. The key letters are printed on the pads when you use a mouse.
Is the step grid real drum notation?
It shows the same information as a drum staff — which drum, and when — in the grid form used by drum machines and music apps. On a printed drum staff the bass drum sits low, the snare in the middle and the cymbals on top with x-shaped note heads; once you can read the grid, those staves are easy to follow.
What tempo should I practise at?
Start at the suggested tempo or lower, and only raise it by 5–10 BPM after scoring 90 or more. Most pop and rock songs sit between 90 and 130 BPM, so a steady 8-beat at 120 BPM is a solid goal.
Are my scores saved?
Your best score for each rhythm is stored only in this browser on this device and appears next to the rhythm name. Nothing is uploaded, and clearing site data resets it.