Channel your inner rockstar with the web audio API

on YouTube ↗28m

" summary

Covers concrete Web Audio API mechanics: creating an AudioContext and nodes, loading audio via fetch/ArrayBuffer or getUserMedia input, oscillators with frequency and envelopes, Gain/WaveShaper/Delay/Convolver chains, and using an analyzer. Demonstrates a live guitar routed through a browser pedalboard website with distortion, flanger, reverb and tremolo applied — it works though sound quality is rough. Mentions a small library, an unfinished synthesizer, and recording via the MediaRecorder API and Firefox devtools.

AI-written summary · about

" chapters (15)

1. 0:00Start
2. 0:21Web Audio
3. 3:44How To Create Sounds
4. 6:53Linear Envelopes
5. 12:11Effects
6. 12:24Volume
7. 13:21Distortion
8. 14:23Delay Effect
9. 17:15Debugging
10. 17:57Live Audio
11. 21:05Flanger
12. 21:46Reverb
13. 24:30Synthesizer
14. 26:05The Media Recorder Api
15. 26:38Create a Virtual Input on Your Laptop

" related talks

• 29mCode, Play & Rock 'n' Roll: A WebAudio ExperimentArmagan Amcalar · JSConf Iceland 2018
• 33mCode, Play & Rock 'n' Roll: A WebAudio ExperimentArmagan Amcalar · code.talks 2023
• 21mChanging live audio with the web-audio-apiSam Bellen · JSConf Budapest 2016
• 22mChanging Live Audio with the Web-Audio-ApiSam Bellen · AmsterdamJS Conference 2017
• 25mJavaScript, JavaScript…. Rocks You!Vitalii Bobrov · NationJS Frontrunners 2019
• 46mMaking the Web Rock: The Web Audio APIChris Wilson · HTML5DevConf 2013
• 19mChanging live audio with the web-audio-apiSam Bellen · Frontend United 2016
• 38mEverybody dance now with Web Audio APIJaume Sanchez Elias · FutureJS 2014