The Man who Sold the Amp: How to Process Music with JS

on YouTube ↗30m

" summary

Live code shows how to take a guitar into the browser and process it in real time using Web Audio API and getUserMedia with audio constraints to disable echo cancellation and reduce latency. It implements volume with GainNode, harmonic shaping via WaveShaperNode with recalculated lookup tables, cabinet color with impulse response convolution, a three‑band EQ (low/high shelf and peaking filters) and a wet/dry reverb path. The demo is open source and runs live, recreating wah, overdrive and distortion flavors.

AI-written summary · about

" chapters (12)

1. 0:00Start
2. 2:38Guitar Stack
3. 3:58Media Stream Constraints
4. 5:44Gain Node
5. 9:30Overdrive vs Distortion vs Fuzz
6. 10:09Wave Shaper Node
7. 16:38Impulse Response
8. 17:20Convolver Node
9. 18:34Biquad Filter Nodes
10. 24:20Connect Nodes
11. 27:58Recap
12. 28:37Rock it!

" related talks

• 25mJavaScript, JavaScript…. Rocks You!Vitalii Bobrov · NationJS Frontrunners 2019
• 29mJavaScript, JavaScript…. Rocks You!Vitalii Bobrov · JSConf EU 2019
• 29mCode, Play & Rock 'n' Roll: A WebAudio ExperimentArmagan Amcalar · JSConf Iceland 2018
• 34mBuilding a Guitar Amplifier Using the Web Audio APINemanja Miljković · Heapcon 2019
• 33mCode, Play & Rock 'n' Roll: A WebAudio ExperimentArmagan Amcalar · code.talks 2023
• 21mChanging live audio with the web-audio-apiSam Bellen · JSConf Budapest 2016
• 19mChanging live audio with the web-audio-apiSam Bellen · Frontend United 2016
• 28mChannel your inner rockstar with the web audio APISam Bellen · FrontCon 2018