📅 Ebook GRATUITO 🚀 Como preparar o seu site para receber muitos acessos? 💰

Kinghost | Blog

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

Publicado em 06/10/2016

Atualizado em 26/04/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

Se você trabalha diariamente na internet, com certeza em algum momento se preocupou com a segurança das suas informações. Afinal, diversos dados pessoais e bancários são acessados todos os dias. Nesse contexto, cada dia mais existe a necessidade de reforçar a segurança dos seus dados e se proteger de possíveis golpes no mundo online. Por...
Você já ouviu falar de chatbot? Provavelmente a resposta é sim. Isso porque, essa tecnologia tem ganhado cada vez mais espaço na comunicação digital. Afinal, com a evolução tecnológica e as inúmeras ferramentas que prometem facilitar nossa rotina, os chatbots garantem destaque em diversos setores, desde atendimento ao cliente até vendas e marketing. Neste artigo,...
Você certamente já passou pela frustração de abrir um site que demora uma eternidade para carregar. Então, sabe como isso é irritante, não é mesmo? Com isso, sabe que a velocidade do site desempenha um papel fundamental na experiência dos usuários e no sucesso do seu negócio online.  Neste artigo, você vai conhecer as melhores...
Aprender a programar nunca foi tão fácil! Visto que, hoje em dia, existem diversos recursos gratuitos na web que podem te ajudar nessa jornada.  Então, se você é um completo novato no assunto, não se preocupe, esses recursos são perfeitos para você.  Mas não pense que eles são exclusivos para iniciantes, pois mesmo quem já...

Assine a nossa newsletter e receba conteúdos para apoiar o crescimento do seu negócio

Sem Título(obrigatório)

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

Mensagens para você