Create drum patterns on a step sequencer grid with multiple kits, tempo control, and loop playback.
A step sequencer drawn as a 16-column grid: each row is one drum sound from the selected kit, and every cell you light triggers that sound on that step. Playback sweeps the grid at the tempo you set and loops the measure endlessly, so you hear the pattern the way it will repeat. Everything runs in the page, and nothing you build is uploaded. The most common surprise is scale: the grid is one 4/4 measure of 16th notes, not 16 beats, so at 120 BPM the whole loop lasts just 2 seconds and each step is 125 ms.
A concrete input and expected output from the current implementation.
Input
Pattern: kick on steps 1, 5, 9, 13; snare on steps 5 and 13; closed hat on steps 1, 3, 5, 7, 9, 11, 13, 15. Tempo: 120 BPM.
Expected output
A four-on-the-floor loop, 2.0 s long: kick fires at 0.00, 0.50, 1.00, and 1.50 s; snare at 0.50 and 1.50 s; hat at every 0.25 s from 0.00 to 1.75 s. In musical terms: kick on all four beats, snare backbeat on beats 2 and 4, hats on every eighth note.
Steps 1-4 are beat 1, 5-8 beat 2, 9-12 beat 3, and 13-16 beat 4, so the snare lands on beats 2 and 4, the classic backbeat. At 120 BPM a beat is 0.5 s and a 16th-note step is 0.125 s, so the 16-step loop takes 2.0 s.
The 16 columns are one 4/4 measure of 16th notes: columns 1-4 are beat 1, columns 5-8 beat 2, and so on. Each row maps to one sound in the selected kit, and a lit cell means that sound fires on that step. During playback a cursor sweeps left to right, triggering every lit cell in order, then returns to the first column and loops.
The tempo control sets the beat rate with fixed math: each beat lasts 60 seconds divided by the BPM, and each step lasts a quarter of that, since four steps fit in one beat. So the 16-step loop is four beats: 2.0 s at 120 BPM, 4.0 s at 60 BPM, 1.0 s at 240 BPM. Raising the tempo shortens every step equally; the pattern of lit cells is unchanged.
You are probably reading the 16 columns as 16 beats. They are one measure of 16th notes: four beats total. At 120 BPM the loop lasts 2 seconds, so each column fires every 125 ms; a kick in every column sounds like a 16th-note machine-gun run, not a walking beat. Halve the density, or lower the tempo, and the pattern will land as intended.
No, not on this grid. Every step is exactly the same duration and hits cannot be nudged between steps, so swung timing is not available. Placement tricks can suggest a lazy or urgent feel - offbeat hats, a syncopated kick, a snare moved off the backbeat - but the underlying clock stays strictly straight. If you need genuine swing, this tool is not the one for it.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Interactive periodic table - click elements, enter quiz mode, and guess elements from their properties. Gamified learning.
Explore the periodic table with element details, properties, and category filtering.
Browse and search ASCII, Unicode, and binary character codes with copy-to-clipboard.
Test your knowledge of semantic HTML elements with quizzes and best-practice tips.
Structured typing lessons with finger placement guide. Track WPM improvement over time with localStorage persistence.
Timed multiplication drills with accuracy tracking per table (1-12). Progress chart saved across sessions.