Visualizadores de áudio transformam som em movimento. Provavelmente já os viu como barras ou ondas coloridas em videoclipes ou podcasts. A parte legal? Você pode criar um você mesmo usando um código simples. Neste guia, você aprenderá como criar um visualizador de áudio com HTML, CSS e JavaScript.

Usaremos ferramentas de navegador integradas como a Web Audio API e o Canvas. Você pode até usar um microfone para visualizar sua voz. Para um som limpo, um microfone como o Hollyland LARK M2 ajuda muito. Ele captura áudio nítido com baixo ruído, para que seus visuais reajam melhor à música, fala ou instrumentos.

Hollyland LARK M2 - Mini Lavalier Microphone

An incredibly lightweight and compact wireless button microphone that captures high-fidelity audio.

Key Features: 9g Button Size | 48 kHz/24-bit | 40 Hours Battery

Check on Amazon

Ferramentas essenciais para criar um visualizador de áudio HTML/CSS/JS

Antes de começar a construir, certifique-se de ter algumas ferramentas essenciais prontas. Tudo aqui é gratuito e amigável para iniciantes.

• Um navegador moderno (Chrome, Firefox ou Edge)
• Um editor de código (VS Code, Sublime Text, etc.)
• Um arquivo de áudio local (MP3 ou WAV)
• Conhecimento básico de HTML e JavaScript
• Opcional: Um microfone (como o LARK M2) para entrada em tempo real

Começaremos fazendo o upload de um arquivo para visualizar, depois mostraremos como usar seu microfone.

O que é um visualizador de áudio?

Um visualizador de áudio é uma ferramenta que ouve o som e o desenha como formas. Podem ser barras, círculos, ondas ou outra coisa. As formas mudam com base no tom e no volume. Os visualizadores leem a frequência e a amplitude em tempo real e convertem esses dados em movimento.

Eles tornam o áudio mais envolvente, especialmente para podcasts, música ou transmissões ao vivo.

Compreendendo a Web Audio API

A Web Audio API permite que o JavaScript analise e manipule o som. Ela permite que você faça coisas como:

• Reproduzir arquivos de áudio
• Usar seu microfone
• Visualizar frequências
• Aplicar filtros e efeitos

Usaremos o AnalyserNode para ler dados de frequência em tempo real e a Canvas API para desenhar barras que reagem a eles.

Tutorial completo para codificar um visualizador de áudio com HTML/JS

Se você é novo em HTML, não se preocupe. Vamos analisar o que este bloco de código faz para que você saiba exatamente o que está construindo e por que cada parte importa.

Passo 1: declarar o tipo de documento e iniciar o documento HTML

Esta linha informa ao navegador que você está escrevendo um documento HTML5. Ela é sempre colocada no topo do seu arquivo HTML. Em seguida, inicie o documento HTML com a tag .

Passo 2: iniciar o documento HTML

Isso abre o contêiner principal para sua página HTML. O atributo lang=”en” simplesmente informa ao navegador (e aos motores de busca) que sua página está escrita em inglês.

Passo 3: seção head

Tudo dentro da tag contém configurações e metadados para sua página da web.

• : Isso garante que sua página suporte todos os caracteres padrão, incluindo símbolos especiais.
• : Isso vincula sua página HTML a um arquivo CSS externo, que controlará a aparência do seu visualizador.

Passo 4: conteúdo do body

É aqui que todas as partes visíveis e interativas da sua página da web ficam:

• Visualizador de áudio

  : Um título. Isso aparece no topo da página para informar aos usuários para que serve a ferramenta.
• : Isso cria um botão de upload de arquivo. Quando o usuário clica nele, ele pode escolher um arquivo de áudio do seu computador. É assim que alimentaremos o som no visualizador.
• : Esta é a área de desenho. O JavaScript que você escreverá mais tarde usará este canvas para desenhar barras e formas coloridas que se movem com o áudio.
• : Isso carrega seu arquivo JavaScript. É onde toda a lógica para o visualizador reside, incluindo a reprodução do som e a animação das barras.

Passo 5: fechar o HTML

Isso simplesmente encerra seu documento HTML enquanto adiciona uma entrada de arquivo e um canvas para desenhar o visual.

Passo 6: estilizar a Página (style.css)

Esta parte do seu projeto controla a aparência da sua página. Não estamos mudando como nada funciona, apenas como aparece para os usuários. Vamos detalhar passo a passo.

O body estilo

body {

background-color: #111;

color: white;

font-family: Arial, sans-serif;

text-align: center;

}

• background-color: #111; Isso dá à página inteira um fundo cinza escuro (quase preto). Ajuda as barras de áudio coloridas a se destacarem.
• color: white;
  Todo o texto na página (como o título) aparecerá em branco.
• font-family: Arial, sans-serif;
  Define o texto para usar a fonte Arial primeiro. Se não estiver disponível, ele retorna a uma fonte sans-serif genérica. Isso mantém o texto com uma aparência limpa e moderna.
• text-align: center;
  Isso centraliza o título e outros elementos de texto no meio da página.

O canvas estilo

canvas {

background-color: black;

margin-top: 20px;

display: block;

margin-left: auto;

margin-right: auto;

border: 2px solid #444;

}

• background-color: black;
  Define o canvas (a área onde a animação acontece) como preto puro, o que dá ao seu visualizador uma aparência elegante.
• margin-top: 20px;
  Adiciona espaço entre o canvas e o título ou a entrada de arquivo.
• display: block;
  Garante que o canvas seja tratado como um elemento de nível de bloco para que você possa estilizá-lo corretamente.
