@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)
-...
BAIXO NÍVEL : DINAMICIDADE
- Baixa latência
- Filtros e efeitos
- Maior precisão temporal
- Sintetização de sons
Web Audio...
BAIXO NÍVEL : DINAMICIDADE
- Mixagem
- Controle de canais
- Panning (2d e 3d)
- Gravação
Web AudioAPI
Aplicações
- Realidade aumentada
- Hipermídia
...masprincipalmente...
Jogos
Web Audio
<audio>
Um pouco de
história
Elisha Gray
1876
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
s
dashersw.github.com/pedalboard.js/demo/
Nós
Nós
Sources
Gain
Filters
Delay
Analyser
Convolver
Nós
Channel
Splitter & Merger
Script
ProcessorJS
Dynamic
Compressor
Wave Shaper
Panner
Destination
Channel
Splitter & Merger
Script
ProcessorJS
Dynamic
Compressor
Wave Shaper
Panner
Destination
Sources
Gain
Filters
Delay
...
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 = 'arra...
Crie o nó da fonte
// onload
var sourceNode = context.createBufferSource();
sourceNode.buffer =
context.createBuffer(reque...
Conecte os nós
context.destinationsourceNode
// conectando à saída
sourceNode.connect(context.destination);
Som na caixa!
context.destinationsourceNode
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.createMe...
Capturandoe
reproduzindo som
domicrofone
// captura áudio do microfone
navigator.webkitGetUserMedia(
{ audio: true },
sucessoCallback,
falhaCallback
);
!
function ...
Sintetizandosons
Tipos de osciladores
Sine
Square
Sawtooth
Triangle
Custom
context.destinationOscillator
var sourceNode = context.createOscillator();
Crie o nó da fonte
sourceNode.type = 'square';
Configuree
context.destinationOscillator
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
...
outputNodeinputNode
...
gainNode
gainNode
var gainNode = context.createGain();
gainNode.gain.value = 0.2; // 20% volume
Crie e configure
...
outputNodeinpu...
inputNode.connect(gainNode);
gainNode.connect(outputNode);
Conecte os nós
gainNode
...
outputNodeinputNode
...
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óss
context.destination
fadeOut
fadeInmidnightCity
sadButTrue
Configures
fadeOut.gain.value = 1; // padrão
fadeIn.gain.value = 0;
context.destination
fadeOut
fadeInmidnightCity
sadButT...
Mudança contínua
fadeOut.gain.value = 1; // padrão
fadeIn.gain.value = 0;
var current = context.currentTime;
var fade = 3;...
Mudança contínuae
1
0
current + fadecurrent
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
...
outputNodeinputNode
...
var filterNode = context.createBiquadFilter();
filterNode.type =...
Conecte os nóse
inputNode.connect(filterNode);
filterNode.connect(outputNode);
filterNode
...
outputNodeinputNode
...
s
hora do demo
Delay
Atrasando tudo
DelayNode
Interface
delayNode
var delayNode = context.createDelay(5);
delayNode.delayTime.value = 5; // seg
Crie e configure
...
outputNodeinp...
inputNode.connect(delayNode);
delayNode.connect(outputNode);
Conecte os nós
delayNode
...
outputNodeinputNode
...
Eco
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.linearRampToVal...
s
hora do demo
Analyser
Lendo dados em tempo real
AnalyserNode
Interface
analyserNode
var analyserNode =
context.createAnalyser();
Crie o analisador
...
outputNodeinputNode
...
inputNode.connect(analyserNode);
// analyserNode.connect(outputNode);
Conecte os nós
opcional
analyserNode
...
outputNodei...
var dados = new Uint8Array(
analyserNode.frequencyBinCount
);
analyserNode.getByteFrequencyData(dados);
Colete os dados
op...
var dados = [
230,
143,
98,
111,
125,
92,
53,
//...
];
Colete os dadoss
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
...
outputNodeinputNode
...
Carregue o sinal
var request = new XMLHttpRequest();
request.open("GET", "sinal.wav", true);
request.responseType = "array...
// onload
convolverNode.buffer =
context.createBuffer(request.response, false);
Defina o bufferl
buffer
convolverNode
...
...
Conecte os nós
inputNode.connect(convolverNode);
convolverNode.connect(outputNode);
buffer
convolverNode
...
outputNodeinp...
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
Web Audio Hero
Web Audio Hero
Próximos SlideShares
Carregando em…5
×

Web Audio Hero

433 visualizações

Publicada em

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.

Publicada em: Software
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
433
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Web Audio Hero

  1. 1. @ALMIRFILHO
  2. 2. almirfilho almirfilho
  3. 3. onde trabalho
  4. 4. onde compartilho conhecimento loopinfinito
  5. 5. Web Audio API
  6. 6. ? <audio>
  7. 7. ALTO NÍVEL : ABSTRAÇÃO - Carregamento (buffering e streaming) - Codificação (encoding) - Controle da mídia (API simples) - Eventos <audio>
  8. 8. BAIXO NÍVEL : DINAMICIDADE - Baixa latência - Filtros e efeitos - Maior precisão temporal - Sintetização de sons Web AudioAPI
  9. 9. BAIXO NÍVEL : DINAMICIDADE - Mixagem - Controle de canais - Panning (2d e 3d) - Gravação Web AudioAPI
  10. 10. Aplicações - Realidade aumentada - Hipermídia ...masprincipalmente...
  11. 11. Jogos
  12. 12. Web Audio <audio>
  13. 13. Um pouco de história
  14. 14. Elisha Gray 1876
  15. 15. Sintetizador das antigas
  16. 16. W T F
  17. 17. Web Audio API
  18. 18. AudioContext
  19. 19. AudioContext fonte destino
  20. 20. fonte destino ? JS a brincadeira acontece aqui
  21. 21. fonte destino ? JS múltiplas fontes a brincadeira acontece aqui
  22. 22. Fluxo de áudio
  23. 23. s dashersw.github.com/pedalboard.js/demo/
  24. 24. Nós
  25. 25. Nós Sources Gain Filters Delay Analyser Convolver
  26. 26. Nós Channel Splitter & Merger Script ProcessorJS Dynamic Compressor Wave Shaper Panner Destination
  27. 27. Channel Splitter & Merger Script ProcessorJS Dynamic Compressor Wave Shaper Panner Destination Sources Gain Filters Delay Analyser Convolver
  28. 28. Sources Fontes de dados
  29. 29. Sources Fontes de dados mídia input sintetização
  30. 30. BufferSource MediaElementSource MediaStreamSource Interfaces OscillatorNode
  31. 31. Carregando e reproduzindo uma mídia
  32. 32. context.destination Crie o contexto var context = new AudioContext();
  33. 33. Carregue os dados var request = new XMLHttpRequest(); request.open('GET', 'sound.mp3', true); request.responseType = 'arraybuffer'; request.onload = function(){ /*...*/ }; request.send(); context.destinationsound.mp3
  34. 34. Crie o nó da fonte // onload var sourceNode = context.createBufferSource(); sourceNode.buffer = context.createBuffer(request.response, false); context.destinationsourceNode
  35. 35. Conecte os nós context.destinationsourceNode // conectando à saída sourceNode.connect(context.destination);
  36. 36. Som na caixa! context.destinationsourceNode sourceNode.start(0); s
  37. 37. Reproduzindo o conteúdo de um <audio> < >
  38. 38. <!doctype html> <html> <head>...</head> <body> ... <audio id="music" src="music.mp3"></audio> ... </body> </html>
  39. 39. // recupera elemento do DOM var audioEl = document.getElementById('music'); ! // cria nó var sourceNode = context.createMediaElementSource(audioEl);
  40. 40. Capturandoe reproduzindo som domicrofone
  41. 41. // captura áudio do microfone navigator.webkitGetUserMedia( { audio: true }, sucessoCallback, falhaCallback ); ! function sucessoCallback(stream){ sourceNode = context.createMediaStreamSource(stream); // ... }
  42. 42. Sintetizandosons
  43. 43. Tipos de osciladores Sine Square Sawtooth Triangle Custom
  44. 44. context.destinationOscillator var sourceNode = context.createOscillator(); Crie o nó da fonte
  45. 45. sourceNode.type = 'square'; Configuree context.destinationOscillator
  46. 46. Conecte os nós context.destination sourceNode.connect(context.destination); sourceNode.start(0); Oscillator
  47. 47. s jlongster.com/s/touch.html
  48. 48. s hora do demo
  49. 49. Gain Controlando o volume
  50. 50. GainNode Interface
  51. 51. gainNode ... outputNodeinputNode ...
  52. 52. gainNode
  53. 53. gainNode var gainNode = context.createGain(); gainNode.gain.value = 0.2; // 20% volume Crie e configure ... outputNodeinputNode ...
  54. 54. inputNode.connect(gainNode); gainNode.connect(outputNode); Conecte os nós gainNode ... outputNodeinputNode ...
  55. 55. Cross-fading entre sons
  56. 56. context.destination Crie o contexto e fontes midnightCity sadButTrue
  57. 57. Crie gain nodes fadeOut fadeIn context.destination midnightCity sadButTrue
  58. 58. Conecte os nóss context.destination fadeOut fadeInmidnightCity sadButTrue
  59. 59. Configures fadeOut.gain.value = 1; // padrão fadeIn.gain.value = 0; context.destination fadeOut fadeInmidnightCity sadButTrue
  60. 60. 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
  61. 61. Mudança contínuae 1 0 current + fadecurrent 3s sadButTrue midnightCity t vol
  62. 62. s hora do demo
  63. 63. Filters Aplicando efeitos
  64. 64. BiquadFilterNode Interface
  65. 65. Tipos de filtros Low pass High pass Band pass All pass Low shelf High shelf Peaking Notch
  66. 66. Crie e configure filterNode e ... outputNodeinputNode ... var filterNode = context.createBiquadFilter(); filterNode.type = ‘lowpass';
  67. 67. Conecte os nóse inputNode.connect(filterNode); filterNode.connect(outputNode); filterNode ... outputNodeinputNode ...
  68. 68. s hora do demo
  69. 69. Delay Atrasando tudo
  70. 70. DelayNode Interface
  71. 71. delayNode var delayNode = context.createDelay(5); delayNode.delayTime.value = 5; // seg Crie e configure ... outputNodeinputNode ...
  72. 72. inputNode.connect(delayNode); delayNode.connect(outputNode); Conecte os nós delayNode ... outputNodeinputNode ...
  73. 73. Eco
  74. 74. context.destination Crie o contexto e fontes sadButTrue
  75. 75. context.destination Crie delay nodes sadButTrue delayNode
  76. 76. context.destination Crie gain nodes sadButTrue delayNode gainNode s
  77. 77. context.destination Configure sadButTrue delayNode gainNode delayNode.delayTime.value = 0.5; gainNode.gain.linearRampToValueAtTime(0, 1);
  78. 78. s hora do demo
  79. 79. Analyser Lendo dados em tempo real
  80. 80. AnalyserNode Interface
  81. 81. analyserNode var analyserNode = context.createAnalyser(); Crie o analisador ... outputNodeinputNode ...
  82. 82. inputNode.connect(analyserNode); // analyserNode.connect(outputNode); Conecte os nós opcional analyserNode ... outputNodeinputNode ...
  83. 83. var dados = new Uint8Array( analyserNode.frequencyBinCount ); analyserNode.getByteFrequencyData(dados); Colete os dados opcional s analyserNode ... outputNodeinputNode ...
  84. 84. var dados = [ 230, 143, 98, 111, 125, 92, 53, //... ]; Colete os dadoss
  85. 85. s airtightinteractive.com/demos/js/ reactive/
  86. 86. s phenomnomnominal.github.com
  87. 87. Convolver Realizando convolução de sinais
  88. 88. ConvolverNode Interface
  89. 89. convolverNode var convolverNode = context.createConvolver(); Crie o convolver ... outputNodeinputNode ...
  90. 90. 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 ...
  91. 91. // onload convolverNode.buffer = context.createBuffer(request.response, false); Defina o bufferl buffer convolverNode ... outputNodeinputNode ...
  92. 92. Conecte os nós inputNode.connect(convolverNode); convolverNode.connect(outputNode); buffer convolverNode ... outputNodeinputNode ...
  93. 93. s hora do demo
  94. 94. s Outros experimentos
  95. 95. s webaudiodemos.appspot.com/ Vocoder/index.html
  96. 96. s webaudiodemos.appspot.com/AudioRecorder
  97. 97. s uglyhack.appspot.com/webaudiotoy/
  98. 98. s Valeu! @ALMIRFILHO

×