Web Audio API: Uma introdução concisa
•
2 gostaram•632 visualizações
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.
Recomendados
Mais conteúdo relacionado
Semelhante a Web Audio API: Uma introdução concisa
Semelhante a Web Audio API: Uma introdução concisa (20)
Web Audio API: Uma introdução concisa
- 1. @ALMIRFILHO
- 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 AudioAPI
- 9. BAIXO NÍVEL : DINAMICIDADE - Mixagem - Controle de canais - Panning (2d e 3d) - Gravação Web AudioAPI
- 10. Aplicações - Realidade aumentada - Hipermídia ...masprincipalmente...
- 11. Jogos
- 14. Elisha Gray 1876
- 19. W T F
- 20. Web Audio API
- 21. AudioContext
- 25. Fluxo de áudio
- 27. Nós
- 29. Nós Channel Splitter & Merger Script ProcessorJS Dynamic Compressor Wave Shaper Panner Destination
- 30. Channel Splitter & Merger Script ProcessorJS Dynamic Compressor Wave Shaper Panner Destination Sources Gain Filters Delay Analyser Convolver
- 32. Sources Fontes de dados mídia input sintetização
- 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.destinationsound.mp3
- 38. Crie o nó da fonte // onload var sourceNode = context.createBufferSource(); sourceNode.buffer = context.createBuffer(request.response, false); context.destinationsourceNode
- 39. Conecte os nós context.destinationsourceNode // conectando à saída sourceNode.connect(context.destination);
- 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);
- 45. // captura áudio do microfone navigator.webkitGetUserMedia( { audio: true }, sucessoCallback, falhaCallback ); ! function sucessoCallback(stream){ sourceNode = context.createMediaStreamSource(stream); // ... }
- 46. Sintetizandosons
- 48. context.destinationOscillator var sourceNode = context.createOscillator(); Crie o nó da fonte
- 52. s hora do demo
- 56. gainNode
- 57. gainNode var gainNode = context.createGain(); gainNode.gain.value = 0.2; // 20% volume Crie e configure ... outputNodeinputNode ...
- 60. context.destination Crie o contexto e fontes midnightCity sadButTrue
- 63. Configures fadeOut.gain.value = 1; // padrão fadeIn.gain.value = 0; context.destination fadeOut fadeInmidnightCity 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ínuae 1 0 current + fadecurrent 3s sadButTrue midnightCity t vol
- 66. s hora do demo
- 69. Tipos de filtros Low pass High pass Band pass All pass Low shelf High shelf Peaking Notch
- 70. Crie e configure filterNode e ... outputNodeinputNode ... var filterNode = context.createBiquadFilter(); filterNode.type = ‘lowpass';
- 72. s hora do demo
- 75. delayNode var delayNode = context.createDelay(5); delayNode.delayTime.value = 5; // seg Crie e configure ... outputNodeinputNode ...
- 77. Eco
- 78. context.destination Crie o contexto e fontes sadButTrue
- 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
- 85. analyserNode var analyserNode = context.createAnalyser(); Crie o analisador ... outputNodeinputNode ...
- 86. inputNode.connect(analyserNode); // analyserNode.connect(outputNode); Conecte os nós opcional analyserNode ... outputNodeinputNode ...
- 87. var dados = new Uint8Array( analyserNode.frequencyBinCount ); analyserNode.getByteFrequencyData(dados); Colete os dados opcional s analyserNode ... outputNodeinputNode ...
- 88. var dados = [ 230, 143, 98, 111, 125, 92, 53, //... ]; Colete os dadoss
- 91. Convolver Realizando convolução de sinais
- 93. convolverNode var convolverNode = context.createConvolver(); Crie o convolver ... outputNodeinputNode ...
- 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 bufferl buffer convolverNode ... outputNodeinputNode ...
- 97. s hora do demo
- 102. s Valeu! @ALMIRFILHO