Play it now → frysch.github.io/beat-kitchen
A musical kitchen in your browser. Turn the knobs, pour some sauce on top, and out comes a looping track — no music knowledge required. Every sound is synthesized live with the Web Audio API: no samples, no backend, no framework.
- ▶ Power — the round switch starts & stops the music.
- Knobs — Cuisine picks the genre, Spice the scale, Magic Sauce drenches the whole mix in effects (🌶️ stirs up a new sauce), plus Tempo and Volume.
- Faders — Chop, Sprinkle, Stock, Simmer, Garnish, Main and Side each control one instrument. The little purple knob adds sauce to just that instrument, 🎲 cooks up a new melody/beat, 🌶️ serves a new sound.
- Cooking instructions — the strip at the bottom is the song's sections. + adds one, − / + changes its length, ⧉ duplicates, ✕ removes, drag to reorder (long-press on touch), and click one to season only that section.
- 🎲 New recipe — a fresh random song. 🧽 Wash up — an empty canvas to build on.
- 💾 Save / 📂 Songs — songs are kept in your browser's localStorage. 🔗 Share copies a link.
- Export — ⌘/Ctrl+E records one full pass and downloads an MP3; ⌘/Ctrl+M saves a MIDI file for your own music software.
- 🎛️ MIDI — map a hardware controller to the knobs, faders and pads (Chrome-family browsers).
Works on phones too — same kitchen, smaller stove.
npm install
npm run dev # local dev server
npm run build # production build → dist/Plain TypeScript + Vite. The interesting bits:
src/song-engine.ts |
Web Audio graph, scheduler, sections & mixing |
src/compose.ts |
pattern / melody generation |
src/voices.ts |
synth voice definitions |
src/main.ts |
all UI wiring |
Two dev-only playgrounds live behind URL hashes when running npm run dev: #instruments (voice editor) and #patterns (step-grid lab).
Deployed to GitHub Pages automatically on every push to main.