Nesse post vou fazer um resumo sobre o assunto abordado na palestra “JS LOVES MUSIC (JS <3 MUSIC)” apresentada por Willian Justen no BrazilJS 2016. Willian além de ser um entusiasta do javascript e possuir alguns cursos em seu site, demonstrou o quão simples e divertido pode ser desenvolver aplicações web interativas utilizando a Web Audio API.
O Passado, presente e o futuro
Aquela página com uma musiquinha chata tocando ao fundo está há muito tempo ultrapassada. Com os avanços do HTML 5, ficou cada vez mais simples trabalhar com bibliotecas multimídia, seja com vídeo ou com sons através da tag <audio>. Atualmente, adicionar áudio a uma página é tão simples quanto ir buscar mais uma xícara de café:
Como é possível observar, alguns atributos como controls, preload, autoplay e loop permitem melhorar um pouco a utilização da tag <audio>. Além desses atributos, é possível criar alguns controles personalizados utilizando um pouco de JavaScript:
Apesar de toda essa simplicidade, trabalhar apenas com a tag <audio> implica em algumas limitações, entre elas:
- Fontes de áudio limitada
- Problemas ao tocar sons ao mesmo tempo
- Dificuldade para controlar o tempo
- Não faz pre-buffer (não confundir com o preload)
- Não faz análise de sons
- Não permite aplicação de efeitos em real time
Web Audio API
Diferentemente da tag <audio>, a Web Audio API nos permite um controle bem mais avançado sobre diferentes fontes de áudio. Podemos dividi-la basicamente em quatro áreas distintas:
- Audio Context: o contexto no qual todo o processamento de áudio está inserido
- Inputs: entrada de som, seja uma música, o microfone, ou algum instrumento
- Effects: efeitos como Delay, Filter, Compressor, Gain, e a análise de som propriamente dita
- Destination: caixas de som
Assim como qualquer outra biblioteca, vamos criar um “Hello World” da Web Audio API. Inicialmente, vamos criar a fonte de som, ou seja, o que será utilizado como nosso Input:
O próximo passo na jornada é ligar a fonte de áudio ao contexto da Web Audio API.
Para podermos analisar a fonte de som para posteriormente criar algum tipo de efeito visual a partir da mesma, é necessário criarmos um Analyzer.
A variável fbc_array irá conter toda informação extraída da fonte, tendo seu valor constantemente atualizado. Em seguida, precisamos conectar o Analyzer criado a ao destination, no caso, as caixas de som do computador.
Como já possuímos os dados referentes a origem sendo constantemente atualizados, resta a criação da animação. Para isto, é criado um método que a cada atualização da tela irá exibir um frame referente aos dados obtidos da nossa origem (música) em um determinado momento.
Aqui a “mágica” acontece, podemos escrever o método render da maneira que preferirmos. Neste caso, o método irá exibir barras verticais paralelas representando um equalizador. A cada novo frame, as barras são redesenhadas com os valores existentes na variável fbc_array.
E aqui, o resultado da animação
Como é possível observar, com poucas linhas de códigos é possível criar visualizações bem interessantes. O Exemplo acima exibe barras verticais, mas com um pouco mais de imaginação é possível criar diversas outras formas e animações.
Outros exemplos de visualizações bem legais podem ser conferidas abaixo:
Se você se interessou pelo assunto, os slides da palestra estão disponíveis no Github do Willian Justen. O vídeo da palestra também pode ser conferido no Youtube.
