Virtual Drum Kit

What this virtual drum kit is

This page lays out a nine-piece drum kit as pads on your screen. Tap, click or press a key and the matching drum sounds immediately. There is a kick drum, a snare, a closed and an open hi-hat, three toms, a crash cymbal and a ride cymbal. A built-in beat can play a pattern for you to play along with, so you can try fills and extra hits over a steady groove.

Nothing needs installing and no account is needed. Every sound is generated in your browser as you play, so there are no audio files to wait for.

The parts of the kit

• Kick. The bass drum, played with a foot pedal on a real kit. It gives the low thump that marks the beat.
• Snare. A shallow drum with wires that rattle against the skin, giving a sharp crack. In most pop and rock music it falls on the second and fourth beats.
• Hi-hat. Two small cymbals on a stand that a foot pedal opens and closes. Closed, it ticks. Open, it hisses and rings. This page has a separate pad for each, and a closed hit cuts off an open one, just as pressing the pedal would.
• Toms. Drums of different sizes. Tom 1 is the highest, Tom 2 is lower, and the floor tom is the deepest, a large drum that stands on its own legs.
• Crash. A cymbal for accents. It is loud, bright and fades quickly.
• Ride. A cymbal for keeping a steady pattern. It has a clear ping that sits under the music.

How the sounds are made

No recordings are used. Each drum is built from simple sound ingredients using the Web Audio feature of modern browsers. The kick is a sine wave whose pitch falls quickly, which sounds like a drum head settling after a hit. The snare mixes a burst of filtered noise for the rattle of the wires with a short tone for the drum body. The toms are lower pitch sweeps, and the hi-hats and cymbals are filtered noise with different lengths, from the quick tick of the closed hat to the long wash of the crash.

The results are clearly drum-like and respond instantly, but they are synthesized approximations. They do not capture the room, the stick on the skin or the tone of a specific kit.

Playing with a mouse, touch screen or keyboard

• Mouse. Click a pad to hit it. Each click is one hit.
• Touch screen. Tap pads, and use several fingers at once to play kick and hi-hat together, or snare and a cymbal.
• Computer keyboard. F is the kick, J the snare, D the closed hi-hat, K the open hi-hat, R, U and N the three toms, E the crash and I the ride. The letters are written on the pads. Left-hand keys play the left side of a kit and right-hand keys the right, so you can use both hands.
• Keyboard navigation. Press Tab to move between pads and Enter or Space to hit the one in focus.

Counting rhythm: beats and steps

Most popular music is in 4/4 time, which means four beats in each bar. You count them 1, 2, 3, 4. A common drum pattern puts the kick on beats 1 and 3 and the snare on beats 2 and 4, with the hi-hat ticking in between. The snare on 2 and 4 is called the backbeat, and it is what makes a crowd clap.

The built-in beat splits each beat into four equal steps, called sixteenth notes, so a bar has 16 steps. You count them as "1 e and a, 2 e and a" and so on. Eighth notes land on the numbers and the word "and", which is every second step. The tempo is measured in beats per minute. At 100 BPM a bar of four beats lasts 2.4 seconds.

The four built-in patterns

• Rock. Kick on 1 and 3 with an extra kick before beat 4, snare on 2 and 4, and eighth-note hi-hats. It starts at 100 BPM.
• Four on the floor. The kick hits every beat and an open hi-hat lands between them. It is the steady pulse of dance music, and starts at 122 BPM.
• Hip-hop. A slower groove at 86 BPM, with a kick that lands off the beat and the snare firmly on 2 and 4.
• Funk. Hi-hats on every sixteenth note, quieter between the beats, with a syncopated kick. It starts at 96 BPM.

The timing of the beat is scheduled on the audio clock, not on a normal browser timer, so it stays steady even if the page is busy. Choosing a pattern also sets its usual tempo, and you can change the tempo afterwards.

Beginner exercises

1. Learn the sounds. Hit each pad once and say its name. Listen for how the toms step down in pitch.
2. Kick and snare. Alternate kick and snare in a steady count: kick, snare, kick, snare.
3. Add the hi-hat. Play the closed hi-hat on every count while you add the kick on 1 and 3 and the snare on 2 and 4. That is the basic rock beat.
4. Play along. Start the Rock pattern and add a crash cymbal on the first beat of every fourth bar.
5. A fill. Over the last bar of four, play the toms down from Tom 1 to the floor tom, then land on the crash.

What a virtual drum kit is good for

A browser kit is a quiet way to learn the names and roles of each drum and to practice counting without a neighbor complaining. Musicians can use it to sketch a groove for a song idea, and teachers can use it to show how a beat is built piece by piece. It also works for a bit of fun at a party or a classroom. For longer patterns that you can edit step by step, try the online music maker, and keep time with the online metronome.

Online drums versus a real kit

A real kit uses all four limbs. The feet work the kick and hi-hat pedals while the hands hit everything else, and the strength and angle of each hit shapes the sound. A skilled player can make a single drum sound dozens of ways.

Taps on a screen or key presses cannot measure how hard you hit, so each pad plays at one fixed loudness, and you play with fingers rather than sticks. The virtual kit is best for learning the layout and rhythm patterns, not for developing stick technique.

Limitations of this version

• The sounds are synthesized, not recorded, and will not match a particular kit.
• Every hit has the same loudness. Nothing responds to how hard you press.
• The kit has nine pads and no extra cymbals or percussion.
• The four patterns are fixed. To edit a pattern step by step, use the music maker.
• The beat pauses when you switch to another tab, because browsers slow down hidden pages.
• Nothing is recorded or saved, and there is no MIDI input.
• Bluetooth headphones usually add a noticeable delay, which is easy to hear with drums.

Common problems and how to fix them

• No sound. Browsers keep audio off until you interact with the page, so tap a pad first. Then check the volume slider, your device volume and the tab's mute icon. On an iPhone, also check the silent switch.
• The hi-hat cuts off. This is intended. A closed hit stops an open one, as the pedal does on a real kit.
• The keys do nothing. Click an empty part of the page so focus is not in another field.
• The beat stops by itself. It pauses when the tab is hidden. Come back and press Start beat again.
• The sound lags. Close heavy tabs and use wired headphones or the device speaker.