Repolode
Submit
jberg

jberg/butterchurn

A WebGL reimplementation of the classic Milkdrop music visualizer that renders Milkdrop presets in the browser using the Web Audio API.

Open-source alternative to:Winamp

View on GitHubWebsite
Stars
1,972
Forks
171
Open issues
24
Last commit
6 months ago

What is it?

Butterchurn is a JavaScript library that reimplements the Milkdrop music visualizer on WebGL, so Milkdrop-style visuals can run in any modern web browser. It takes audio from the Web Audio API and renders animated frames onto an HTML canvas.

Developers create a visualizer with a canvas and an audio context, connect an audio node from a source or microphone, and load a preset. Presets can be blended over a set number of seconds, and the renderer size can be changed at runtime. A companion package, butterchurn-presets, supplies a collection of ready-made presets.

Because it requires WebGL 2, the library includes a small helper for checking whether the current browser supports it. Several music players and apps have integrated it, including Webamp.

Key features

  • 01Renders Milkdrop presets on WebGL in the browser.
  • 02Takes audio input through the Web Audio API.
  • 03Blends between presets over a configurable time.
  • 04Resizes the renderer at runtime.
  • 05Ships a separate package with a collection of presets.
  • 06Includes a helper to detect WebGL 2 support.

Use cases

  • Adding a music visualizer to a web music player.
  • Visualizing audio from a web page or browser extension.
  • Building a live music or karaoke display in the browser.
  • Experimenting with Milkdrop presets in a web app.

Quick start

  1. 1

    Install the packages with npm

    npm install butterchurn butterchurn-presets
  2. 2

    Create a visualizer on a canvas connected to an audio context

  3. 3

    Load a preset and render frames

Things to know

  • Requires a browser with WebGL 2 support.

Topics

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

FAQ

What is butterchurn?
A WebGL reimplementation of the classic Milkdrop music visualizer that renders Milkdrop presets in the browser using the Web Audio API. Butterchurn is a JavaScript library that reimplements the Milkdrop music visualizer on WebGL, so Milkdrop-style visuals can run in any modern web browser. It takes audio from the Web Audio API and renders animated frames onto an HTML canvas.
Is butterchurn free to use? What license does it have?
butterchurn is open source under the MIT license. Check the license terms before using it in commercial products.
Is butterchurn still maintained?
No commits for 6+ months. The last commit to butterchurn was on Apr 20, 2026.
What can I use butterchurn for?
Adding a music visualizer to a web music player. Visualizing audio from a web page or browser extension. Building a live music or karaoke display in the browser. Experimenting with Milkdrop presets in a web app.
How do I install butterchurn?
Install the packages with npm: npm install butterchurn butterchurn-presets Create a visualizer on a canvas connected to an audio context Load a preset and render frames
Where can I get butterchurn?
The source code and installation instructions are on GitHub: https://github.com/jberg/butterchurn

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects