$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. almirfilho
    almirfilho

    View Slide

  3. onde trabalho

    View Slide

  4. onde compartilho conhecimento
    loopinfinito

    View Slide

  5. Web Audio
    API

    View Slide

  6. ?

    View Slide

  7. ALTO NÍVEL : ABSTRAÇÃO
    - Carregamento (buffering e streaming)
    - Codificação (encoding)
    - Controle da mídia (API simples)
    - Eventos

    View Slide

  8. BAIXO NÍVEL : DINAMICIDADE
    - Baixa latência
    - Filtros e efeitos
    - Maior precisão temporal
    - Sintetização de sons
    Web Audio API

    View Slide

  9. BAIXO NÍVEL : DINAMICIDADE
    - Mixagem
    - Controle de canais
    - Panning (2d e 3d)
    - Gravação
    Web Audio API

    View Slide

  10. Aplicações
    - Realidade aumentada
    - Hipermídia
    . . .mas principalmente. . .

    View Slide

  11. Jogos

    View Slide

  12. Web Audio

    View Slide

  13. Um pouco de
    história

    View Slide

  14. Elisha Gray
    1876

    View Slide

  15. Sintetizador das antigas

    View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. W T F

    View Slide

  20. Web Audio
    API

    View Slide

  21. AudioContext

    View Slide

  22. AudioContext
    fonte destino

    View Slide

  23. fonte destino
    ?
    JS
    a brincadeira
    acontece aqui

    View Slide

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

    View Slide

  25. Fluxo de
    áudio

    View Slide

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

    View Slide

  27. Nós

    View Slide

  28. Nós
    Sources
    Gain
    Filters
    Delay
    Analyser
    Convolver

    View Slide

  29. Nós
    Channel
    Splitter & Merger
    Script
    Processor
    JS
    Dynamic
    Compressor
    Wave Shaper
    Panner
    Destination

    View Slide

  30. Channel
    Splitter & Merger
    Script
    Processor
    JS
    Dynamic
    Compressor
    Wave Shaper
    Panner
    Destination
    Sources
    Gain
    Filters
    Delay
    Analyser
    Convolver

    View Slide

  31. Sources
    Fontes de dados

    View Slide

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

    View Slide

  33. View Slide

  34. BufferSource
    MediaElementSource
    MediaStreamSource
    Interfaces
    OscillatorNode

    View Slide

  35. Carregando e
    reproduzindo
    uma mídia

    View Slide

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

    View Slide

  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

    View Slide

  38. Crie o nó da fonte
    // onload
    var sourceNode = context.createBufferSource();
    sourceNode.buffer =
    context.createBuffer(request.response, false);
    context.destination
    sourceNode

    View Slide

  39. Conecte os nós
    context.destination
    sourceNode
    // conectando à saída
    sourceNode.connect(context.destination);

    View Slide

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

    View Slide

  41. Reproduzindo o
    conteúdo de um

    < >

    View Slide



  42. ...

    ...

    ...


    View Slide

  43. // recupera elemento do DOM
    var audioEl =
    document.getElementById('music');
    !
    // cria nó
    var sourceNode =
    context.createMediaElementSource(audioEl);

    View Slide

  44. Capturando e
    reproduzindo som
    do microfone

    View Slide

  45. // captura áudio do microfone
    navigator.webkitGetUserMedia(
    { audio: true },
    sucessoCallback,
    falhaCallback
    );
    !
    function sucessoCallback(stream){
    sourceNode =
    context.createMediaStreamSource(stream);
    // ...
    }

    View Slide

  46. Sintetizando sons

    View Slide

  47. Tipos de osciladores
    Sine
    Square
    Sawtooth
    Triangle
    Custom

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. s
    hora do demo

    View Slide

  53. Gain
    Controlando o volume

    View Slide

  54. GainNode
    Interface

    View Slide

  55. gainNode
    ...
    outputNode
    inputNode
    ...

    View Slide

  56. gainNode

    View Slide

  57. gainNode
    var gainNode = context.createGain();
    gainNode.gain.value = 0.2; // 20% volume
    Crie e configure
    ...
    outputNode
    inputNode
    ...

    View Slide

  58. inputNode.connect(gainNode);
    gainNode.connect(outputNode);
    Conecte os nós
    gainNode
    ...
    outputNode
    inputNode
    ...

    View Slide

  59. Cross-fading
    entre sons

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  65. Mudança contínua
    e
    1
    0
    current + fade
    current
    3s
    sadButTrue
    midnightCity
    t
    vol

    View Slide

  66. s
    hora do demo

    View Slide

  67. Filters
    Aplicando efeitos

    View Slide

  68. BiquadFilterNode
    Interface

    View Slide

  69. Tipos de filtros
    Low pass
    High pass
    Band pass
    All pass
    Low shelf
    High shelf
    Peaking
    Notch

    View Slide

  70. Crie e configure
    filterNode
    e
    ...
    outputNode
    inputNode
    ...
    var filterNode = context.createBiquadFilter();
    filterNode.type = ‘lowpass';

    View Slide

  71. Conecte os nós
    e
    inputNode.connect(filterNode);
    filterNode.connect(outputNode);
    filterNode
    ...
    outputNode
    inputNode
    ...

    View Slide

  72. s
    hora do demo

    View Slide

  73. Delay
    Atrasando tudo

    View Slide

  74. DelayNode
    Interface

    View Slide

  75. delayNode
    var delayNode = context.createDelay(5);
    delayNode.delayTime.value = 5; // seg
    Crie e configure
    ...
    outputNode
    inputNode
    ...

    View Slide

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

    View Slide

  77. Eco

    View Slide

  78. context.destination
    Crie o contexto e fontes
    sadButTrue

    View Slide

  79. context.destination
    Crie delay nodes
    sadButTrue
    delayNode

    View Slide

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

    View Slide

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

    View Slide

  82. s
    hora do demo

    View Slide

  83. Analyser
    Lendo dados em tempo real

    View Slide

  84. AnalyserNode
    Interface

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  88. var dados = [
    230,
    143,
    98,
    111,
    125,
    92,
    53,
    //...
    ];
    Colete os dados
    s

    View Slide

  89. s
    airtightinteractive.com/demos/js/
    reactive/

    View Slide

  90. s
    phenomnomnominal.github.com

    View Slide

  91. Convolver
    Realizando convolução de sinais

    View Slide

  92. ConvolverNode
    Interface

    View Slide

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

    View Slide

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

    View Slide

  95. // onload
    convolverNode.buffer =
    context.createBuffer(request.response, false);
    Defina o buffer
    l
    buffer
    convolverNode
    ...
    outputNode
    inputNode
    ...

    View Slide

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

    View Slide

  97. s
    hora do demo

    View Slide

  98. s
    Outros
    experimentos

    View Slide

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

    View Slide

  100. s
    webaudiodemos.appspot.com/AudioRecorder

    View Slide

  101. s
    uglyhack.appspot.com/webaudiotoy/

    View Slide

  102. s Valeu!
    @ALMIRFILHO

    View Slide