Step Sequencer
A 16-step grid that actually keeps time.
IntermediateWeb appMedia12–24hAI-buildable 4/5no setupworth shipping
A drum sequencer with a step grid, adjustable tempo and per-track sounds. The real lesson is that setInterval is not a clock — accurate musical timing needs the Web Audio API's own scheduler, and hearing the difference is the best way to learn it.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- A grid of steps across several instrument tracks
- Clicking a cell toggles that step on or off
- Play and stop controls with an adjustable BPM
- A playhead indicates the current step
- Timing stays accurate rather than drifting over time
- Per-track volume and mute
- Patterns persist across reloads
The interesting part
- Scheduling ahead with the audio clock instead of setInterval
- Keeping the visual playhead in sync with audio that is scheduled early
- Loading and decoding samples before the first play
Once it works
- Add pattern chaining into a song arrangement
- Add swing and shuffle
- Let users load their own samples
Suggested stack
reacttypescripttailwind