Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Almir Filho

March 09, 2013
Tweet

More Decks by Almir Filho

Other Decks in Programming

Transcript

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

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

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

    - Panning (2d e 3d) - Gravação Web Audio API
  4. Channel Splitter & Merger Script Processor JS Dynamic Compressor Wave

    Shaper Panner Destination Sources Gain Filters Delay Analyser Convolver
  5. 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
  6. Crie o nó da fonte // onload var sourceNode =

    context.createBufferSource(); sourceNode.buffer = context.createBuffer(request.response, false); context.destination sourceNode
  7. // recupera elemento do DOM var audioEl = document.getElementById('music'); !

    // cria nó var sourceNode = context.createMediaElementSource(audioEl);
  8. // captura áudio do microfone navigator.webkitGetUserMedia( { audio: true },

    sucessoCallback, falhaCallback ); ! function sucessoCallback(stream){ sourceNode = context.createMediaStreamSource(stream); // ... }
  9. gainNode var gainNode = context.createGain(); gainNode.gain.value = 0.2; // 20%

    volume Crie e configure ... outputNode inputNode ...
  10. Configure s fadeOut.gain.value = 1; // padrão fadeIn.gain.value = 0;

    context.destination fadeOut fadeIn midnightCity sadButTrue
  11. 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
  12. Tipos de filtros Low pass High pass Band pass All

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

    filterNode = context.createBiquadFilter(); filterNode.type = ‘lowpass';
  14. Eco

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

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