Create and play drum patterns with kick, snare, hi-hat, and percussion on a step sequencer.
A 16-step grid with one row per instrument (kick, snare, hi-hat, percussion), where every cell you click becomes a hit in a looping rhythm. Set the tempo, press play, and the pattern repeats endlessly, with the sound generated locally in your browser. The thing that surprises most people: the grid is one bar, not a song. Sixteen steps is four beats at any tempo, so the loop restarts after a couple of seconds, and any cell you leave switched on keeps sounding on every pass.
A concrete input and expected output from the current implementation.
Input
Program a 16-step loop at 120 BPM: kick on steps 1, 5, 9, 13; snare on steps 5 and 13; closed hi-hat on steps 2, 6, 10, 14; then press play.
Expected output
The loop lasts 2.0 seconds and repeats: each step is 125 ms (60 / 120 / 4) and the bar is 4 beats. Hits per step: 1 = kick, 2 = hat, 5 = kick + snare, 6 = hat, 9 = kick, 10 = hat, 13 = kick + snare, 14 = hat. Ten hits per cycle, an average of 2.5 hits per beat, looping without a gap.
At 120 BPM one beat is 0.5 s, so a 16-step bar spans 2.0 s and each sixteenth is 125 ms. The pattern is a four-on-the-floor kick with a backbeat snare on beats 2 and 4 and offbeat eighth-note hats, so those are the positions and the timing the loop plays.
Each row maps to one drum sound and each column to one sixteenth note of the bar. Toggling a cell arms a hit at that position; several cells in a row produce that instrument repeating at the spacing between them. A kick on step 1 sounds at the start of the loop, and hits on the same step in different rows sound simultaneously, so a kick and snare sharing step 5 play together.
Playback advances one cell per sixteenth note, wrapping from the last step back to the first without a gap. At tempo T, one step lasts 60 / T / 4 seconds, so the full loop takes 60 / T x 4 seconds: 2.0 s at 120 BPM, 1.5 s at 160 BPM. Changing the tempo re-times the same pattern; the sequence of hits is unchanged, only its speed.
Because the grid is one four-beat bar that loops. At 120 BPM the entire pattern lasts 2 seconds, and at 160 BPM only 1.5 seconds. That is normal for a step sequencer: the grid is a single phrase, not a song arrangement, so you change the feel by editing hits or tempo rather than by adding length.
No: the pattern lives in the page and is gone when you close it, and nothing is recorded or uploaded. If you want to keep a groove, write down the tempo and the enabled steps per row (for example, kick 1, 5, 9, 13; snare 5, 13) and rebuild it next time.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Create customizable checklists with groups, due dates, and priorities for any project.
Design a printable daily planner with time blocks, goals, and priority sections.
Measure your typing speed in WPM and accuracy with real-time feedback and stats.
Pomodoro timer with built-in ambient noise (rain, cafe, forest) generated via Web Audio API oscillators.
Stay focused with a customizable Pomodoro timer featuring work and break intervals.
A precise stopwatch with lap tracking, split times, and exportable results.