Guitar Effects with the HTML5 Audio API

Guitar Effects!with the Web Audio API

!@cathyblabla

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

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

A basic guitar effects route

Tone Distortion Gain OutputLive Source

credit: Marcos Cabrera

Connect to live input

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

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();

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

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

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

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

Connect the nodessource.connect(filter);!filter.connect(distortion);!distortion.connect(gain);!gain.connect(context.destination);

Tone control via Lowpass filtervar 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.

Waveshaper distortionvar 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/

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

\m/

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