Web Audio API

Full kontroll på lyden


<bgsound src="missionimpossible.midi" loop="infinite" />

Behov

Trenger vi det?

Hvordan?

Starter med AudioContext


var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

Routing Graph

Audio Graph

var source = audioCtx.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(distortion);
distortion.connect(biquadFilter);
biquadFilter.connect(convolver);
convolver.connect(gainNode);
gainNode.connect(audioCtx.destination);
Audio Graph

// Get and decode asynchronously
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = () =>
  context.decodeAudioData(request.response, playSound);
request.send();

function playSound(buffer) {
  var source = context.createBufferSource();
  source.buffer = buffer;
  source.connect(context.destination);
  source.start(0);
}

navigator.getUserMedia({ audio: true }, function (stream) {
  var source = context.createMediaStreamSource(stream);
  source.connect(context.destination);
}, console.error.bind(console));

var analyser = context.createAnalyser();
analyser.smoothingTimeConstant = SMOOTHING;
analyser.fftSize = FFT_SIZE;

var freqs = new Uint8Array(this.analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqs);

navigator.getUserMedia({ audio: true }, function (stream) {
  var source = context.createMediaStreamSource(stream);
  source.connect(self.analyser);
  requestAnimFrame(draw);
}, console.error.bind(console));

Visualisering


var maybeClap = filter(data, function (amp) {
  return amp >= threshold;
}).length >= 20;

if (maybeClap) numberCrossingsInRow++;

if (!maybeClap && numberCrossingsInRow > 0 && numberCrossingsInRow < numTimes) {
  numberCrossingsInRow = 0;
  return fn.call(this, data);
}

if (!maybeClap && numberCrossingsInRow < numTimes) {
  numberCrossingsInRow = 0;
}

Les mer: bit.ly/webaudiobook

Twitter: @mikaelbrevik

Slides: git.mikaelb.net/presentations/ntnu/clap/talk