Repolode
Enviar
jberg

jberg/butterchurn

Reimplementación en WebGL del clásico visualizador musical Milkdrop, que muestra sus presets en el navegador mediante la Web Audio API.

Alternativa open source a:Winamp

Ver en GitHubSitio web
Estrellas
1,972
Forks
171
Issues abiertos
24
Último commit
hace 6 meses

¿Qué es?

Butterchurn es una biblioteca de JavaScript que reimplementa el visualizador musical Milkdrop con WebGL para que los efectos visuales de estilo Milkdrop funcionen en cualquier navegador web moderno. Toma el audio de la Web Audio API y renderiza fotogramas animados en un canvas HTML.

Para crear un visualizador, los desarrolladores usan un canvas y un contexto de audio, conectan un nodo de audio de una fuente o un micrófono y cargan un preset. Los presets se pueden combinar durante un número determinado de segundos, y el tamaño del renderizador se puede cambiar en tiempo de ejecución. El paquete complementario butterchurn-presets incluye una colección de presets listos para usar.

Como requiere WebGL 2, la biblioteca incluye una pequeña utilidad para comprobar si el navegador actual lo admite. Varios reproductores de música y aplicaciones lo han integrado, incluido Webamp.

Funciones clave

  • 01Renderiza presets de Milkdrop con WebGL en el navegador.
  • 02Recibe audio mediante la Web Audio API.
  • 03Combina presets durante un intervalo configurable.
  • 04Cambia el tamaño del renderizador en tiempo de ejecución.
  • 05Incluye un paquete independiente con una colección de presets.
  • 06Incluye una utilidad para detectar si hay compatibilidad con WebGL 2.

Casos de uso

  • Añadir un visualizador musical a un reproductor de música web.
  • Visualizar audio de una página web o una extensión del navegador.
  • Crear una pantalla de música en directo o karaoke en el navegador.
  • Probar presets de Milkdrop en una aplicación web.

Inicio rápido

  1. 1

    Instala los paquetes con npm

    npm install butterchurn butterchurn-presets
  2. 2

    Crea un visualizador en un canvas conectado a un contexto de audio

  3. 3

    Carga un ajuste preestablecido y renderiza fotogramas

Antes de usarlo

  • Se requiere un navegador compatible con WebGL 2.

Temas

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

Preguntas frecuentes

¿Qué es butterchurn?
Reimplementación en WebGL del clásico visualizador musical Milkdrop, que muestra sus presets en el navegador mediante la Web Audio API. Butterchurn es una biblioteca de JavaScript que reimplementa el visualizador musical Milkdrop con WebGL para que los efectos visuales de estilo Milkdrop funcionen en cualquier navegador web moderno. Toma el audio de la Web Audio API y renderiza fotogramas animados en un canvas HTML.
¿butterchurn es gratuito? ¿Qué licencia tiene?
butterchurn es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿butterchurn sigue mantenido?
Sin commits en más de 6 meses. El último commit de butterchurn fue el 20 abr 2026.
¿Para qué puedo usar butterchurn?
Añadir un visualizador musical a un reproductor de música web. Visualizar audio de una página web o una extensión del navegador. Crear una pantalla de música en directo o karaoke en el navegador. Probar presets de Milkdrop en una aplicación web.
¿Cómo se instala butterchurn?
Instala los paquetes con npm: npm install butterchurn butterchurn-presets Crea un visualizador en un canvas conectado a un contexto de audio Carga un ajuste preestablecido y renderiza fotogramas
¿Dónde consigo butterchurn?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/jberg/butterchurn

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados