The Web Audio Explanation I Wish I Had
summary
Adds synthesized note playback to abcjs using the browser Web Audio API and a small soundfont of per-note MP3s, caching ~88 piano samples so repeats avoid extra network cost. Requires a single shared AudioContext (resume on user interaction) and creates audio buffers then one-shot source nodes; source nodes are non-reusable. Finds practical polyphony well above 32 voices, but extreme tests (all notes on all instruments) take minutes to prepare. Measures unpredictable latency (recording ~1464 ms, direct tick ~109 ms), so timing needs compensation.
AI-written summary · about
chapters (14)
- 0:00Introduction and background
- 3:16Why browser audio matters
- 6:57Evolution of audio in browsers
- 9:06Web Audio API basics
- 13:01Converting music to playable audio
- 16:15Handling audio context resources
- 18:42Creating audio buffers
- 21:08Simple UI controls for playback
- 23:18Connecting audio to speakers
- 25:42User interaction and autoplay
- 27:28Browser limitations and quirks
- 30:03Latency and real-world timing
- 33:16Demo of latency impact
- 35:31Conclusion and open source call
related talks
46mMaking the Web Rock: The Web Audio API
38mEverybody dance now with Web Audio API
44mBeats in the Browser - Coding Music with JavaScript
41mOrchestrating the Web Audio API
07mGenerative Music In The Web Audio API
24mPlay Them Off, Keyboard App: Building a virtual piano in JavaScript
34mTools for the 21st century musician
29mAudio Tags: Web Components & Web Audio