Declarative Web Audio API

on YouTube ↗09m

" summary

Argues that Web Audio can be turned declarative by a tiny small DI framework using custom DOM events and dependency injection, demonstrates a 4‑component HTML volume control (AudioContext, MediaElementAudioSourceNode, GainNode, destination) implemented as Web Components, and shows Angular directives that extend AudioNodes and use RxJS interval for metronome timing. Connects Web MIDI input to a playable synthesizer, builds Jamigo (Guitar‑Hero + karaoke with WebAssembly pitch detection), and demos that the approach actually plays music and accepts live MIDI.

AI-written summary · about

" chapters (7)

1. 0:00Intro
2. 0:46Echo vs Declarative
3. 3:08AudioContext
4. 3:46Gain
5. 4:22Destination
6. 5:13Nodes
7. 6:27Music

" related talks

• 44mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · NDC Sydney 2024
• 40mLiveJS: Making Music with JavaScriptRuth John, Martin Schuhfuss, Matt Mckegg · ColdFront 2017
• 40mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · Copenhagen Developers Festival 2023
• 40mBeats in the Browser: Coding Music withJavaScriptRowdy Rabouw · Øredev 2023
• 29mMIDI A New Dimension in Controlling Your BrowserArmagan Amcalar · You Gotta Love Frontend 2019
• 37mDOMStep: Audio Synthesis, AI and a JavaScript Dance PartyJamison Dance · Strange Loop 2014
• 23mAudio and Video ManipulationDavit Davtyan · JS Conf Armenia 2021
• 40mScalable JavaScript architectureFrank Baele · Frontend United 2016