Butterchurn
Butterchurn is a WebGL implementation of the Milkdrop Visualizer
Install / Use
/learn @jberg/ButterchurnREADME
Butterchurn
Butterchurn is a WebGL implementation of the Milkdrop Visualizer
Try it out
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
- Webamp, the fantastic reimplementation of Winamp 2.9 in HTML5 and Javascript, built by captbaritone
- Butterchurn Extension, use Butterchurn to visualize the audio from any page
- Rekt Networks, Live DJs, Archives & Exclusive Releases, built by Zei
- mStream, your personal music streaming server, built by IrosTheBeggar
- pasteur, trippy videos generated from your music, built by markneub
- ChromeAudioVisualizerExtension, put on some music and turn your browsing session into a party! built by afreakk
- Karaoke Forever, an open karaoke party system, built by bhj
- Syqel, the World's Best AI Powered Music Visualizer
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
Related Skills
node-connect
338.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
83.4kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
338.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
83.4kCommit, push, and open a PR

