Drum machine
Build a 16-step drum sequencer using the Web Audio API.
Show full promptHide full prompt
Build a 16-step drum sequencer using the Web Audio API. Use HTML, CSS, and JavaScript as needed. Write it to `index.html` in the current working directory using your file tools. Inline your own CSS and JavaScript. Do not use external assets, CDNs, or network requests. No third-party libraries are provided. Required behavior: - Show four labeled rows for kick, snare, hi-hat, and clap, each with 16 independently toggleable steps. Start with a simple audible pattern. - Treat the 16 steps as one bar of sixteenth notes in 4/4 time. Provide Play, Stop, Clear, and a BPM control from 60 to 180. - During playback, highlight the current step and synthesize the enabled drum voices. Editing steps or BPM must affect playback without creating duplicate sequences. - Stop cancels future hits and resets the playhead to the first step. Clear disables all steps. Starting again uses the currently displayed pattern. - Unlock audio through a user gesture and synthesize distinct percussion sounds from oscillators/noise and envelopes; do not load audio files. Verify: Toggle a step and start playback. Check that the playhead advances across the grid and responds to a BPM change. Stop and start again, checking that the displayed pattern is retained and the playhead restarts from the first step.
Latest of 2 prompt revisions (run 2026-10-29) · each run page shows its exact prompt
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
Stopped by an API error ▶ preview · view live
Timed out ▶ preview · view live
▶ preview · view live
▶ preview · view live
Timed out ▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
Stopped by an API error ▶ preview · view live
▶ preview · view live
Not measured in latest evaluation ▶ preview · view live
Stopped by an API error ▶ preview · view live
▶ preview · view live
▶ preview · view live
Stopped by an API error ▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
Timed out ▶ preview · view live
▶ preview · view live
▶ preview · view live
Stopped by an API error ▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
Stopped by an API error ▶ preview · view live
▶ preview · view live
▶ preview · view live
Timed out ▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
Stopped by an API error ▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
Timed out ▶ preview · view live
▶ preview · view live
Stopped by an API error ▶ preview · view live
▶ preview · view live
▶ preview · view live
Stopped by an API error ▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
Stopped by an API error ▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
Stopped by an API error ▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live
▶ preview · view live Error: agent produced no index.html
See transcript →Error: agent produced no index.html
See transcript →agent produced no index.html
See transcript →agent produced no index.html
See transcript →agent produced no index.html
See transcript →agent produced no index.html
See transcript →agent produced no index.html
See transcript →agent produced no index.html
See transcript →agent produced no index.html
See transcript →agent produced no index.html
See transcript →agent produced no index.html
See transcript →agent produced no index.html
See transcript →