A browser drum machine can build and loop a beat without ever downloading an audio sample, because every kick, snare, and hi-hat hit is generated on demand by JavaScript running on top of the W3C Web Audio API. The Online Drum Machine lives entirely inside one web page: no download, no signup, no audio file upload, and no third-party sample host to license content from. You pick a tempo between 40 and 240 BPM, toggle cells across a 16-step grid split into three tracks, and press Play to loop the result. The kick is a sine oscillator whose frequency drops while its gain decays; the snare and hi-hat use freshly generated noise buffers shaped by filters and envelopes. Because the voices are synthesized locally rather than played back from a recording, there is nothing to license, nothing to fetch, and nothing leaving your device. The grid always represents four quarter-note beats divided into sixteen equal sixteenth-note steps, which makes it easy to count and easy to map onto common 4/4 time. This article walks through what the tool does, how its BPM math works, what its three synthesized voices sound like, and how to put together a first loop without installing anything on your computer.
The 16-Step Grid and Three Sounds
The grid is the heart of the sequencer. It contains sixteen steps running left to right and three rows running top to bottom. Each row is one instrument: kick on the top row, snare in the middle, and hi-hat on the bottom. That gives you 48 toggleable cells in total. Click any cell to turn that instrument on for that step; click it again to turn it off. Cells are independent — turning a snare cell off does not affect the kick cell in the same column, and the hi-hat row can stay on while you work on the kick.
The grid always represents four quarter-note beats divided into sixteen equal sixteenth-note steps, so step 1 is the downbeat and steps 5, 9, and 13 mark the start of beats two, three, and four respectively. When you press Play, a moving outline marks the current step while the loop runs, so you can see exactly where you are in the bar. The outline uses color plus a border rather than animation, which means users who have requested reduced motion still get the same position feedback. Each grid button also exposes an on-or-off pressed state and a descriptive accessible label, and horizontal scrolling keeps all sixteen steps usable on narrow screens without shrinking the touch targets into unreadable marks.
When you first open the drum machine, the grid is pre-filled with a simple four-on-the-floor starting pattern: kick on every quarter note (steps 1, 5, 9, 13), snare on beats two and four (steps 5 and 13), and closed hi-hat on every eighth note (steps 1, 3, 5, 7, 9, 11, 13, 15). That is a clean pattern you can replace one cell at a time rather than starting from silence. Pressing Clear pattern turns off all 48 cells at once, so you can drop back to a blank bar whenever you want to start over.
Set Tempo, Build a Pattern, and Play
- Open the drum machine in your browser and locate the tempo field near the grid.
- Enter a whole number from 40 to 240. In this tool, BPM means quarter notes per minute (matching the tempo meaning used by the MusicXML sound element), so 120 is a relaxed walking pace and 90 is a typical hip-hop tempo.
- Click any cell in the kick, snare, or hi-hat row to turn that instrument on for that sixteenth-note step. Click again to turn it off. The grid always covers one bar of four beats, and the cells you toggle become the loop that Play will repeat.
- Press Play. A look-ahead scheduler polls every 25 milliseconds and places the next events up to 100 milliseconds ahead on the AudioContext timeline, so the loop stays tight even when JavaScript is busy with other work.
- Watch the moving step outline to see where you are. Edit cells while the loop plays — new toggles are picked up by the upcoming scheduling window, so changes are audible almost immediately.
- Press Stop when you want to release audio resources and silence the playback. Stop clears the timer, stops and disconnects the synthesized audio sources, and closes the current AudioContext.
- Press Clear pattern to turn off all 48 cells at once and start from silence without leaving the page.
- To change tempo, type a new valid whole number from 40 to 240 and press Play again. Editing the tempo field during playback automatically stops the run, so the scheduler never mixes two tempos together.
BPM and Step Timing: The Numbers Behind the Beat
Because BPM in this tool means quarter notes per minute, a single quarter note lasts 60 divided by BPM seconds. The grid has four sixteenth-note steps inside each quarter note, so each step lasts 60 / BPM / 4 seconds. At the default 120 BPM, that is 60 / 120 / 4 = 0.125 seconds per step, and the full 16-step bar takes 2 seconds. The range from 40 to 240 BPM is a deliberate usability and scheduling guard rather than a claim about how fast a real drummer can play.
| BPM setting | Step duration (s) | Bar duration (s) | Why this value |
|---|---|---|---|
| 40 | 0.375 | 6.000 | Lower boundary of the accepted tempo range |
| 120 | 0.125 | 2.000 | Default starting tempo for the pre-loaded pattern |
| 240 | 0.0625 | 1.000 | Upper boundary of the accepted tempo range |
The tempo field is strict: only whole decimal numbers from 40 through 240 are accepted. Empty input, decimals with fractions, signs, exponent notation, unit text, and values outside the range all show a recoverable error that lets you try again rather than locking the field. If browser audio initialization or event scheduling fails, the tool reports a recoverable message and lets you press Play again rather than keeping a false playing state. Editing the tempo during playback stops the current run and releases its audio context, and pressing Play after entering a valid value starts cleanly at step one.
What the Free Tool Does Not Include
This is a focused 16-step sketch pad rather than a full digital audio workstation. The free version intentionally omits several features that producers may expect from commercial drum machines:
- No swing or shuffle: every step is a straight sixteenth note with equal spacing.
- No triplets: the grid is locked to sixteenth notes within four quarter-note beats.
- No velocity, accents, or per-track volume: each hit plays at the same fixed loudness.
- No effects, EQ, reverb, or compression: the three voices are plain synthesized envelopes.
- No recording, export, bounce, or stem rendering: the loop cannot be saved as a file.
- No MIDI input or output, no Ableton Link, and no sample-accurate cross-device synchronization.
- No background-tab guarantees: heavy browser throttling, suspended tabs, device changes, and high system load can still affect what you hear.
If you need production arrangement, rendered stems, or latency calibration, transfer the pattern concept to a dedicated music application. The Web Audio scheduler reduces ordinary main-thread jitter, but it is not an AudioWorklet engine and does not promise identical rendering across devices. For a quick way to use this same 16-step layout as a learning aid, see the guide to sketching a 16-step drum beat for free.
Sound Behavior and Browser Variables
All three sounds are synthesized at playback time using browser Web Audio nodes, so no audio samples are downloaded and no external sample license applies. The kick is a short sine oscillator whose frequency drops rapidly while its gain decays, which produces a punchy low-end thump. The snare uses a freshly generated noise buffer shaped by a high-pass filter and a gain envelope, while the hi-hat uses a shorter, quieter noise burst with a higher high-pass cutoff. Because the snare and hi-hat rely on randomly generated noise, each hit is slightly different from the last.
That synthesized character means tone can vary with browser audio implementation, output hardware, sample rate, and the random noise generated for each snare or hi-hat hit. AudioContext is created only after you press Play, which respects browsers that require a user gesture before audio starts. Stop, a new start attempt, a playback error, and component unmount all clear the scheduling timer, stop and disconnect the tracked audio source nodes, empty the source set, and close the current AudioContext. An asynchronous resume is generation-checked, so a late completion cannot accidentally restart audio after Stop or unmount.
Keep your device volume moderate before pressing Play, especially with headphones, because synthesized transients can sound louder on some output systems. The tool is best for sketching straight sixteenth-note ideas, learning step sequencing, or testing a basic pulse; for anything beyond that, treat the pattern as a starting concept and move it into a fuller production environment.