Mom, I built a synthesizer in my browser! 😱 🎹 🎵
summary
A developer rebuilt a classic KORG MS-20 synthesizer in the browser using the WebAudio API, covering oscillators, nodes, envelope generators and frequency modulation to recreate electronic-sound components. The project also uses web technologies for accessibility, a (p)react component UI, signal-based reactivity/state management, and automated tests to make the synth robust and usable in modern browsers.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 3:59Music as vibration and math
- 7:12Web Audio API basics
- 12:12Coram MS20 analysis
- 14:17Project architecture
- 18:13Keyboard and frequencies
- 24:10Oscillators and sound
- 27:44Custom waves with Fourier
- 30:33State with Signals
- 34:08Potentiometers and UI
- 37:57High-pass and low-pass filters
- 40:24Envelope generators
- 43:12Accessibility and tests
- 45:20Live demo
- 46:48Lessons learned
related talks
30mBuilding a musical instrument with the Web Audio API
29mAudio Tags: Web Components & Web Audio
40mBeats in the Browser - Coding Music with JavaScript
26mAll your browsers are belong to me
44mBeats in the Browser - Coding Music with JavaScript
31mBuilding a JavaScript Video Synthesizer for Live Performance
29mCode, Play & Rock 'n' Roll: A WebAudio Experiment
38mMaking Waves with the Web