Drum 'n' JS
summary
Builds a fully featured drum machine in Angular using the WebAudio API and proves it works by scheduling audio ahead instead of relying on setInterval to avoid dropped beats. Swaps objects for arrays, favors mutation over copying to shave latency, and replaces linear searches with lookup tables that show 42× faster lookups and examples like 27× speedups on unmute operations. Benchmarks use JSBench and console.time and the result plays reliably.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 1:50Physical to electronic music
- 3:59Digital drum machine attempts
- 5:23Web Audio API discovery
- 6:24Effects and oscillators
- 9:24Groove Box with TypeScript
- 10:07Timing challenges
- 12:11Debugging performance
- 13:16Cost of spread and map
- 14:21Mutations vs immutability
- 15:26Array init with falsy
- 15:48Objects to arrays
- 16:52Lookup tables for offsets
- 17:34Maps vs objects
- 18:18Higher-order functions hurt
- 19:20Angular change detection
- 20:26Measuring with JS Bench
- 21:09Optimizing NX and Butterfly
- 21:31Live demo
- 23:31Key takeaways
related talks
31mBeats in the Browser - Coding Music with JavaScript
44mBeats in the Browser - Coding Music with JavaScript
40mLiveJS: Making Music with JavaScript
26mBeats in the Browser - Coding Music with JavaScript
30mJavaScript Patterns For Contemporary Dance Music
31mI Play the JavaScript
41mOrchestrating the Web Audio API
46mMaking the Web Rock: The Web Audio API