Drum machine · ling-2.6-flash

I'll build a complete 16-step drum machine with a clickable grid, synthesized sounds, and full playback controls right in one self-contained HTML file. Here's how it works: - **Grid**: 16 steps × 4 instrument rows (Kick, Snare, Hi-hat, Clap) — click to toggle on/off - **Synthesis**: Web Audio API generates all sounds procedurally (no samples needed) - **Playback**: Play/Stop button with transport, adjustable BPM (60–200) - **Visual feedback**: Active steps highlight in real time during playback

The drum machine has been created as a single-file web app at `/tmp/ws/index.html`. Open it in any modern browser. ### Features - **16-step grid** for Kick, Snare, Hi-hat, and Clap — click cells to toggle them on/off - **Procedural synthesis** using Web Audio API (no external samples) - Kick: sine sweep + noise thump - Snare: noise burst + decaying sine - Hi-hat: high-passed noise burst - Clap: band-pass filtered noise - **Play / Stop** transport with visual step playback feedback - **BPM control** slider (60–200 BPM) - Multi-color step indicators per instrument (pink=Kick, orange=Snare, purple=HiHat, blue=Clap) ### Usage 1. Click cells to build your 16-step pattern (each row is one instrument) 2. Set your desired BPM 3. Press **Play** to start the sequencer — active steps light up and pulse in real time 4. Press **Stop** to pause and reset the pattern pointer