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. 7.

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

    Codificação (encoding) - Controle da mídia (API simples) - Eventos <audio>
  2. 8.

    BAIXO NÍVEL : DINAMICIDADE - Baixa latência - Filtros e

    efeitos - Maior precisão temporal - Sintetização de sons Web Audio API
  3. 9.

    BAIXO NÍVEL : DINAMICIDADE - Mixagem - Controle de canais

    - Panning (2d e 3d) - Gravação Web Audio API
  4. 11.
  5. 16.
  6. 17.
  7. 18.
  8. 19.
  9. 27.
  10. 30.

    Channel Splitter & Merger Script Processor JS Dynamic Compressor Wave

    Shaper Panner Destination Sources Gain Filters Delay Analyser Convolver
  11. 33.
  12. 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
  13. 38.

    Crie o nó da fonte // onload var sourceNode =

    context.createBufferSource(); sourceNode.buffer = context.createBuffer(request.response, false); context.destination sourceNode
  14. 43.

    // recupera elemento do DOM var audioEl = document.getElementById('music'); !

    // cria nó var sourceNode = context.createMediaElementSource(audioEl);
  15. 45.

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

    sucessoCallback, falhaCallback ); ! function sucessoCallback(stream){ sourceNode = context.createMediaStreamSource(stream); // ... }
  16. 56.
  17. 57.

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

    volume Crie e configure ... outputNode inputNode ...
  18. 63.

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

    context.destination fadeOut fadeIn midnightCity sadButTrue
  19. 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
  20. 65.
  21. 69.

    Tipos de filtros Low pass High pass Band pass All

    pass Low shelf High shelf Peaking Notch
  22. 70.

    Crie e configure filterNode e ... outputNode inputNode ... var

    filterNode = context.createBiquadFilter(); filterNode.type = ‘lowpass';
  23. 77.

    Eco

  24. 88.

    var dados = [ 230, 143, 98, 111, 125, 92,

    53, //... ]; Colete os dados s
  25. 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 ...