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

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

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

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

September 03, 2019
Tweet

More Decks by Vitalii Bobrov

Other Decks in Programming

Transcript

  1. Stream Source https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamAudioSourceNode try { const context = new AudioContext();

    const stream = await navigator.mediaDevices .getUserMedia({ audio: true }); } catch (err) { console.error(err); }
  2. Wave Shaper Node https://developer.mozilla.org/en-US/docs/Web/API/WaveShaperNode const waveShaper = new WaveShaperNode(context); waveShaper.curve

    = makeDistortionCurve(amount); function makeDistortionCurve(amount) { const k = amount * 150 + 50; const n = 8096; const curve = new Float32Array(n + 1); for (let i = 0, x: number; i <= n; ++i) { x = i * 2 / n - 1; curve[i] = (Math.PI + k) * x / (Math.PI + k * Math.abs(x)); } return curve; }
  3. Convolver Node https://developer.mozilla.org/en-US/docs/Web/API/ConvolverNode const convolver = new ConvolverNode(context); fetch('impulse.wav') .then(response

    => response.arrayBuffer()) .then(buffer => { context.decodeAudioData(buffer, decoded => { convolver.buffer = decoded; }); });
  4. Biquad Filter Nodes https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode const bassNode = new BiquadFilterNode(context, {

    type: 'lowshelf', frequency: 500 }); const midNode = new BiquadFilterNode(context, { type: 'peaking', frequency: 1500 }); const trebleNode = new BiquadFilterNode(context, { type: 'highshelf', frequency: 3000 });
  5. Reverb Graph Channel Splitter Node Channel Merger Node “Dry”
 Gain

    Node “Wet”
 Gain Node Delay Node Biquad Filter Node Convolver Node
  6. Reverb Nodes https://developer.mozilla.org/en-US/docs/Web/API/ChannelSplitterNode https://developer.mozilla.org/en-US/docs/Web/API/DelayNode const splitter = new ChannelSplitterNode(context); const

    delayNode = new DelayNode(context); const toneNode = new BiquadFilterNode(context); const convolver = new ConvolverNode(context); const wet = new GainNode(context); const dry = new GainNode(context); const merger = new ChannelMergerNode(context);
  7. Connect line to destination Gain Node Distortion Wave Shaper Node

    Biquad Filter Node Cabinet Convolver Node Reverb Channel Merger/Splitter Node Delay Node Recap