Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript, JavaScript…. Rocks You!

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 🤘!


Vitalii Bobrov

May 10, 2019


  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

  11. None
  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

  20. None
  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”

    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