The right approach to an online drum machine is a 16-step browser sequencer that accepts whole-number BPM from 40 to 240 and synthesizes kick, snare, and hi-hat voices at playback time — a tool that lets you sketch a beat, learn step sequencing, or test a tempo without installing software. The grid is always four quarter-note beats divided into sixteen equal sixteenth-note steps, and each step lasts 60 ÷ BPM ÷ 4 seconds. Choosing the right approach means matching the tool to the job: for production arrangement, MIDI synchronization, swing, recording, or export, the right move is to transfer the pattern idea to a dedicated music application. The Online Drum Machine is built for the narrower task of sketching straight sixteenth-note ideas and hearing them loop, which is why its scope is deliberately small and its controls deliberately few. What follows is a concrete way to decide whether this approach fits your goal, how to drive the tool step by step, and exactly which features it does and does not provide.
Match the Approach to Your Goal
The phrase "online drum machine" covers a wide range of tools, and the right approach depends on what you want from one. Some readers want a quick sketchpad for sixteenth-note ideas, some want to practice how a beat is built cell by cell, and some need sample-accurate production rendering with effects and stems. The Online Drum Machine at /audio/drum-machine/ is built for the first two jobs. It is a compact 16-step rhythm sequencer that runs entirely in your browser with synthesized kick, snare, and hi-hat voices, no account, no upload, and no external audio file. Because nothing is downloaded and nothing is sent away, opening the page is enough to start toggling cells and hearing results.
If your goal includes recording, rendering stems, locking to MIDI, applying swing, or driving a live performance, this is not the right approach. The tool does not provide those features, and the right move is to transfer your pattern idea to a dedicated music application rather than work around missing controls. A useful first question is: do I need a sketch or a finished arrangement? For a sketch, a browser sequencer is the right pick. For a finished arrangement, even a strong sketch needs to leave the browser.
When a 16-Step Sequencer Is the Right Approach
The grid in the Online Drum Machine is always four quarter-note beats divided into sixteen equal sixteenth-note steps. That single design choice lines up with several real use cases: sketching a beat one sixteenth at a time, learning how a pattern is built, or checking whether a tempo feels right before recording real drums. If you have never programmed a beat before, the right starting approach is to use the default four-on-the-floor example as a learning object rather than clearing the grid and guessing. The initial pattern places the kick on quarter-note positions, the snare on beats two and four, and the closed hi-hat on eighth-note positions. Working from that template is the right way to hear how step editing changes the feel before you replace the pattern one cell at a time.
A second reason a browser sequencer can be the right approach is the absence of sample files. The tool synthesizes all three voices at playback time using Web Audio nodes. The kick is a short sine oscillator whose frequency drops while its gain decays, the snare uses a freshly generated noise buffer shaped by a high-pass filter and gain envelope, and the hi-hat is a shorter, quieter noise burst with a higher high-pass cutoff. Nothing is downloaded and nothing is uploaded, so the page does not depend on a third-party sample host and cannot inherit a third-party sample license. If your goal is to test a tempo or a pattern without installing software, this approach is the right one. If you specifically want to avoid a sample pack for licensing or bandwidth reasons, the sample-free approach is described in detail in the sample-pack-free alternative guide.
Build and Play a Beat with the Online Drum Machine
These steps walk through the right way to drive the tool from a blank grid through a playing loop. Each step matches a verified control in the product.
- Enter a whole-number tempo in the BPM field. The field only accepts whole decimal values from 40 to 240. Empty input, decimal fractions, signs, exponent notation, unit text, and out-of-range values show a recoverable error. At 120 BPM, the default, each sixteenth-note step lasts 60 ÷ 120 ÷ 4 = 0.125 seconds and a full 16-step bar lasts 0.125 × 16 = 2 seconds.
- Toggle the kick, snare, and hi-hat cells across the grid to build a pattern. Each row is one instrument and each column is one sixteenth-note step. Click any cell to switch it on or off for that step; the cell's pressed state and an accessible label are exposed for screen readers.
- Press Play to start the loop. The AudioContext is created only after the first user press, which respects browsers that require a user gesture before audio starts. The moving step outline shows the current position as the generated rhythm loops. Color transitions on the outline are disabled when reduced-motion is requested.
- Edit cells while playback is running if you want to refine the beat. Pattern edits stay available during playback and are read by the upcoming scheduling window, so on-the-fly changes are safe.
- Press Stop to release audio and clear the scheduling timer, or press Clear pattern to turn all 48 cells off and start from silence. Stop closes the active AudioContext and disconnects the tracked audio sources.
If you change the BPM after Play, the current run stops and its audio context is released. Entering a valid value and pressing Play again starts cleanly at step one. This prevents the scheduler from continuing with a mixture of two tempos, which is the right behavior even though it feels like an interruption. Keep your device volume moderate before pressing Play, especially with headphones, because synthesized transients can sound louder on some output systems.
Read the Grid, Read the Tempo
The grid is the single visual contract for the pattern. Three rows, sixteen columns, one boolean per cell. Pure scheduling logic builds deterministic step numbers, timestamps, and active-track snapshots from that record, so what you see is exactly what the Web Audio events represent. Editing one cell is enough to change exactly one event in the next scheduling window; nothing else shifts underneath you.
BPM here follows the tempo meaning documented by MusicXML: quarter notes per minute. Because the grid splits each quarter note into four sixteenth-note steps, every step lasts 60 / BPM / 4 seconds. The table below shows the documented anchors at the boundaries and at the default tempo.
| BPM | Step duration (60 / BPM / 4) | Full 16-step bar |
|---|---|---|
| 40 | 0.375 s | 6.000 s |
| 120 | 0.125 s | 2.000 s |
| 240 | 0.0625 s | 1.000 s |
These anchors are documented product behavior, not estimates — they fall directly out of the tempo formula and the verified step grid. Anything inside the 40 to 240 range follows the same rule, so a 100 BPM tempo gives a step duration of 60 ÷ 100 ÷ 4 = 0.15 seconds and a bar of 0.15 × 16 = 2.4 seconds, while a 180 BPM tempo gives a step duration of 60 ÷ 180 ÷ 4 ≈ 0.0833 seconds and a bar of about 1.333 seconds. Playback itself uses a look-ahead scheduler: a lightweight browser timer checks every 25 milliseconds and places the next events up to 100 milliseconds ahead on the AudioContext timeline, as described in the Web Audio API specification. The audible sources use their exact scheduled Web Audio start times rather than treating JavaScript timer callbacks as the beat clock, which reduces ordinary main-thread timing jitter.
The MusicXML sound element defines tempo as quarter notes per minute, which is the same convention the drum machine uses. This shared meaning is the reason a 120 BPM loop in the browser feels like a 120 BPM loop in any other sequencer that follows the same definition.
Know What the Online Drum Machine Will Not Do
Choosing the right approach means knowing when to stop and switch tools. The Online Drum Machine is built for straight sixteenth-note ideas, learning step sequencing, and testing a basic pulse. It does not support swing, triplets, velocity, accents, per-track volume, effects, recording, export, MIDI synchronization, arbitrary time signatures, or background-tab guarantees. The shared scheduling functions are tested against eight independently calculated tempo anchors, the full 16-step wraparound, exact event offsets, and the structural invariant that three tracks of sixteen booleans always exist, but those tests verify the documented scope, not a feature wish list.
Two practical implications follow. First, if you need production arrangement, exact inter-device synchronization, rendered stems, or latency calibration, the right approach is to transfer the pattern concept to a dedicated music application rather than fight the browser. Second, the synthesized voices can vary slightly with browser audio implementation, output hardware, sample rate, and the random noise generated for each snare or hi-hat hit, so what you hear on one machine may not match another machine exactly. The tool is also not an AudioWorklet engine and does not promise sample-identical rendering across devices: heavy browser throttling, suspended tabs, device changes, and high system load can still affect playback. None of these are defects so much as the boundary of what a lightweight browser sequencer can guarantee.
Pick the Right Starting Pattern and Tempo
The right starting pattern is rarely a blank grid. The default four-on-the-floor example is a verified, tested starting point, and clearing it should be a deliberate choice. A useful rule of thumb is to set a tempo, listen to the default loop, and then replace one cell at a time until the pattern matches your idea. Lower tempos, closer to the 40 BPM boundary where each step lasts 0.375 seconds, are the right choice for sketching half-time ideas or learning where kick and snare fall in a bar. The default 120 BPM is the right choice for testing pop, rock, and house patterns because each step is a comfortable 0.125 seconds. Tempos near the upper boundary, closer to 240 BPM where each step is only 0.0625 seconds long, are the right choice for fast, sixteenth-note-dense grooves, although edits need to land precisely because the audible window is so short.
Beginners often do best with the 80 to 120 BPM band and the default pattern as their first lesson. If you want a more guided walk-through for first-time users, the beginner-focused beat maker walkthrough covers the same tool from a different angle. The grid is laid out to keep all sixteen steps usable on narrow screens without shrinking touch targets into unreadable marks, and horizontal scrolling preserves the step targets on phone-sized windows. Choosing the right approach is less about finding the most powerful tool and more about matching the tool to the job. For sketching a sixteenth-note loop, learning how a beat is built, or testing a tempo without installing software, the Online Drum Machine is the right tool — and the right approach is to start from the default pattern, edit one cell at a time, stay inside the 40 to 240 BPM range, and treat Stop and Clear pattern as the two reset points that keep the schedule clean.