jberg/butterchurn

Butterchurn is a WebGL implementation of the Milkdrop Visualizer

JavaScript

1,965

202 commits

updated Apr 20, 2026

See the code

README

Butterchurn

Butterchurn is a WebGL implementation of the Milkdrop Visualizer

Try it out

Butterchurn Screenshot

Usage

Installation

With pnpm, yarn or npm installed, run

$ pnpm add butterchurn butterchurn-presets
or
$ yarn add butterchurn butterchurn-presets
or
$ npm install butterchurn butterchurn-presets

Create a visualizer

import butterchurn from 'butterchurn';
import butterchurnPresets from 'butterchurn-presets';

// initialize audioContext and get canvas

const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
  width: 800,
  height: 600
});

// get audioNode from audio source or microphone

visualizer.connectAudio(audioNode);

// load a preset

const presets = butterchurnPresets.getPresets();
const preset = presets['Flexi, martin + geiss - dedicated to the sherwin maxawow'];

visualizer.loadPreset(preset, 0.0); // 2nd argument is the number of seconds to blend presets

// resize visualizer

visualizer.setRendererSize(1600, 1200);

// render a frame

visualizer.render();

Browser Support

Butterchurn requires the browser support WebGL 2.

You can test for support using our minimal isSupported script:

import isButterchurnSupported from "butterchurn/lib/isSupported.min";

if (isButterchurnSupported()) {
  // Load and use butterchurn
}

Integrations

Thanks

License

This project is licensed under the MIT License - see the LICENSE file for details

assemblyscript
music-visualizer
reimplementation
visualization
wasm
webaudio-api
webgl
webgl2

jberg/butterchurn

Butterchurn is a WebGL implementation of the Milkdrop Visualizer

JavaScript

1,965

202 commits

updated Apr 20, 2026

See the code

README

Butterchurn

Butterchurn is a WebGL implementation of the Milkdrop Visualizer

Try it out

Butterchurn Screenshot

Usage

Installation

With pnpm, yarn or npm installed, run

$ pnpm add butterchurn butterchurn-presets
or
$ yarn add butterchurn butterchurn-presets
or
$ npm install butterchurn butterchurn-presets

Create a visualizer

import butterchurn from 'butterchurn';
import butterchurnPresets from 'butterchurn-presets';

// initialize audioContext and get canvas

const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
  width: 800,
  height: 600
});

// get audioNode from audio source or microphone

visualizer.connectAudio(audioNode);

// load a preset

const presets = butterchurnPresets.getPresets();
const preset = presets['Flexi, martin + geiss - dedicated to the sherwin maxawow'];

visualizer.loadPreset(preset, 0.0); // 2nd argument is the number of seconds to blend presets

// resize visualizer

visualizer.setRendererSize(1600, 1200);

// render a frame

visualizer.render();

Browser Support

Butterchurn requires the browser support WebGL 2.

You can test for support using our minimal isSupported script:

import isButterchurnSupported from "butterchurn/lib/isSupported.min";

if (isButterchurnSupported()) {
  // Load and use butterchurn
}

Integrations

Thanks

License

This project is licensed under the MIT License - see the LICENSE file for details

assemblyscript
music-visualizer
reimplementation
visualization
wasm
webaudio-api
webgl
webgl2

Project health

Overall

3.2/10

Maintained

0/10

Code review

1/10
OpenSSF Scorecard

Latest release

2.6.7 · Mar 12, 2019

Releases this year

0

Significant stargazers

(top 24 of 30)

William Entriken

1,130 followers · starred Mar 2021

Burak Yigit Kaya

1,693 followers · starred Aug 2021

David Buchanan

1,703 followers · starred Sep 2025

Jimmy Wärting

544 followers · starred Jun 2025