A API de áudio da Web permite que os desenvolvedores carreguem e decodifiquem áudio sob demanda usando JavaScript. Quanto mais avalio jogos incríveis para Firefox OS TVs, mais aprendo sobre essas APIs que normalmente não tocaria. A seguir, um muito introdução básica à API WebAudio, geralmente usada para jogos ou aplicativos JavaScript que permitem a modificação do áudio no front-end.


Vamos começar com um exemplo de código reduzido da Web Audio API:



// Create an AudioContext instance for this sound
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
// Create a buffer for the incoming sound content
var source = audioContext.createBufferSource();
// Create the XHR which will grab the audio contents
var request = new XMLHttpRequest();
// Set the audio file src here
request.open('GET', 'sound-effect.mp3', true);
// Setting the responseType to arraybuffer sets up the audio decoding
request.responseType="arraybuffer";
request.onload = function() {
  // Decode the audio once the require is complete
  audioContext.decodeAudioData(request.response, function(buffer) {
    source.buffer = buffer;
    // Connect the audio to source (multiple audio buffers can be connected!)
    source.connect(audioContext.destination);
    // Simple setting for the buffer
    source.loop = true;
    // Play the sound!
    source.start(0);
  }, function(e) {
    console.log('Audio error! ', e);
  });
}
// Send the request which kicks off 
request.send();


Tentei fazer comentários no código para descrever o processo da melhor forma possível. Lembre-se de que o exemplo acima é muito reduzido; há muito mais que o senhor pode fazer com o Web Audio.




Não vou fingir ser um especialista em todas as nuances do Web Audio – simplesmente fiquei muito empolgado ao ver tudo isso funcionando. O Web Audio faz muito mais do que simplesmente permitir a reprodução do áudio; o senhor pode modificar o áudio com filtros, rampas e muito mais. O senhor pode saber mais sobre o WebAudio nessas fontes incríveis:


O senhor já fez algo incrível com o áudio da Web? Por favor, compartilhe com os novatos como eu!

  • Ícones favoritos de links de sites externos usando MooTools e CSS
  • Demonstrações favoritas de Sara Soueidan’s CodePen