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?

