Making Waves with the Web

on YouTube ↗38m

" summary

Builds a browser drone synthesizer that actually pulls live weather and maps specific attributes to oscillator pitch, filter cutoff/resonance, and LFO rates so the sound changes with temperature, wind, rain. Uses WebAudio API and higher‑level Tone.js, fetches data from open mateo.com, demonstrates filter sweeps, harmonics and resonant peaks, and shows a working WIP ambient soundscape driven by four voices (earth water air fire) that merge into a single output.

AI-written summary · about

" chapters (18)

1. 0:00Welcome
2. 1:22Group wave energizer
3. 2:03Data sonification
4. 3:08Weatherfortheblind project
5. 4:54Learning synthesis
6. 7:42Web Audio API
7. 10:11Making sound with oscillator
8. 12:18Gain and volume control
9. 14:48Oscillator wave shapes
10. 16:15Analyzing frequency spectrum
11. 18:21Shaping sound with filters
12. 23:18Adding resonance to filters
13. 26:56Moving sound with filter sweeps
14. 27:39Dynamic sound modulation
15. 30:49Ambient soundscapes
16. 31:33Tone.js library
17. 32:58Weather data sonification demo
18. 36:30Key takeaways

" related talks

• 44mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · NDC Sydney 2024
• 30mBuilding a musical instrument with the Web Audio APISteve Kinney · JSConf US 2015
• 40mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · Copenhagen Developers Festival 2023
• 33mWe ❤ Music & the WebMartin Schuhfuss, Tim Pietrusky · JSConf Budapest 2016
• 46mMaking the Web Rock: The Web Audio APIChris Wilson · HTML5DevConf 2013
• 40mLiveJS: Making Music with JavaScriptRuth John, Martin Schuhfuss, Matt Mckegg · ColdFront 2017
• 28mChannel your inner rockstar with the web audio APISam Bellen · FrontCon 2018
• 31mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · DevReach 2023