Butterchurn

Butterchurn is a WebGL implementation of the Milkdrop Visualizer

Try it out

Usage

Installation

With yarn or npm installed, run

$ 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

• Webamp, the fantastic reimplementation of Winamp 2.9 in HTML5 and Javascript, built by captbaritone
• mStream, your personal music streaming server, built by IrosTheBeggar
• pasteur, trippy videos generated from your music, built by markneub

Thanks

• Ryan Geiss for creating MilkDrop
• Nullsoft for creating Winamp
• All the amazing preset creators, special thanks to Flexi

License

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