Web Audio Api

javascript og åpne web teknologier.

mange som har drevet med javascript?

beklager engelsk-norsk

Ka e d?

• Lightweight Javascript API
• Prosessering, synthesering og håndtering av lyd i nettleser
• W3C Specification (Working Draft)

Chrome experiments

Innhold

• Hva har vært før
• Hva er nytt med HTML5
• Programmeringseksempler
• Bruksområde
• Synergi med andre web api'er.
• Dagens nettleserstøtte

Skrape overflaten, unngå lydtekniske ting.

Høynivå API, ikke alltid nødvendig

Plugin fortiden

Flash tok over

Tilbydde mye som ikke var mulig av multimedia før

Alle fornøyd med å komme seg videre

<Audio>-tag

Endelig et html element som er laget for playback i browser.

Native Playback

God støtte i de fleste

God browserstøtte i dag

Native look

Egne interfaces

Begrensninger

• Parallelle avspillinger
• Ingen tilgang til datastrøm for å prosessere, manipulere eller analysere
• Pre-buffering og timing er vanskelig
• PRESISJON

iOS kan man kun spille 1 stream om gangen.

browser som tar seg av bandwidth-sparing, cpu throttling

Presisjon er nøkkelfaktor for det meste av spill, audio software og UX.

Audio brukes ofte som bakgrunnsmusikk

web audio api features

• presis timing og parallelle playbacks
• audio routing graph - grafsystem for å route audiostrøm gjennom noder
• Innebygde processornoder for effekter, filter o.l.
• analyser-noder for å visualisere og manipulere data i sanntid

Komme i gang med Web Audio API

//crossbrowser Webkit + Blink
window.AudioContext = (window.AudioContext || window.webkitAudioContext);

var context = new AudioContext();

Kun en context per side

Destination er ReadOnly.

Mozilla Audio Data API

Source

Input kan hentes fra forskjellige kilder

• createBufferSource
• createMediaElementSource
• createMediaStreamSource
• createOscillator

Hente fil fra disk eller annet sted, createBufferSource

Hente fra HTML elementer på siden

Hente fra mikrofon/webcam

Produsere lyd fra f.eks en sinusbølge

Eksempel på Oscillator som Source

var context = new AudioContext();  
var source = context.createOscillator();

source.connect(context.destination);

source.start();

oscillator.frequency.value = n; //Hz 440 default

Det er audiocontext-objekt som tilbyr alle metodene

Skipper audiocontext-oppretting i senere eks.

audiocontext graf

Hver node implementerer generisk interface AudioNode

  AudioNode.connect(AudioNode)
  AudioNode.numberOfInputs
  AudioNode.numberOfOutputs

Flere sources

Flere inputs/outputs kobles sammen

node-typer

• GainNode multiplies the input audio signal
• DelayNode delays the incoming audio signal
• PannerNode positions an incoming audio stream in three-dimensional space
• ConvolverNode applies a linear convolution effect given an impulse response
• DynamicsCompressorNode implements a dynamics compression effect
• BiQuadFilterNode implements very common low-order filters
• WaveshaperNode implements non-linear distortion effects
• ChannelMergerNode
• ChannelSplitterNode
• AnalyserNode expose audio time and frequency data
• ScriptProcessorNode everything else

Skal ikke gå inn på hver, det fins flere også.

demo

Eksempel på Gain (Volum) effekt node

var source = context.createOscillator();
var gainNode = context.createGain();
gainNode.gain = 0.5;

source.connect(gainNode);

gainNode.connect(context.destination);

Programmatisk eksempel

Viktig å merke koblingene

Oscillator source -> Gain -> Destination

analyser node

Tilbyr frekvens og tidsdomene analyse informasjon i sanntid

Visualisering og Analysering

  var analyser = context.createAnalyser();
  analyser.fftSize = 2048;
  var bufferLength = analyser.frequencyBinCount;
  var dataArray = new Uint8Array(bufferLength);
  analyser.getByteTimeDomainData(dataArray);

Siste node-typen jeg viser

litt mer avansert, men slipper å implementere fast fourier transformasjon

Henter input fra mikrofonen min

analyser-demo

Schedule playback

SetTimeout() og SetInterval() er unnøyaktig

3-4ms presisjonstap, og utsettes for browser throttling

AudioContext har eget hardware timestamp som starter på 0, og er read-only.

Hver source kjører uforstyrret på egen tråd

  //setter avspillig n-sekund i fortiden
  source.start(n);

Lar deg spille lyder i rytme siden de deler samme timer.

Lydeffekter

<audio src="examples/machinegun/m4a1.mp3" controls></audio>

var audioElement = document.querySelector('#gun-sample');
var mediaSourceNode = context.createMediaElementSource(audioElement);

Sette opp en kø av sources.

Høres unaturlig ut forid det er nøyaktig mellomrom

Mer tilfeldighet i avspillingen mer naturlig ut

Eksempelet forklart

for (var i = 0; i < rounds; i++) {
  var source = context.createMediaElementSource(el);

  source.connect(gainNode);
  gainNode.connect(compressorNode);
  compressorNode.connect(context.destination);

  //hastighet
  source.playbackRate.value = 1 + Math.random() * random2;

  source.start(time + i * interval + Math.random() * random);
}

Loopes over antall skudd

koble effektnoder

playbackRate som å spile. Øker pitch (tonehøyde)

Web Audio API Bruksområder

• HTML5 Spill
• App UX input/feedback
• Musikk/Audio Apps
• Generativ musikk

AngryBirds lydhåndtering

pannerNode: 3D plassering av lyd, dopplereffekt

Styr apps med lyd

Musikk app: Hya.io

• Plugin-basert
• Skriv dine egne plugins
• Lett å dele med andre (Åpen web tech!)
• Kontroller med fysisk MIDI kontroller

Ser ut som AudioContext eksempelet fra tidligere

generativ musikk

Randomisert musikk.

Kreative web eksperiment

Relaterte web API'er

Web Speech API

Web MIDI API

WebRTC (Real-Time Communcation)

Tale-til-tekst -> tekst-til-tale

specc for impl. av talegjennkjenning i nettleser

MIDI er ikke bakgrunnsmusikk. Under chrome-flag inntil videre

appear.in

WebRTC + WebAudioAPI

//cross-browser polyfill
navigator.getUserMedia = ( navigator.getUserMedia ||
                     navigator.webkitGetUserMedia ||
                     navigator.mozGetUserMedia ||
                     navigator.msGetUserMedia );

navigator.getUserMedia( {audio: true, video: false}, function callback(stream) {
  var microphoneNode = context.createMediaStreamSource(stream);
  
  //gjør noe nyttig...
  microphoneNode.connect(analyser);
});

appear.in

nettleser ber om tillatelse

Demo: Gitarpedaler

Browserstøtte

kilder

Takk for meg!