Code, Play & Rock 'n' Roll: A WebAudio Experiment

on YouTube ↗33m

" summary

Live guitar routes into the browser and is processed with a JavaScript pedal framework, claiming real‑time overdrive, delay and reverb implemented via pedalboard.js and exposed in a pure‑CSS pedal UI at pedals.io. Demonstrations use browser APIs: audio nodes, a waveShaper for distortion, an AudioWorklet for threading, plus WebRTC for collaborative jamming (works but shows noticeable latency) and Web MIDI to map hardware controllers. Most live demos succeed on desktop; mobile support is poor and monitoring latency complicates stage use.

AI-written summary · about

" chapters (13)

1. 0:00WebAudio experiment intro
2. 1:59Guitar pedals explained
3. 3:47Demo of pedals.io
4. 8:07WebAudio API
5. 11:01WebAudio architecture
6. 16:24Manipulating audio
7. 17:05Introducing pedalboard.js
8. 20:33Web MIDI API
9. 23:45Live MIDI demo
10. 27:08Live guitar effects
11. 29:36MIDI guitar demo
12. 30:42Karaoke with accompaniment
13. 32:37Closing remarks

" related talks

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