drums Grid Editor16 steps (1/16)
About this app— Loopcade
A browser step sequencer with synth voices, drum kits, master effects, and WAV/WEBM/JSON export.
Loopcade is a step sequencer for the browser. You paint notes into 1/16-step grids across five channels — drums plus four pitched voices — tweak each voice's synth parameters and a master effects chain, and bounce the loop to WAV or WEBM. All sound is synthesized live with the Web Audio API; there are no samples.
The session ships with five presets (Chill Lofi, Retro Arcade, Heavy Techno, Ambient Space, Phrygian Rave) and five scales (Neo-Lofi, Arcade Dream, Cyber Techno, Phrygian Gate, Cosmic). The grids are always 8 or 16 visible steps; the underlying array is 32 cells, which the JSON export preserves.
How it works
The audio engine is a single class with one live AudioContext for playback and a fresh OfflineAudioContext per export. The signal graph is: per-instrument voice → mixer bus → distortion (WaveShaper, 4x oversample) → BiquadFilter (lowpass / highpass / bandpass) → split into dry, DelayNode (up to 2 s with feedback), and ConvolverNode reverb (1.8 s impulse, generated in-app) → master gain → DynamicsCompressor limiter (−1 dB, 12:1) → AnalyserNode → destination. The scheduler is a 50 ms setInterval running inside a Web Worker, looking 200 ms ahead and queuing note events at sample-accurate times.
All voices are oscillator + envelope — no samples. The kick is a sine sweep from 150 Hz to 42 Hz over 0.12 s (envelope taken from the Bass synth config); the snare is a 180 Hz sine + bandpass-filtered white noise; the clap is a triple-spike noise burst through a 1200 Hz bandpass; the hi-hat is noise through a 7500 Hz highpass with a 45 ms decay. The pitched voices (Bass, Lead, Pluck, Pad) are main-osc + sub-osc / detune-osc stacks, each with its own envelope shape and a bouncy lowpass for Bass.
Right sidebar tabs: Session (oscilloscope, BPM ± buttons 40-240, scale picker, 8/16-step toggle, Import JSON, Sound Library of 5 presets), Synth (waveform picker — sine / triangle / sawtooth / square; Decay 0.05-4.0 s; LP Cutoff 100-5000 Hz; Chorus Detune 0-40 cents), and Effects (Reverb Wet 0-0.9, Echo Delay wet 0-0.8 with feedback 0-0.85, Saturation 0-0.4 with a 'might hum' warning above 0.2, and a master Filter with lowpass / highpass / bandpass toggle and cutoff 150-8000 Hz).
Try these
Growling acid bass on a stable groove
Load 'Phrygian Rave'. On the Drums tab, hit 'Start Beat' to auto-fill kick and snare. Open the Synth tab for Bass, raise Decay to about 0.6 s, lower LP Cutoff to about 200 Hz. In Effects, push Saturation to 0.3 and Filter Cutoff to about 2500 Hz. Slow the tempo with the − button to around 96 BPM.
Custom lo-fi loop in 30 seconds
Start from 'Chill Lofi'. On Drums, clear the Clap row and add two hi-hats on beat 3 (steps 6 and 14). On Lead, clear the existing notes, then click the top row at steps 0, 8, 16, 24 for a four-on-the-floor lead. In Effects, drop Filter Cutoff to about 600 Hz with the lowpass toggle, and raise Reverb Wet to about 0.65.
Techno pattern with a bandpass sweep
Load 'Heavy Techno'. On Bass, click the D3 row (row 4) on every odd 16th (steps 1, 3, 5, ..., 15) for a hypnotic accent. In Effects, switch the Filter to bandpass at about 1500 Hz, and raise Reverb Wet to 0.5. Export as WEBM to keep the file small.
Open ambient pad with a long tail
Load 'Ambient Space'. On Pad, clear and then click the bottom row (G2) and top row (G4) at steps 0, 8, 16, 24 for an open fifth that rings across the bar. Leave Reverb Wet at 0.7, raise Echo Delay Wet to about 0.55 and Feedback to about 0.7. Switch the scale to Phrygian Gate in the Session tab to reskin the whole loop.
FAQ
Are the grids really 8 or 16 steps, or bigger?
Internally every grid is a 32-cell array. The 8/16 buttons in the Session tab just change how many cells are visible and played. The JSON export keeps the full 32 cells, so cells past the visible window are preserved and will play if you re-open the same file with a higher step count.
What does the WAV export actually contain?
A 16-bit stereo PCM file, sample rate matched to the live context (falling back to 44.1 kHz). The total duration is exactly stepDuration × totalSteps plus 2.0 s of padding, so reverb and delay tails aren't clipped at the end. There is no post-render normalization.
Why does the Drums tab show the Bass synth panel?
The kick voice reuses the Bass synth's decay and volume for its envelope, so the Bass panel is the natural tuning workspace for the kick. Snare, clap, and hi-hat have their own hard-coded envelopes in the engine and aren't affected by the panel.
Is there a cap on simultaneous voices?
Not explicitly. A master DynamicsCompressor limiter (threshold −1 dB, ratio 12:1) sits right before the output, and the randomize function caps distortion at 0.15 to avoid the 'heavy saturation might hum' warning that appears above 0.2.
Can I save a custom pattern for later?
Use the toolbar Export → JSON. The downloaded file contains the full pattern (name, BPM, scale, all 5 grids, all 4 synth voice configs, and the effects chain). Drag it back in via Import JSON in the Session tab to round-trip your work.
Related tools
Comments
Comments are not configured yet.
This site uses Giscus (GitHub Discussions) for comments. To enable, set the following environment variables and redeploy:
NEXT_PUBLIC_GISCUS_REPO=owner/repo NEXT_PUBLIC_GISCUS_REPO_ID=R_xxx NEXT_PUBLIC_GISCUS_CATEGORY=Comments NEXT_PUBLIC_GISCUS_CATEGORY_ID=DIC_xxx
The values come from giscus.app after you enable Discussions on the GitHub repo.