Creating a simple guitar effects unit with the HTML5 Audio API and Javascript

1. Guitar Effects!
with the Web Audio API
!
@cathyblabla

2. The Web Audio API!
!
“The Web Audio API is a high-level JavaScript API for
processing and synthesizing audio in web
applications. The API includes capabilities found in
modern game audio engines and some of the mixing,
processing, and filtering tasks found in desktop audio
production applications.
!
Getting Started with the Web Audio API

3. An Audio Engineering Toolkit.!
In the browser. For free! !
!
- Connect to live audio sources
- Create audio buffer sources from file
- Tone generators
- Filters, effects and analysers
- Channel mixing

4. A basic guitar effects route
Tone Distortion Gain OutputLive Source

5. credit: Marcos Cabrera

6. Connect to live input
navigator.webkitGetUserMedia({audio:true}, initAudio);!
!
function initAudio(stream) {!
//all the cool stuff!
}

7. Create an audio context
There is a single audio context per application that may handle
multiple input sources and signal paths.
!
var context = new webkitAudioContext();

8. Create an audio node from the stream source
This will be the first node in our effects route.
!
var source = context.createMediaStreamSource(stream);

9. Create a low pass filter node
var filter = context.createBiquadFilter();!
filter.type = 0; //Low pass filter!
!
document.getElementById("tone").oninput = function () {!
filter.frequency.value = calcFilterFrequency(this.value);!
};

10. Create a distortion effect node
var distortion = context.createWaveShaper();!
!
document.getElementById("dist").oninput = function () {!
distortionNode.curve = makeDistortionCurve(this.value);!
};

11. Create a Gain effect node
var gain = context.createGain();!
!
document.getElementById("gain").oninput = function () {!
gainNode.gain.value = this.value;!
};

12. Connect the nodes
source.connect(filter);!
filter.connect(distortion);!
distortion.connect(gain);!
gain.connect(context.destination);

13. Tone control via Lowpass filter
var filter = context.createBiquadFilter();!
filter.type = 0; //Low pass filter!
!
filter.frequency.value = calcFilterFrequency(this.value);!
!
- Lowpass filter ‘rolls off’ frequencies above a certain point
- To represent human perception of tone we need to calculate the
roll off point logarithmically.

14. Waveshaper distortion
var distortion = context.createWaveShaper();!
!
distortionNode.curve = makeDistortionCurve(this.value);!
!
- The curve attribute accepts a Float32Array representing points on
the wave shaper curve.
- Distortion is created by mapping the points on the input wave
curve to the wave shaper curve. A ‘squarer’ wave shaper curve
creates a more distorted sound by more heavily clipping the
original wave shape.
!
http://kevincennis.github.io/transfergraph/

15. https://en.wikipedia.org/wiki/File:Distortion_waveform.svg

16. m/

17. Further reading...
http://www.w3.org/TR/webaudio/
http://www.html5rocks.com/en/tutorials/webaudio/intro/
http://www.html5rocks.com/en/search?q=web+audio+api
http://dashersw.github.io/pedalboard.js/
https://github.com/kevincennis/Sound.js