Skip to content
Lizely

Online Drum Machine

Build and play a 16-step kick, snare, and hi-hat beat locally with no samples or uploads.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Enter a whole-number tempo from 40 to 240 BPM; BPM represents quarter notes per minute.
  2. 2.Toggle kick, snare, and hi-hat cells across the sixteen-step grid to build a pattern.
  3. 3.Press Play to loop the synthesized beat, Stop to release audio, or Clear pattern to turn every step off.

About Online Drum Machine

Drum Machine is a compact 16-step rhythm sequencer that runs entirely in your browser. It provides three tracks: kick, snare, and hi-hat. Click any cell to turn that instrument on or off for the corresponding sixteenth-note step, choose a whole-number tempo from 40 to 240 BPM, and press Play. The moving step outline shows the current position while the generated rhythm loops. Stop releases playback resources, and Clear pattern turns off all 48 cells so you can begin with silence. No account, upload, external audio file, sample library, or network calculation is required. The initial pattern is a simple four-on-the-floor example with kick on quarter-note positions, snare on beats two and four, and closed hi-hat on eighth-note positions. It is only a starting point and can be replaced one step at a time. The grid is always four quarter-note beats divided into sixteen equal sixteenth-note steps. In this tool BPM means quarter notes per minute, matching the tempo meaning documented by MusicXML. A quarter note therefore lasts 60 divided by BPM seconds, and each sixteenth-note step lasts one quarter of that duration: 60 / BPM / 4. At the default 120 BPM, every step is 0.125 seconds apart and the full 16-step bar lasts 2 seconds. At the lower 40 BPM boundary, a step lasts 0.375 seconds and the bar lasts 6 seconds. At the upper 240 BPM boundary, a step lasts 0.0625 seconds and the bar lasts 1 second. The range is a deliberate usability and scheduling guard, not a claim about the limits of musical tempo. Tempo input is strict: only whole decimal numbers from 40 through 240 are accepted. Empty input, decimal fractions, signs, exponent notation, unit text, and values outside the range show a recoverable error. Editing tempo during playback stops the current run and releases its audio context; pressing Play after entering a valid value starts cleanly at step one. This prevents an old scheduler from continuing with a mixture of two tempos. Pattern edits remain available during playback and are read by the upcoming scheduling window. All three sounds are synthesized at playback time with browser Web Audio nodes. The kick is a short sine oscillator whose frequency drops rapidly while its gain decays. The snare uses a freshly generated noise buffer shaped by a high-pass filter and gain envelope. The hi-hat uses a shorter, quieter noise burst with a higher high-pass cutoff. These are intentionally simple synthetic voices rather than recordings of physical drums. Their tone can vary slightly with browser audio implementation, output hardware, sample rate, and the random noise generated for each snare or hi-hat hit. Because there are no downloaded samples, starting the tool does not contact a sample host and cannot inherit a third-party sample license. Playback 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. The audible sources use their exact scheduled Web Audio start times rather than treating JavaScript timer callbacks as the beat clock. This approach reduces ordinary main-thread timing jitter, but it is not a digital audio workstation, an AudioWorklet engine, or a promise of sample-identical rendering across devices. Heavy browser throttling, suspended tabs, device changes, high system load, and operating-system audio latency can still affect what you hear. The shared pure scheduling logic builds deterministic step numbers, timestamps, and active-track snapshots. Tests cover eight independently calculated tempo anchors, the full 16-step wraparound, exact event offsets, initial pattern locations, immutable toggling, clearing, malformed tempo values, and structural invariants for three tracks of sixteen booleans. Production playback consumes the same pattern and timing functions, avoiding a separate formula that could drift away from the tested behavior. AudioContext is created only after the user presses 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 tracked AudioScheduledSourceNode objects, empty the source set, and close the current AudioContext. An asynchronous resume is generation-checked so a late completion cannot restart audio after Stop or unmount. If browser audio initialization or event scheduling fails, the tool reports a recoverable message and allows another Play attempt instead of retaining a false playing state. The step indicator uses only color and an outline; color transitions are disabled when reduced-motion is requested. Each grid button also exposes an on/off pressed state and a descriptive accessible label. Horizontal scrolling keeps all sixteen steps usable on narrow screens without shrinking touch targets into unreadable marks. This tool is best for sketching straight sixteenth-note ideas, learning step sequencing, or 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. If you need production arrangement, exact inter-device synchronization, rendered stems, or latency calibration, transfer the pattern concept to a dedicated music application. Keep your device volume moderate before pressing Play, especially with headphones, because synthesized transients can sound louder on some output systems.

Methodology & sources

The pattern is a validated record of three unique tracks, each containing exactly sixteen booleans. BPM accepts whole decimal values from 40 through 240. MusicXML defines tempo here as quarter notes per minute; four sixteenth-note steps divide each quarter note, so step duration is 60 / BPM / 4 seconds. Pure logic builds AudioContext-time events with modulo-16 wraparound and snapshots active tracks. Playback polls every 25 ms and schedules up to 100 ms ahead using those shared functions. Kick uses an enveloped sine oscillator; snare and hi-hat use generated noise buffers with high-pass filters and gain envelopes. No external samples are loaded. AudioContext construction occurs only inside Play. Stop, restart, errors, and unmount clear the timer, stop and disconnect tracked sources, and close the context. Scope excludes swing, triplets, recording, export, MIDI, velocity, effects, and sample-accurate cross-device guarantees.

Frequently asked questions

Does this drum machine download or upload audio samples?
No. The kick is generated with an oscillator, while the snare and hi-hat use short noise buffers created locally by Web Audio. No files are uploaded and no external sample library is fetched.
How is the timing calculated?
BPM is treated as quarter notes per minute. The grid has four sixteenth-note steps per quarter note, so each step lasts 60 divided by BPM divided by 4 seconds. Events are scheduled on the AudioContext timeline with a short look-ahead window.
Why does changing BPM stop playback?
Stopping before applying a new tempo prevents already scheduled events at the previous tempo from overlapping a new schedule. Enter a valid whole number from 40 to 240 and press Play again.
Can I export, record, add swing, or connect MIDI?
Not in this focused version. It provides a straight 16-step loop with three synthesized voices, Play, Stop, toggles, and Clear. Recording, export, swing, velocity, effects, and MIDI are outside its scope.

Related tools