• margin-left: auto;
  margin-right: auto;
  Essas duas linhas centralizam horizontalmente o canvas na página.
  
• border: 2px solid #444;
  Desenha uma borda fina e cinza escura ao redor do canvas. Isso dá ao visualizador uma aparência emoldurada e polida.

Passo 7: Adicionar o JavaScript (app.js)

Essas linhas pegam elementos do seu HTML:

• fileInput é o seletor de arquivos
• canvas é onde a animação aparecerá
• ctx é o contexto de desenho. Ele nos permite desenhar no canvas usando formas 2D

Passo 8: definir o tamanho do canvas

Isso define as dimensões do canvas para 800 pixels de largura e 300 pixels de altura.

Passo 9: ouvir o upload de arquivo

Esta linha informa ao navegador: “Quando alguém faz o upload de um arquivo de áudio, execute o código dentro desta função.”

Passo 10: configurar o contexto de áudio

Isso cria um novo contexto de áudio. É um ambiente especial onde o som pode ser analisado ou modificado.

Passo 11: carregar o arquivo

Isso obtém o arquivo selecionado pelo usuário e configura um leitor para decodificá-lo.

Passo 12: decodificar o arquivo de áudio

Quando o arquivo é carregado, esta função decodifica os dados de áudio em um formato que o navegador pode entender.

Passo 13: criar a fonte de áudio

Isso cria uma nova fonte de áudio e a conecta ao áudio decodificado.

Passo 14: criar o analisador

Aqui, o AnalyserNode é configurado para ler dados de frequência. fftSize controla o quão detalhada é a leitura. O dataArray armazenará esses valores de frequência como números que podemos usar para desenhar visuais.

Passo 15: conectar os nós

Isso conecta tudo em uma cadeia:

1. A fonte envia som para o analisador.
2. O analisador envia som para os alto-falantes.
3. A fonte começa a tocar.

Passo 16: a função de animação

Esta função desenha as barras e continua chamando a si mesma, criando um loop que é executado cerca de 60 vezes por segundo.

Passo 17: obter dados de frequência

Isso preenche o dataArray com valores de frequência de 0 a 255.

Passo 18: limpar o canvas

Essas linhas pintam o canvas de preto antes de desenhar novas barras, para que você não tenha poluição visual.

Passo 19: configurar as dimensões da barra

Calculamos a largura de cada barra, depois começamos a desenhar da esquerda (x = 0).

Passo 20: desenhar as barras

A altura de cada barra é baseada no valor da frequência. A cor muda ligeiramente dependendo da altura, criando um efeito animado legal.

• ctx.fillRect() desenha cada retângulo.
• Movemos x para frente a cada vez para espaçar as barras uniformemente.

Passo 21: iniciar a animação

Isso inicia a função de animação assim que o áudio toca.

Passo 22: ler os dados de áudio

Finalmente, esta linha informa ao leitor para começar a processar o arquivo de áudio carregado.

Como usar um microfone para visualização de áudio ao vivo

Veja como capturar som ao vivo em vez de um arquivo:

É aqui que o LARK M2 se destaca. Ele é sem fio, leve e oferece áudio limpo e balanceado. Ao visualizar som ao vivo, a qualidade do microfone importa. O LARK M2 ajuda a evitar interrupções e picos de ruído.

Arquivo vs. Microfone: Qual você deve usar?

Bônus: experimente um visualizador de áudio circular para um visual ÚNICO

Quer algo diferente? Experimente este visual radial:

Isso cria um anel pulsante de pontos, ótimo para músicas ou faixas de meditação.

Como estilizar e personalizar seu visualizador de áudio

• Experimente gradientes com ctx.createLinearGradient()
• Fazer o canvas redimensionar com o tamanho da janela
• Adicionar botões de pausa/reprodução para controle do usuário
• Gravar a tela para transformá-lo em um vídeo
• Usar ctx.globalAlpha para rastros de desvanecimento

Do código para a web: publique seu visualizador facilmente

Quer compartilhar seu trabalho?

1. Hospede-o gratuitamente no GitHub Pages ou Netlify
2. Faça o upload do seu HTML, CSS e JS
3. Link para sua página ao vivo
4. Bônus: Adicione branding de áudio e visual para torná-lo pessoal

Conclusão

Você acabou de construir seu próprio visualizador de áudio funcional! Seja usando arquivos ou um microfone ao vivo como o Hollyland LARK M2, agora você tem um projeto que dá vida ao som.

Você aprendeu como:

• Usar a Web Audio API para analisar o som
• Desenhar visuais no canvas
• Capturar som de um arquivo ou de um microfone
• Criar animações de barra e circulares

Agora vá experimentar. Experimente novas formas, combine ferramentas ou conecte-o a aplicativos de música. As possibilidades criativas são infinitas.

Perguntas Frequentes

1. Posso usar isso com aplicativos de streaming de música?

Não diretamente. Devido à segurança do navegador e direitos autorais, você não pode acessar streams de aplicativos como o Spotify. Em vez disso, use arquivos baixados ou uma entrada de microfone.

2. Isso funcionará em dispositivos móveis?

Na maioria das vezes, sim. Mas alguns navegadores limitam a reprodução de áudio e o acesso ao microfone. É melhor testar em um desktop primeiro e depois ajustar para dispositivos móveis.

3. Como posso salvar isso como um vídeo?

Use um software de gravação de tela como OBS ou Loom. Você pode então editar o visualizador em videoclipes, reels ou introduções.