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