DOCSEARCHbyAlgolia
Submit Docs

butterchurn

repository·master·Indexed 23 days ago

https://github.com/jberg/butterchurn

A WebGL implementation of the Milkdrop Visualizer for integrating high-quality music visualizations into web applications. Requires WebGL 2 support and can be used with the butterchurn-presets package to load and blend visual presets.

Tokens
786
Snippets
3
Records
4
Agent score
34%

What's inside butterchurn

  1. Create a Milkdrop visualizer

    master

    To create a visualizer, initialize it with an audioContext and a canvas element using butterchurn.createVisualizer. You must then connect an audioNode (from a source or microphone) and can load presets from the butterchurn-presets package. Use loadPreset to apply a preset, optionally providing a blend time in seconds to transition smoothly.

    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();

  2. Install butterchurn and butterchurn-presets

    master

    To use Butterchurn in your project, install both the core butterchurn library and the butterchurn-presets package using your preferred package manager.

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

  3. Check WebGL 2 support for Butterchurn

    master

    Butterchurn requires WebGL 2 support. You can check if the current browser environment is compatible by importing and calling isButterchurnSupported from butterchurn/lib/isSupported.min.

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

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

  4. Initialize a visualizer with createVisualizer()

    master

    Use the Butterchurn.createVisualizer() static method to initialize a new visualizer instance. You must provide an AudioContext and an HTML Canvas element. An optional opts object can be passed to configure the visualizer.

    Arguments:

    • context: An AudioContext instance used for audio processing.
    • canvas: An HTMLCanvasElement where the visualization will be rendered.
    • opts (optional): Configuration options for the visualizer.