Web Audio Hero
102
@ALMIRFILHO
-
Upload
almir-filho -
Category
Software
-
view
228 -
download
1
description
Desvendaremos esta nova API de alto nível para processamento e sintetização de áudio em aplicações web: Web Audio API – que nos permitirá quebrar o silêncio da web sem limitações.
Transcript of 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. . .
Jogos
Web Audio
<audio>
Um pouco de história
Elisha Gray1876
Sintetizador das antigas
W T F
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
Crie o contextoConecte os nós
dashersw.github.com/pedalboard.js/demo/
Nós
Nós
Sources
Gain
Filters
Delay
Analyser
Convolver
Nós
Channel Splitter & MergerScript ProcessorJS
Dynamic Compressor
Wave Shaper
Panner
Destination
Channel Splitter & MergerScript ProcessorJS
Dynamic Compressor
Wave Shaper
Panner
Destination
Sources
Gain
Filters
Delay
Analyser
Convolver
SourcesFontes de dados
SourcesFontes 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
Carregue os dadosCrie o contexto
var request = new XMLHttpRequest(); request.open('GET', 'sound.mp3', true); request.responseType = 'arraybuffer'; request.onload = function(){ /*...*/ }; request.send();
context.destination
Crie o nó da fonte
sound.mp3
Crie o nó da fonteCrie o contexto
// onload var sourceNode = context.createBufferSource(); sourceNode.buffer = context.createBuffer(request.response, false);
context.destinationsourceNode
Carregue os dados Conecte os nós
Conecte os nósCrie o contexto
context.destinationsourceNode
// conectando à saída sourceNode.connect(context.destination);
Crie o nó da fonte Som na caixa!
Som na caixa!Crie o contexto
context.destinationsourceNode
sourceNode.start(0);
Conecte os nó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.destinationOscillator
var sourceNode = context.createOscillator();
Crie o nó da fonteCrie o contexto Configure
sourceNode.type = 'square';
ConfigureCrie o contextoCrie o nó da fonte Conecte os nós
context.destinationOscillator
Conecte os nósCrie o contexto
context.destination
sourceNode.connect(context.destination); sourceNode.start(0);
Crie o nó da fonte Som na caixa!
Oscillator
Crie o contextoConecte os nós
hora do demo
GainControlando o volume
GainNode
Interface
gainNode
...outputNodeinputNode
...
gainNode
gainNode
var gainNode = context.createGain(); gainNode.gain.value = 0.2; // 20% volume
Crie e configure Conecte os nós
...outputNodeinputNode
...
inputNode.connect(gainNode); gainNode.connect(outputNode);
Conecte os nós
gainNode
Crie e configure
...outputNodeinputNode
...
Cross-fading entre sons
context.destination
Crie o contexto e fontes
midnightCity
sadButTrue
Crie gain nodes
Crie gain nodes
fadeOut
fadeIn
Crie o contexto e fontes Conecte os nós
context.destination
midnightCity
sadButTrue
Conecte os nós Capture o somCrie gain nodes
context.destination
fadeOut
fadeInmidnightCity
sadButTrue
ConfigureCrie gain nodes
fadeOut.gain.value = 1; // padrão fadeIn.gain.value = 0;
Mudança contínua
context.destination
fadeOut
fadeInmidnightCity
sadButTrue
Mudança contínuafadeOut.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);
Configure
Mudança contínua Capture o somConfigure1
0
current + fadecurrent3s
sadButTrue
midnightCity
t
vol
Crie o contextoConecte os nós
hora do demo
FiltersAplicando efeitos
BiquadFilterNode
Interface
Tipos de filtros
Low pass
High pass
Band pass
All pass
Low shelf
High shelf
Peaking
Notch
Crie e configure
filterNode
Crie um gain node
...outputNodeinputNode
...
var filterNode = context.createBiquadFilter(); filterNode.type = ‘lowpass';
Conecte os nós
Conecte os nósCrie um gain node
inputNode.connect(filterNode); filterNode.connect(outputNode);
Crie e configure
filterNode
...outputNodeinputNode
...
Crie o contextoConecte os nós
hora do demo
DelayAtrasando tudo
DelayNode
Interface
delayNode
var delayNode = context.createDelay(5); delayNode.delayTime.value = 5; // seg
Crie e configure Conecte os nós
...outputNodeinputNode
...
inputNode.connect(delayNode); delayNode.connect(outputNode);
Conecte os nósCrie e configure
delayNode
...outputNodeinputNode
...
Eco
context.destination
Crie o contexto e fontes
sadButTrue
Crie delay nodes
context.destination
Crie delay nodes
sadButTrue
delayNode
Crie gain nodes
context.destination
Crie gain nodes
sadButTrue
delayNode gainNode
ConfigureCrie delay nodes
context.destination
Configure
sadButTrue
delayNode gainNode
delayNode.delayTime.value = 0.5; gainNode.gain.linearRampToValueAtTime(0, 1);
Crie gain nodes
Crie o contextoConecte os nós
hora do demo
AnalyserLendo dados em tempo real
AnalyserNode
Interface
analyserNode
var analyserNode = context.createAnalyser();
Crie o analisador Conecte os nós
...outputNodeinputNode
...
inputNode.connect(analyserNode); // analyserNode.connect(outputNode);
Conecte os nósCrie e configure
opcional
Crie o analisador Colete os dados
analyserNode
...outputNodeinputNode
...
var dados = new Uint8Array( analyserNode.frequencyBinCount ); analyserNode.getByteFrequencyData(dados);
Colete os dadosCrie e configure
opcional
Conecte os nós
analyserNode
...outputNodeinputNode
...
var dados = [ 230, 143, 98, 111, 125, 92, 53, //... ];
Colete os dadosCrie e configureConecte os nós
Crie o contextoConecte os nós
airtightinteractive.com/demos/js/reactive/
ConvolverRealizando convolução de sinais
ConvolverNode
Interface
convolverNode
var convolverNode = context.createConvolver();
Crie o convolver
...outputNodeinputNode
...
Carregue o sinal
Carregue o sinal
var request = new XMLHttpRequest(); request.open("GET", "sinal.wav", true); request.responseType = "arraybuffer"; request.onload = function(){ /*...*/ }; request.send();
sinal
Crie o convolver Defina o buffer
convolverNode
...outputNode
inputNode
...
// onload convolverNode.buffer = context.createBuffer(request.response, false);
Defina o bufferCarregue o sinal Conecte os nósbuffer
convolverNode
...outputNodeinputNode
...
Conecte os nós
inputNode.connect(convolverNode); convolverNode.connect(outputNode);
Defina o buffer Experimentebuffer
convolverNode
...outputNodeinputNode
...
Crie o contextoConecte os nós
hora do demo
Crie o contextoConecte os nós
Outros experimentos
Crie o contextoConecte os nós
webaudiodemos.appspot.com/Vocoder/index.html
Crie o contextoConecte os nós
webaudiodemos.appspot.com/AudioRecorder
Crie o contextoConecte os nós
uglyhack.appspot.com/webaudiotoy/
Crie o contextoConecte os nósValeu!
@ALMIRFILHO
