Building a musical instrument with the Web Audio API
summary
Demonstrates building a browser synth using the Web Audio API with oscillators, gain nodes and the important gotcha that once an oscillator is stopped it cannot be restarted so the code uses gain attenuation or replaces oscillators; shows a lookup-based tuning helper (Octavian library) instead of brittle math; wires getUserMedia face tracking into a face theremin (height = gain, x = pitch); uses WebSockets for a shared step sequencer, runs ~80 simultaneous oscillators in practice, and connects Johnny-Five Arduino buttons and a potentiometer to trigger notes.
AI-written summary · about
chapters (36)
- 0:00Intro
- 1:05Playalong
- 1:37Web Audio API
- 2:27Audio Context
- 3:59Destination
- 4:27Making music
- 5:10Oscillator
- 5:31Create Oscillator
- 5:57Connect Oscillator to Context
- 6:22Start Oscillator
- 7:01Disconnect Oscillator
- 7:46New Oscillator
- 9:19Oscillator Node
- 10:21Wave Shapes
- 10:52Oscillators
- 12:43Oscillator frequency
- 12:59Tuning forks
- 13:16Semitones
- 13:51Math
- 14:12The problem
- 15:46Octavian
- 16:25Audiophonic
- 18:44Adding oscillators
- 19:29Keyup event
- 19:51Why not just buy a keyboard
- 20:23Face Theremin
- 21:15Face Tracking Event
- 22:09Step sequencer
- 23:23User sequence
- 25:32Limitations
- 25:49Building a musical instrument
- 26:28WebSocket
- 26:56Demo
- 28:35Web Music
- 28:47Other APIs
- 29:14Pull Request
related talks
29mAudio Tags: Web Components & Web Audio
30mSteve Kinney - SeattleJS Conference 2017
34mTools for the 21st century musician
37mHow to code music?
28mChannel your inner rockstar with the web audio API
38mMaking Waves with the Web
44mBeats in the Browser - Coding Music with JavaScript
21mChanging live audio with the web-audio-api