Web Audio Hero

Web Audio Hero

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.

7eacbf96fbde52dfe00cc77b225804d9?s=128

Almir Filho

March 09, 2013
Tweet

Transcript

  1. @ALMIRFILHO

  2. almirfilho almirfilho

  3. onde trabalho

  4. onde compartilho conhecimento loopinfinito

  5. Web Audio API

  6. ? <audio>

  7. ALTO NÍVEL : ABSTRAÇÃO - Carregamento (buffering e streaming) -

    Codificação (encoding) - Controle da mídia (API simples) - Eventos <audio>
  8. BAIXO NÍVEL : DINAMICIDADE - Baixa latência - Filtros e

    efeitos - Maior precisão temporal - Sintetização de sons Web Audio API
  9. BAIXO NÍVEL : DINAMICIDADE - Mixagem - Controle de canais

    - Panning (2d e 3d) - Gravação Web Audio API
  10. Aplicações - Realidade aumentada - Hipermídia . . .mas principalmente.

    . .
  11. Jogos

  12. Web Audio <audio>

  13. Um pouco de história

  14. Elisha Gray 1876

  15. Sintetizador das antigas

  16. None
  17. None
  18. None
  19. W T F

  20. Web Audio API

  21. AudioContext

  22. AudioContext fonte destino

  23. fonte destino ? JS a brincadeira acontece aqui

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

  25. Fluxo de áudio

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

  27. Nós

  28. Nós Sources Gain Filters Delay Analyser Convolver

  29. Nós Channel Splitter & Merger Script Processor JS Dynamic Compressor

    Wave Shaper Panner Destination
  30. Channel Splitter & Merger Script Processor JS Dynamic Compressor Wave

    Shaper Panner Destination Sources Gain Filters Delay Analyser Convolver
  31. Sources Fontes de dados

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

  33. None
  34. BufferSource MediaElementSource MediaStreamSource Interfaces OscillatorNode

  35. Carregando e reproduzindo uma mídia

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

  37. 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
  38. Crie o nó da fonte // onload var sourceNode =

    context.createBufferSource(); sourceNode.buffer = context.createBuffer(request.response, false); context.destination sourceNode
  39. Conecte os nós context.destination sourceNode // conectando à saída sourceNode.connect(context.destination);

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

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

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

    </body> </html>
  43. // recupera elemento do DOM var audioEl = document.getElementById('music'); !

    // cria nó var sourceNode = context.createMediaElementSource(audioEl);
  44. Capturando e reproduzindo som do microfone

  45. // captura áudio do microfone navigator.webkitGetUserMedia( { audio: true },

    sucessoCallback, falhaCallback ); ! function sucessoCallback(stream){ sourceNode = context.createMediaStreamSource(stream); // ... }
  46. Sintetizando sons

  47. Tipos de osciladores Sine Square Sawtooth Triangle Custom

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

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

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

  51. s jlongster.com/s/touch.html

  52. s hora do demo

  53. Gain Controlando o volume

  54. GainNode Interface

  55. gainNode ... outputNode inputNode ...

  56. gainNode

  57. gainNode var gainNode = context.createGain(); gainNode.gain.value = 0.2; // 20%

    volume Crie e configure ... outputNode inputNode ...
  58. inputNode.connect(gainNode); gainNode.connect(outputNode); Conecte os nós gainNode ... outputNode inputNode ...

  59. Cross-fading entre sons

  60. context.destination Crie o contexto e fontes midnightCity sadButTrue

  61. Crie gain nodes fadeOut fadeIn context.destination midnightCity sadButTrue

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

  63. Configure s fadeOut.gain.value = 1; // padrão fadeIn.gain.value = 0;

    context.destination fadeOut fadeIn midnightCity sadButTrue
  64. 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
  65. Mudança contínua e 1 0 current + fade current 3s

    sadButTrue midnightCity t vol
  66. s hora do demo

  67. Filters Aplicando efeitos

  68. BiquadFilterNode Interface

  69. Tipos de filtros Low pass High pass Band pass All

    pass Low shelf High shelf Peaking Notch
  70. Crie e configure filterNode e ... outputNode inputNode ... var

    filterNode = context.createBiquadFilter(); filterNode.type = ‘lowpass';
  71. Conecte os nós e inputNode.connect(filterNode); filterNode.connect(outputNode); filterNode ... outputNode inputNode

    ...
  72. s hora do demo

  73. Delay Atrasando tudo

  74. DelayNode Interface

  75. delayNode var delayNode = context.createDelay(5); delayNode.delayTime.value = 5; // seg

    Crie e configure ... outputNode inputNode ...
  76. inputNode.connect(delayNode); delayNode.connect(outputNode); Conecte os nós delayNode ... outputNode inputNode ...

  77. Eco

  78. context.destination Crie o contexto e fontes sadButTrue

  79. context.destination Crie delay nodes sadButTrue delayNode

  80. context.destination Crie gain nodes sadButTrue delayNode gainNode s

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

  82. s hora do demo

  83. Analyser Lendo dados em tempo real

  84. AnalyserNode Interface

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

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

    inputNode ...
  87. var dados = new Uint8Array( analyserNode.frequencyBinCount ); analyserNode.getByteFrequencyData(dados); Colete os

    dados opcional s analyserNode ... outputNode inputNode ...
  88. var dados = [ 230, 143, 98, 111, 125, 92,

    53, //... ]; Colete os dados s
  89. s airtightinteractive.com/demos/js/ reactive/

  90. s phenomnomnominal.github.com

  91. Convolver Realizando convolução de sinais

  92. ConvolverNode Interface

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

    inputNode ...
  94. 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 ...
  95. // onload convolverNode.buffer = context.createBuffer(request.response, false); Defina o buffer l

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

    ...
  97. s hora do demo

  98. s Outros experimentos

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

  100. s webaudiodemos.appspot.com/AudioRecorder

  101. s uglyhack.appspot.com/webaudiotoy/

  102. s Valeu! @ALMIRFILHO