📅 Conexão KingHost 🚀 Especial Mês das Mulheres - Aulas para apoiar o empreendedorismo feminino 💰

Kinghost | Blog

Direto do BrazilJS: JavaScript loves music (JS <3 MUSIC)

Publicado em 06/10/2016

Atualizado em 26/10/2023

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é:

code1

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:

codigo

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:

code3

  • 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:

code4

O próximo passo na jornada é ligar a fonte de áudio ao contexto da Web Audio API.

code5

Para podermos analisar a fonte de som para posteriormente criar algum tipo de efeito visual a partir da mesma, é necessário criarmos um Analyzer.

code6

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.

code7

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.

code8

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.

code9

E aqui, o resultado da animação

code10

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.

O que você achou deste conteúdo?

O que você achou deste conteúdo?

Fernando

Fernando Nascimento

Cursando o último semestre do curso Análise e Desenvolvimento de Sistemas – ADS pela Faculdade Senac Porto Alegre, Desenvolvedor com web com mais de 10 anos de experiência e viciado em Lego nas horas vagas.

Fernando

Fernando Nascimento

Cursando o último semestre do curso Análise e Desenvolvimento de Sistemas – ADS pela Faculdade Senac Porto Alegre, Desenvolvedor com web com mais de 10 anos de experiência e viciado em Lego nas horas vagas.

Compartilhe esse conteúdo com alguém que possa gostar também

Conteúdos relacionados

As ameaças virtuais estão mudando constantemente e se tornando cada dia mais sofisticadas. Por isso, para quem tem um negócio online, a segurança é um ponto que merece grande atenção. De acordo com o Relatório do Sitelock que analisou 14 milhões de sites em 2022, sites recebem cerca de 5.5 vezes mais tráfego de bots...

📅 Aulão GRATUITO 🚀 Como VENDER MAIS na internet 💰

Mensagens para você