Changing Live Audio with the Web-Audio-Api

on YouTube ↗22m

" summary

Recreates stompbox effects inside a browser using Web Audio API and navigator.getUserMedia to feed an AudioContext chain; implements gain node volume, wave shaper distortion, delay with feedback loop, oscillator-driven flanger and tremolo, and a convolver node for reverb. Packs effects into a small library, controls them from a foot controller (Tessel over the network) and from audience phones; live demo mostly works with spiky network/noise issues, and compatibility is best on Chrome/Firefox (iOS Safari lacks getUserMedia).

AI-written summary · about

" chapters (13)

1. 0:00Start
2. 1:51Create a New Audio Context
3. 3:07Add Effects
4. 3:20The Gain Node
5. 4:39Distortion
6. 4:53Wave Shaper Note
7. 5:13Wave Shaper
8. 6:20Delay
9. 7:44Flanger
10. 12:16Dynamics Compressor
11. 14:15Reverb
12. 15:04Web Midi Api
13. 20:39Does It Work on Android Chrome

" related talks

• 19mChanging live audio with the web-audio-apiSam Bellen · Frontend United 2016
• 21mChanging live audio with the web-audio-apiSam Bellen · JSConf Budapest 2016
• 28mChannel your inner rockstar with the web audio APISam Bellen · FrontCon 2018
• 25mJavaScript, JavaScript…. Rocks You!Vitalii Bobrov · NationJS Frontrunners 2019
• 33mCode, Play & Rock 'n' Roll: A WebAudio ExperimentArmagan Amcalar · code.talks 2023
• 29mJavaScript, JavaScript…. Rocks You!Vitalii Bobrov · JSConf EU 2019
• 30mThe Man who Sold the Amp: How to Process Music with JSVitalii Bobrov · JSConf Korea 2019
• 29mCode, Play & Rock 'n' Roll: A WebAudio ExperimentArmagan Amcalar · JSConf Iceland 2018