Web Audio Hero

@ALMIRFILHO

almirfilho almirfilho

onde trabalho

onde compartilho conhecimento loopinfinito

Web Audio API

? <audio>

ALTO NÍVEL : ABSTRAÇÃO - Carregamento (buffering e streaming) -
Codificação (encoding) - Controle da mídia (API simples) - Eventos <audio>

BAIXO NÍVEL : DINAMICIDADE - Baixa latência - Filtros e
efeitos - Maior precisão temporal - Sintetização de sons Web Audio API

BAIXO NÍVEL : DINAMICIDADE - Mixagem - Controle de canais
- Panning (2d e 3d) - Gravação Web Audio API

Aplicações - Realidade aumentada - Hipermídia . . .mas principalmente.
. .

Web Audio <audio>

Um pouco de história

Elisha Gray 1876

Sintetizador das antigas

Web Audio API

AudioContext

AudioContext fonte destino

fonte destino ? JS a brincadeira acontece aqui

fonte destino ? JS múltiplas fontes a brincadeira acontece aqui

Fluxo de áudio

s dashersw.github.com/pedalboard.js/demo/

Nós Sources Gain Filters Delay Analyser Convolver

Nós Channel Splitter & Merger Script Processor JS Dynamic Compressor
Wave Shaper Panner Destination

Channel Splitter & Merger Script Processor JS Dynamic Compressor Wave
Shaper Panner Destination Sources Gain Filters Delay Analyser Convolver

Sources Fontes de dados

Sources Fontes de dados mídia input sintetização

BufferSource MediaElementSource MediaStreamSource Interfaces OscillatorNode

Carregando e reproduzindo uma mídia

context.destination Crie o contexto var context = new AudioContext();

Carregue os dados var request = new XMLHttpRequest(); request.open('GET', 'sound.mp3',
true); request.responseType = 'arraybuffer'; request.onload = function(){ /*...*/ }; request.send(); context.destination sound.mp3

Crie o nó da fonte // onload var sourceNode =
context.createBufferSource(); sourceNode.buffer = context.createBuffer(request.response, false); context.destination sourceNode

Conecte os nós context.destination sourceNode // conectando à saída sourceNode.connect(context.destination);

Som na caixa! context.destination sourceNode sourceNode.start(0); s

Reproduzindo o conteúdo de um <audio> < >

<!doctype html> <html> <head>...</head> <body> ... <audio id="music" src="music.mp3"></audio> ...
</body> </html>

// recupera elemento do DOM var audioEl = document.getElementById('music'); !
// cria nó var sourceNode = context.createMediaElementSource(audioEl);

Capturando e reproduzindo som do microfone

// captura áudio do microfone navigator.webkitGetUserMedia( { audio: true },
sucessoCallback, falhaCallback ); ! function sucessoCallback(stream){ sourceNode = context.createMediaStreamSource(stream); // ... }

Sintetizando sons

Tipos de osciladores Sine Square Sawtooth Triangle Custom

context.destination Oscillator var sourceNode = context.createOscillator(); Crie o nó da
fonte

sourceNode.type = 'square'; Configure e context.destination Oscillator

Conecte os nós context.destination sourceNode.connect(context.destination); sourceNode.start(0); Oscillator

s jlongster.com/s/touch.html

s hora do demo

Gain Controlando o volume

GainNode Interface

gainNode ... outputNode inputNode ...

gainNode

gainNode var gainNode = context.createGain(); gainNode.gain.value = 0.2; // 20%
volume Crie e configure ... outputNode inputNode ...

inputNode.connect(gainNode); gainNode.connect(outputNode); Conecte os nós gainNode ... outputNode inputNode ...

Cross-fading entre sons

context.destination Crie o contexto e fontes midnightCity sadButTrue

Crie gain nodes fadeOut fadeIn context.destination midnightCity sadButTrue

Conecte os nós s context.destination fadeOut fadeIn midnightCity sadButTrue

Configure s fadeOut.gain.value = 1; // padrão fadeIn.gain.value = 0;
context.destination fadeOut fadeIn midnightCity sadButTrue

Mudança contínua fadeOut.gain.value = 1; // padrão fadeIn.gain.value = 0;
var current = context.currentTime; var fade = 3; ! fadeOut.gain .linearRampToValueAtTime(0, current + fade); fadeIn.gain .linearRampToValueAtTime(1, current + fade); e

Mudança contínua e 1 0 current + fade current 3s
sadButTrue midnightCity t vol

s hora do demo

Filters Aplicando efeitos

BiquadFilterNode Interface

Tipos de filtros Low pass High pass Band pass All
pass Low shelf High shelf Peaking Notch

Crie e configure filterNode e ... outputNode inputNode ... var
filterNode = context.createBiquadFilter(); filterNode.type = ‘lowpass';

Conecte os nós e inputNode.connect(filterNode); filterNode.connect(outputNode); filterNode ... outputNode inputNode
...

s hora do demo

Delay Atrasando tudo

DelayNode Interface

delayNode var delayNode = context.createDelay(5); delayNode.delayTime.value = 5; // seg
Crie e configure ... outputNode inputNode ...

inputNode.connect(delayNode); delayNode.connect(outputNode); Conecte os nós delayNode ... outputNode inputNode ...

context.destination Crie o contexto e fontes sadButTrue

context.destination Crie delay nodes sadButTrue delayNode

context.destination Crie gain nodes sadButTrue delayNode gainNode s

context.destination Configure sadButTrue delayNode gainNode delayNode.delayTime.value = 0.5; gainNode.gain.linearRampToValueAtTime(0, 1);

s hora do demo

Analyser Lendo dados em tempo real

AnalyserNode Interface

analyserNode var analyserNode = context.createAnalyser(); Crie o analisador ... outputNode
inputNode ...

inputNode.connect(analyserNode); // analyserNode.connect(outputNode); Conecte os nós opcional analyserNode ... outputNode
inputNode ...

var dados = new Uint8Array( analyserNode.frequencyBinCount ); analyserNode.getByteFrequencyData(dados); Colete os
dados opcional s analyserNode ... outputNode inputNode ...

var dados = [ 230, 143, 98, 111, 125, 92,
53, //... ]; Colete os dados s

s airtightinteractive.com/demos/js/ reactive/

s phenomnomnominal.github.com

Convolver Realizando convolução de sinais

ConvolverNode Interface

convolverNode var convolverNode = context.createConvolver(); Crie o convolver ... outputNode
inputNode ...

Carregue o sinal var request = new XMLHttpRequest(); request.open("GET", "sinal.wav",
true); request.responseType = "arraybuffer"; request.onload = function(){ /*...*/ }; request.send(); sinal r convolverNode ... outputNode inputNode ...

// onload convolverNode.buffer = context.createBuffer(request.response, false); Defina o buffer l
buffer convolverNode ... outputNode inputNode ...

Conecte os nós inputNode.connect(convolverNode); convolverNode.connect(outputNode); buffer convolverNode ... outputNode inputNode
...

s hora do demo

s Outros experimentos

s webaudiodemos.appspot.com/ Vocoder/index.html

s webaudiodemos.appspot.com/AudioRecorder

s uglyhack.appspot.com/webaudiotoy/

s Valeu! @ALMIRFILHO

Web Audio Hero

Web Audio Hero

More Decks by Almir Filho

Other Decks in Programming

Featured

Transcript