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!
Filtros CSS
O suporte a filtros CSS foi lançado recentemente nos nightlies do WebKit. Filtros CSS fornecem um método para modificar a renderização de um elemento DOM básico, imagem ou vídeo. Os filtros CSS permitem desfocar, distorcer e modificar a intensidade da cor dos elementos. Vamos lá…
Uma entrevista com Eric Meyer
Seus primeiros livros sobre CSS foram fundamentais para impulsionar meu amor pelas tecnologias de front-end. O que havia no CSS que o senhor se apaixonou e o levou a escrever sobre ele?