JavaScript, JavaScript…. Rocks You!

Take your old scratched Les Paul or Stratocaster from the case and fill all the space around with warm riffs. I’m going to show how to transform the code into Kirk Hammett’s wah-wah, Stevie Ray Vaughan’s overdrive and Kurt Cobain’s distortion. You’ll learn how to parse audio input in real-time using JavaScript and the Web Audio API.

I’ll be jamming live on stage with my guitar to demo every code example, and we’ll also use WebRTC to jam with friends across the world! After this talk, you will be familiar with the principles behind pedal sound effects and how to create them in code. Let’s rock the Web 🤘!

Transcript

1. JavaScript, JavaScript… Rocks You!
2. Vitalii Bobrov Lead JS Engineer @ EPAM @AngularWroclaw organizer Loves rock music @bobrov1989 https://bobrov.dev
3. Wroclaw, Poland
4. Web Audio
5. a uni-directed graph containing audio nodes https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
6. Uni-directed Graph input output effects
7. Guitar Stack input output
8. Guitar Stack input output effects
9. Connect a Guitar
10. Stream Source https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamAudioSourceNode
12. Media Stream Constraints https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio
13. Connect to Destination https://developer.mozilla.org/en-US/docs/Web/API/AudioDestinationNode
14. Volume Control
15. Gain Control sin(x) 0.5sin(x)
16. Gain Node https://developer.mozilla.org/en-US/docs/Web/API/GainNode
17. Distortion
18. group of effects shaping a sound wave
19. Overdrive Distortion Fuzz Effects
21. Wave Shape sin(x) (PI + k) * x / (PI + k * abs(x))
22. Distortion vs Overdrive vs Fuzz
23. Wave Shaper Node https://developer.mozilla.org/en-US/docs/Web/API/WaveShaperNode
24. Tone Control
25. Low Pass Filter
26. Biquad Filter Node https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode
27. Cabinet
28. Impulse Response a short sample with impulse characteristics record
29. Convolver Node https://developer.mozilla.org/en-US/docs/Web/API/ConvolverNode
30. Equalizer
31. Three Band Equalizer Bass < 500 Hz Middle ~1500 Hz Treble > 3000 Hz
32. Biquad Filter Nodes https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode
33. Reverb
34. Reverb Graph Channel Splitter Node Channel Merger Node “Dry”
 Gain Node “Wet”
 Gain Node Delay Node Biquad Filter Node Convolver Node
35. Reverb Nodes https://developer.mozilla.org/en-US/docs/Web/API/ChannelSplitterNode https://developer.mozilla.org/en-US/docs/Web/API/DelayNode
36. Connect Nodes https://developer.mozilla.org/en-US/docs/Web/API/ChannelMergerNode
37. Connect line to destination Gain Node Distortion Wave Shaper Node Biquad Filter Node Cabinet Convolver Node Reverb Channel Merger/Splitter Node Delay Node Recap
38. Rock it!
39. @bobrov1989 https://bobrov.dev https://github.com/vitaliy-bobrov/js-rocks