Latency and Synchronization in Web Audio
summary
A live‑looping looper called resonator handles UI, input and output latency by measuring offsets (including a headphone hricko rang loopback trick and an optional piezo buzzer) and converting performance.now to audioContext time via getOutputTimestamp where available. Audio is captured in a worklet node or script processor, sent as timed chunks to a worker that stores about 1 second of history, swaps a temporary buffer for the assembled buffer, and supports starting/stopping/playing in the past plus “button press fudging” and pre‑roll pickups.
AI-written summary · about
chapters (9)
- 0:00Introduction to Web Audio
- 1:50Naive approach and latency problem
- 3:35Types of latency in Web Audio
- 6:09Measuring latency values
- 8:36Correcting for latency offsets
- 11:09Flexible recording system design
- 13:18Declarative audio playback API
- 15:25Advanced features with flexible recording
- 17:37Conclusion and key takeaways
related talks
42mBecoming Latency-Native
22mWhat Happens When the Music Starts? The Architecture of Browser Audio
47mHow live music is evolving in a post pandemic world
43mUsing a modern web to recreate 1980S horribly slow and loud loading screens
32mSequencing Audio Using React and the Web Audio API
20mOn Responsiven
27mDon't block the event loop!JavaScript Async for Effortless UX
35mIn the loop