Download - Guitar Effects with the HTML5 Audio API
![Page 2: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/2.jpg)
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
![Page 3: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/3.jpg)
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
![Page 4: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/4.jpg)
A basic guitar effects route
Tone Distortion Gain OutputLive Source
![Page 6: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/6.jpg)
Connect to live input
navigator.webkitGetUserMedia({audio:true}, initAudio);!!function initAudio(stream) {! //all the cool stuff!}
![Page 7: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/7.jpg)
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();
![Page 8: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/8.jpg)
Create an audio node from the stream sourceThis will be the first node in our effects route. !var source = context.createMediaStreamSource(stream);
![Page 9: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/9.jpg)
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);!};
![Page 10: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/10.jpg)
Create a distortion effect nodevar distortion = context.createWaveShaper();!!document.getElementById("dist").oninput = function () {! distortionNode.curve = makeDistortionCurve(this.value);!};
![Page 11: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/11.jpg)
Create a Gain effect nodevar gain = context.createGain();!!document.getElementById("gain").oninput = function () {! gainNode.gain.value = this.value;!};
![Page 12: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/12.jpg)
Connect the nodessource.connect(filter);!filter.connect(distortion);!distortion.connect(gain);!gain.connect(context.destination);
![Page 13: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/13.jpg)
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.
![Page 14: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/14.jpg)
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/
![Page 15: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/15.jpg)
https://en.wikipedia.org/wiki/File:Distortion_waveform.svg
![Page 16: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/16.jpg)
\m/
![Page 17: Guitar Effects with the HTML5 Audio API](https://reader034.vdocuments.mx/reader034/viewer/2022052315/555a930bd8b42a991b8b4a4f/html5/thumbnails/17.jpg)
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