WEB AUDIO API
Fejes Anikó
@hubudibu
http://instasound.kibu.hu
control audio on the web
choose audio sources
add effects to audio
create audio visualizations
// Create an <audio> element dynamically.
var audio = new Audio();
audio.src = 'myfile.mp3';
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);
var context = new webkitAudioContext();
var analyser = context.createAnalyser();
// Wait for window.onload to fire. See crbug.com/112368
window.addEventListener('load', function(e) {
// Our <audio> element will be the audio source.
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
// ...call requestAnimationFrame() and render the analyser's output to canvas.
}, false);
http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs
createMediaElementSource()
AudioContext, SourceNodes, DestinationNode
Source
Filter
Destination
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(0);
request.onload = function() {
context.decodeAudioData(request.response, function(buffer) {
helloBuffer = buffer;
});
}
oscillator = context.createOscillator();
oscillator.type = 'sine'; // square, sawtooth, triangle
oscillator.frequency.value = 1000; // value in hertz
oscillator.connect(context.destination);
oscillator.start();
OscillatorNode
navigator.getUserMedia({audio: true}, function(stream) {
var microphone = context.createMediaStreamSource(stream);
var filter = context.createBiquadFilter();
// microphone -> filter -> destination.
microphone.connect(filter);
filter.connect(context.destination);
}, errorCallback);
filter = context.createBiquadFilter();
filter.type = "highpass"; // lowpass bandpass lowshelf ...
source.connect(filter);
filter.connect(context.destination);
BiquadFilterNode
gain (volume control)
analysernode (eg. visualizations)
delay (echos)
panning (3D sounds!)
convolver (reverberation)
splitter & merger (channel manipulation)
waveshaper (distortion effects)
compressor (...)
http://caniuse.com/#feat=audio-api
DOCS
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
https://docs.webplatform.org/wiki/apis/webaudio
http://www.w3.org/TR/webaudio/
TUTORIALS
http://www.html5rocks.com/en/tutorials/webaudio/intro/
http://updates.html5rocks.com/2012/01/Web-Audio-FAQ
http://www.html5rocks.com/en/tutorials/audio/scheduling/
OTHER
http://labs.dinahmoe.com/plink/
http://instasound.kibu.hu
https://github.com/openmusic
http://soledadpenades.com/files/t/20141117_dotjs/
Web Audio API
By Anikó Fejes
Web Audio API
Frontend Meetup Budapest #29: Adopt a feature
- 676