jberg/butterchurn

これは何？

主な機能

• 01ブラウザ上でWebGLを使ってMilkdropのプリセットを描画します。
• 02Web Audio API経由で音声を入力します。
• 03設定可能な時間をかけてプリセットを切り替えます。
• 04実行中にレンダラーのサイズを変更できます。
• 05プリセット集を別パッケージとして提供します。
• 06WebGL 2への対応状況を確認するヘルパーを備えています。

ユースケース

• Web音楽プレーヤーに音楽ビジュアライザーを追加する。
• Webページやブラウザ拡張機能からの音声を可視化する。
• ブラウザ上でライブ音楽やカラオケの画面を作成する。
• WebアプリでMilkdropのプリセットを試す。

クイックスタート

1. 1

   npmでパッケージをインストールする

   npm install butterchurn butterchurn-presets
2. 2

   AudioContextに接続したcanvas上にビジュアライザーを作成する

3. 3

   プリセットを読み込み、フレームをレンダリングする

使う前に知っておきたいこと

• !WebGL 2に対応したブラウザーが必要です。

トピック

よくある質問

butterchurn とは？

Web Audio APIを使い、Milkdropのプリセットをブラウザで描画するWebGL製ビジュアライザー。 Butterchurnは、Milkdropの音楽ビジュアライザーをWebGLで再実装したJavaScriptライブラリです。Milkdrop風のビジュアルを、最新のWebブラウザで動かせます。Web Audio APIから音声を受け取り、アニメーションフレームをHTML canvasに描画します。

butterchurn は無料で使えますか？ライセンスは？

butterchurn は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

butterchurn は今もメンテナンスされていますか？

半年以上コミットなし。butterchurn の最終コミットは 2026年4月20日 です。

butterchurn は何に使えますか？

Web音楽プレーヤーに音楽ビジュアライザーを追加する。 Webページやブラウザ拡張機能からの音声を可視化する。 ブラウザ上でライブ音楽やカラオケの画面を作成する。 WebアプリでMilkdropのプリセットを試す。

butterchurn のインストール方法は？

npmでパッケージをインストールする: npm install butterchurn butterchurn-presets AudioContextに接続したcanvas上にビジュアライザーを作成する プリセットを読み込み、フレームをレンダリングする

butterchurn はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/jberg/butterchurn