Audio Tags: Web Components & Web Audio
summary
Creates a playable synth by wrapping the Web Audio API in Web Components: custom elements for oscillators, mixer, filter and keyboard that connect in a DOM-based audio graph. Demonstrates a two-oscillator patch with a low‑pass filter, start/stop scheduling, gain normalization to avoid clipping, and MIDI note numbers for pitch mapping (MIDI note numbers used). The prototype runs in-browser, sounds rough but functional, exposes declarative attributes and events, and is published as a breakable experimental boilerplate.
AI-written summary · about
chapters (27)
- 0:00Intro
- 1:48Music
- 2:13Tiny Noise
- 2:37Heidi
- 5:06Flame
- 7:15Modular
- 8:10Firefox Tools
- 8:29Web Components
- 12:28Web Components Example
- 13:18Mixer
- 14:34Chain
- 14:44Silicone
- 15:41JusticeCop
- 16:23Filters
- 17:08Low Pass Filter
- 18:23Free Information
- 18:33Oscillators
- 19:05Filter
- 19:27Structure
- 22:06Stop
- 22:36Frequency
- 24:13Dispatch
- 25:01Delete
- 25:21Demo
- 26:59rockstars
- 27:26the poor man
- 28:14conclusion
related talks
30mBuilding a musical instrument with the Web Audio API
44mBeats in the Browser - Coding Music with JavaScript
46mMaking the Web Rock: The Web Audio API
34mTools for the 21st century musician
40mBeats in the Browser - Coding Music with JavaScript
37mHow to code music?
28mChannel your inner rockstar with the web audio API
25mHow To Be A Web A/V Artist