Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
applic...
An Audio Engineering Toolkit.!
In the browser. For free! !
!
- Connect to live audio sources
- Create audio buffer sources...
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 co...
Create an audio context
There is a single audio context per application that may handle
multiple input sources and signal ...
Create an audio node from the stream source
This will be the first node in our effects route.
!
var source = context.creat...
Create a low pass filter node
var filter = context.createBiquadFilter();!
filter.type = 0; //Low pass filter!
!
document.g...
Create a distortion effect node
var distortion = context.createWaveShaper();!
!
document.getElementById("dist").oninput = ...
Create a Gain effect node
var gain = context.createGain();!
!
document.getElementById("gain").oninput = function () {!
gai...
Connect the nodes
source.connect(filter);!
filter.connect(distortion);!
distortion.connect(gain);!
gain.connect(context.de...
Tone control via Lowpass filter
var filter = context.createBiquadFilter();!
filter.type = 0; //Low pass filter!
!
filter.f...
Waveshaper distortion
var distortion = context.createWaveShaper();!
!
distortionNode.curve = makeDistortionCurve(this.valu...
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.html5r...
Upcoming SlideShare
Loading in …5
×

Guitar Effects with the HTML5 Audio API

1,806 views

Published on

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

  • Be the first to comment

Guitar Effects with the HTML5 Audio API

  1. 1. Guitar Effects! with the Web Audio API ! @cathyblabla
  2. 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. 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. 4. A basic guitar effects route Tone Distortion Gain OutputLive Source
  5. 5. credit: Marcos Cabrera
  6. 6. Connect to live input navigator.webkitGetUserMedia({audio:true}, initAudio);! ! function initAudio(stream) {! //all the cool stuff! }
  7. 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. 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. 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. 10. Create a distortion effect node var distortion = context.createWaveShaper();! ! document.getElementById("dist").oninput = function () {! distortionNode.curve = makeDistortionCurve(this.value);! };
  11. 11. Create a Gain effect node var gain = context.createGain();! ! document.getElementById("gain").oninput = function () {! gainNode.gain.value = this.value;! };
  12. 12. Connect the nodes source.connect(filter);! filter.connect(distortion);! distortion.connect(gain);! gain.connect(context.destination);
  13. 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. 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. 15. https://en.wikipedia.org/wiki/File:Distortion_waveform.svg
  16. 16. m/
  17. 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

×