Butterchurn is a WebGL implementation of the Milkdrop Visualizer
See the codeButterchurn is a WebGL implementation of the Milkdrop Visualizer
With pnpm, yarn or npm installed, run
$ pnpm add butterchurn butterchurn-presets
or
$ yarn add butterchurn butterchurn-presets
or
$ npm install butterchurn butterchurn-presets
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();
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
}
This project is licensed under the MIT License - see the LICENSE file for details
Overall
Maintained
Code review
npm
Latest release
Releases this year
(top 24 of 30)
1,130 followers · starred Mar 2021
1,693 followers · starred Aug 2021
1,703 followers · starred Sep 2025
544 followers · starred Jun 2025
Butterchurn is a WebGL implementation of the Milkdrop Visualizer
See the codeButterchurn is a WebGL implementation of the Milkdrop Visualizer
With pnpm, yarn or npm installed, run
$ pnpm add butterchurn butterchurn-presets
or
$ yarn add butterchurn butterchurn-presets
or
$ npm install butterchurn butterchurn-presets
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();
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
}
This project is licensed under the MIT License - see the LICENSE file for details
Overall
Maintained
Code review
npm
Latest release
Releases this year
(top 24 of 30)
1,130 followers · starred Mar 2021
1,693 followers · starred Aug 2021
1,703 followers · starred Sep 2025
544 followers · starred Jun 2025