Repolode
Enviar
jberg

jberg/butterchurn

Uma reimplementação em WebGL do clássico visualizador musical Milkdrop, que renderiza presets Milkdrop no navegador usando a Web Audio API.

Alternativa open source a:Winamp

Ver no GitHubSite
Estrelas
1,972
Forks
171
Issues abertas
24
Último commit
há 6 meses

O que é?

Butterchurn é uma biblioteca JavaScript que reimplementa o visualizador musical Milkdrop em WebGL, permitindo que visuais no estilo Milkdrop sejam executados em qualquer navegador moderno. Ela recebe áudio pela Web Audio API e renderiza quadros animados em um canvas HTML.

Para criar um visualizador, os desenvolvedores usam um canvas e um contexto de áudio, conectam um nó de áudio de uma fonte ou de um microfone e carregam um preset. É possível fazer a transição entre presets ao longo de um número definido de segundos e alterar o tamanho do renderizador durante a execução. Um pacote complementar, butterchurn-presets, oferece uma coleção de presets prontos.

Como requer WebGL 2, a biblioteca inclui um pequeno helper para verificar se o navegador atual oferece suporte. Vários players de música e aplicativos já a integraram, incluindo o Webamp.

Recursos principais

  • 01Renderiza presets Milkdrop em WebGL no navegador.
  • 02Recebe áudio pela Web Audio API.
  • 03Faz a transição entre presets em um intervalo configurável.
  • 04Redimensiona o renderizador durante a execução.
  • 05Disponibiliza um pacote separado com uma coleção de presets.
  • 06Inclui um helper para detectar suporte a WebGL 2.

Casos de uso

  • Adicionar um visualizador musical a um player de música na web.
  • Visualizar áudio de uma página da web ou extensão de navegador.
  • Criar uma exibição de música ao vivo ou karaokê no navegador.
  • Experimentar presets Milkdrop em um aplicativo web.

Início rápido

  1. 1

    Instale os pacotes com npm

    npm install butterchurn butterchurn-presets
  2. 2

    Crie um visualizador em um canvas conectado a um contexto de áudio

  3. 3

    Carregue uma predefinição e renderize os quadros

Antes de usar

  • É necessário um navegador compatível com WebGL 2.

Tópicos

#music-visualizer#webgl#webaudio-api#visualization#javascript#milkdrop#assemblyscript#reimplementation#wasm#webgl2

Perguntas frequentes

O que é butterchurn?
Uma reimplementação em WebGL do clássico visualizador musical Milkdrop, que renderiza presets Milkdrop no navegador usando a Web Audio API. Butterchurn é uma biblioteca JavaScript que reimplementa o visualizador musical Milkdrop em WebGL, permitindo que visuais no estilo Milkdrop sejam executados em qualquer navegador moderno. Ela recebe áudio pela Web Audio API e renderiza quadros animados em um canvas HTML.
butterchurn é gratuito? Qual é a licença?
butterchurn é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
butterchurn ainda é mantido?
Sem commits há mais de 6 meses. O último commit de butterchurn foi em 20 de abr. de 2026.
Para que posso usar butterchurn?
Adicionar um visualizador musical a um player de música na web. Visualizar áudio de uma página da web ou extensão de navegador. Criar uma exibição de música ao vivo ou karaokê no navegador. Experimentar presets Milkdrop em um aplicativo web.
Como instalar butterchurn?
Instale os pacotes com npm: npm install butterchurn butterchurn-presets Crie um visualizador em um canvas conectado a um contexto de áudio Carregue uma predefinição e renderize os quadros
Onde consigo butterchurn?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/jberg/butterchurn

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados