// the find
joshwcomeau/key-and-pad
🎹 Fun experiment with the Web Audio API 🎶
A browser-based synthesizer built by Josh Comeau as a Web Audio API experiment — keyboard plays notes, mouse controls an X/Y effects pad. It's a demo project rather than a reusable library, but the implementation choices are worth reading.
The Web Audio reconciler is the interesting part: instead of imperative audio updates scattered everywhere, it subscribes to the Redux store and calculates minimal diffs — same mental model as React's virtual DOM but for AudioNode graphs. Redux VCR integration is a clever use of action replay to record sessions as MIDI-like event streams rather than audio files. The component structure is clean and the separation between audio utilities and UI is genuinely well done. Tests cover reducers and the reconciler, which is more than most audio experiments bother with.
Hasn't been touched since 2022 and was already using older React/Redux patterns from 2016-era tooling — class components, pre-hooks Redux, Webpack 2 config hand-rolled in scripts/. The keyandpad.com domain appears to be down, so you can't actually see it running without building locally. Redux VCR was an external devtool that also stalled out, so that whole layer may not function anymore. No audio context handling for browsers that require user gesture to resume — a real problem today since autoplay policies have tightened considerably since this was written.