Guitar Effects with the HTML5 Audio API
•
2 likes•2,512 views
This document discusses using the Web Audio API to create guitar effects in web applications. It explains that the Web Audio API allows processing and synthesizing audio, and includes capabilities for audio engines and mixing/filtering like in desktop audio applications. It then provides an overview of how to get started, including connecting to live audio sources, creating audio buffers, using filters, effects and analyzers, and mixing channels. It also provides a code example of creating a basic guitar effects chain using a live input source, low pass filter, distortion effect, gain control and output.
Report
Share
Guitar Effects with the HTML5 Audio API
- 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
- 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;! };
- 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/
- 16. m/