context.destination
Crie o contexto
var context = new AudioContext();
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
Crie o nó da fonte
// onload
var sourceNode = context.createBufferSource();
sourceNode.buffer =
context.createBuffer(request.response, false);
context.destination
sourceNode
Slide 39
Slide 39 text
Conecte os nós
context.destination
sourceNode
// conectando à saída
sourceNode.connect(context.destination);
Slide 40
Slide 40 text
Som na caixa!
context.destination
sourceNode
sourceNode.start(0);
s
Slide 41
Slide 41 text
Reproduzindo o
conteúdo de um
< >
Slide 42
Slide 42 text
...
...
...
Slide 43
Slide 43 text
// recupera elemento do DOM
var audioEl =
document.getElementById('music');
!
// cria nó
var sourceNode =
context.createMediaElementSource(audioEl);
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
Slide 65
Slide 65 text
Mudança contínua
e
1
0
current + fade
current
3s
sadButTrue
midnightCity
t
vol
Slide 66
Slide 66 text
s
hora do demo
Slide 67
Slide 67 text
Filters
Aplicando efeitos
Slide 68
Slide 68 text
BiquadFilterNode
Interface
Slide 69
Slide 69 text
Tipos de filtros
Low pass
High pass
Band pass
All pass
Low shelf
High shelf
Peaking
Notch
Slide 70
Slide 70 text
Crie e configure
filterNode
e
...
outputNode
inputNode
...
var filterNode = context.createBiquadFilter();
filterNode.type = ‘lowpass';
Slide 71
Slide 71 text
Conecte os nós
e
inputNode.connect(filterNode);
filterNode.connect(outputNode);
filterNode
...
outputNode
inputNode
...
Slide 72
Slide 72 text
s
hora do demo
Slide 73
Slide 73 text
Delay
Atrasando tudo
Slide 74
Slide 74 text
DelayNode
Interface
Slide 75
Slide 75 text
delayNode
var delayNode = context.createDelay(5);
delayNode.delayTime.value = 5; // seg
Crie e configure
...
outputNode
inputNode
...
Slide 76
Slide 76 text
inputNode.connect(delayNode);
delayNode.connect(outputNode);
Conecte os nós
delayNode
...
outputNode
inputNode
...
Slide 77
Slide 77 text
Eco
Slide 78
Slide 78 text
context.destination
Crie o contexto e fontes
sadButTrue
analyserNode
var analyserNode =
context.createAnalyser();
Crie o analisador
...
outputNode
inputNode
...
Slide 86
Slide 86 text
inputNode.connect(analyserNode);
// analyserNode.connect(outputNode);
Conecte os nós
opcional
analyserNode
...
outputNode
inputNode
...
Slide 87
Slide 87 text
var dados = new Uint8Array(
analyserNode.frequencyBinCount
);
analyserNode.getByteFrequencyData(dados);
Colete os dados
opcional
s
analyserNode
...
outputNode
inputNode
...
Slide 88
Slide 88 text
var dados = [
230,
143,
98,
111,
125,
92,
53,
//...
];
Colete os dados
s
Slide 89
Slide 89 text
s
airtightinteractive.com/demos/js/
reactive/
Slide 90
Slide 90 text
s
phenomnomnominal.github.com
Slide 91
Slide 91 text
Convolver
Realizando convolução de sinais
Slide 92
Slide 92 text
ConvolverNode
Interface
Slide 93
Slide 93 text
convolverNode
var convolverNode =
context.createConvolver();
Crie o convolver
...
outputNode
inputNode
...
Slide 94
Slide 94 text
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
...
Slide 95
Slide 95 text
// onload
convolverNode.buffer =
context.createBuffer(request.response, false);
Defina o buffer
l
buffer
convolverNode
...
outputNode
inputNode
...
Slide 96
Slide 96 text
Conecte os nós
inputNode.connect(convolverNode);
convolverNode.connect(outputNode);
buffer
convolverNode
...
outputNode
inputNode
...