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.

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