Beat Lab
A drum machine hiding in a 404 page
A browser drum machine with a scratchable turntable, MIDI input and WAV export. ArtistDeck's 404 page runs a small version, and the 404 turns into an 808 while it plays.
- Role
- Direction + Build
- Year
- 2026
- Category
- Interactive
Stack
- Web Audio
- Web MIDI
- TypeScript
- Next.js
- Supabase
- Cloudflare Workers
02The problem
ArtistDeck sells to musicians, and its broken links led to the same dead end as everyone else's. That was a wasted page in front of exactly the right audience.
The fix had to be playable in seconds, stay light, and still be a real instrument.
03Build
A 16-step sequencer with ten voices, four kits and six genre presets, from House at 124 BPM to Breaks at 140. The turntable turns once per bar and can be grabbed. Dragging it scratches, with the pitch following the speed of the platter.
There are no sample files. Every sound is synthesized with Web Audio, which keeps the page light and leaves nothing to license. Notes are booked ahead on the audio clock, so timing holds when the page stutters.
The WAV export renders offline through the same audio chain as live playback, so the file matches what you heard. MIDI export writes one named track per instrument, with the 808 line kept in key. In browsers that support Web MIDI, USB drum controllers connect and General MIDI drum notes map automatically.
- Interactive Experiences
- Creative Development
- Frontend Engineering
04Result
Live at app.artistdeck.press/beats and on every ArtistDeck 404. Downloads ask for an account, so the page doubles as a sign-up door for the product. No usage or sign-up numbers are claimed.
05Role
- The instrument, its scope, and the 404-to-808 idea.
- No sample files: every voice is synthesized, so the page stays light and there is nothing to license.
- Ahead-of-time scheduling on the audio clock as a hard requirement, so timing survives a stutter.
- Export renders through the same chain as playback, so the file matches what you heard.
- The code was written in Claude Code sessions under my direction and review.
- Next.js, React, Web Audio, Web MIDI.
- Supabase for accounts and saved beats. Cloudflare Workers.