2000年代音楽ビジュアライゼーションエキスパート は何をしますか？
2000年代の伝説的な音楽ビジュアライゼーションの時代（Milkdrop、AVS、Geiss）を、現代のWebGLとWeb Audio APIを使用して再現するエキスパートです。
使用するタイミング
✅ 使用すべきケース:
- Milkdropスタイルのサイケデリックビジュアライゼーションの実装
- Butterchurnライブラリの統合（WebGL Milkdrop）
- Web Audio API AnalyserNode FFT/波形抽出
- 音声反応型エフェクトのためのGLSLフラグメントシェーダー
- 没入感のある全画面音楽体験
- リアルタイムビート検出と音声分析
- プリセットシステムとビジュアライゼーションのトランジション
❌ 使用すべきでないケース:
- シンプルなスペクトル棒グラフ（Canvas 2Dを使用）
- 静的なオーディオ波形表示
- ビデオ編集または処理
- オーディオ非連動の生成アート
- オーディオ再生/ストリーミングの問題（オーディオエンジニアスキルを使用）
黄金時代（概要）
| 時代 | 主要ソフトウェア | 革新性 |
|---|---|---|
| 1998-2000 | Geiss | シンプルなプラズマエフェクト、DirectX |
| 2001-2007 | Milkdrop 1 & 2 | ピクセル単位の方程式、プリセットシステム |
| 2007-2015 | 衰退 | ストリーミングサービスの台頭 |
| 2018-現在 | Butterchurn | WebGLによる復興 |
Milkdropの魔法: ぼかし、ズーム、回転、色シフトといったシンプルなエフェクトを、音声反応型パラメータで重ね合わせます。
→ 完全な歴史と統合については references/butterchurn-guide.md を参照。
コアテクノロジー
Butterchurn（WebGL Milkdrop）
- GitHubスター1.7k、MITライセンス
- オリジナルのMilkdropとの完全なプリセット互換性
- npm:
butterchurn、butterchurn-presets
import butterchurn from 'butterchurn';
const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
width: window.innerWidth,
height: window.innerHeight,
pixelRatio: window.devicePixelRatio || 1,
});
visualizer.connectAudio(audioNode);
visualizer.loadPreset(preset, 2.0); // 2秒のブレンド
Web Audio API FFT
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
analyser.smoothingTimeConstant = 0.8;
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);
重要: FFTビンは線形ですが、人間の聴覚は対数的です！対数マッピングを使用してください。
→ 周波数帯域の抽出については references/web-audio-fft.md を参照。
GLSLシェーダー
オーディオデータを1Dテクスチャとして渡し、ユニフォームを使用して低音/中音/高音を制御します。
uniform float u_bass;
float glow = smoothstep(0.5 - u_bass * 0.3, 0.0, dist);
→ 完全なパターンについては references/glsl-shaders.md を参照。
避けるべきアンチパターン
1. AudioContextの状態を無視する
症状: ビジュアライゼーションが静かに失敗する
理由: AudioContextはサスペンド状態で開始されるため、ユーザー操作が必要
修正方法: クリック時に再開: await audioContext.resume()
2. 線形周波数表示
症状: 低音が支配的で、高音が見えない 理由: FFTビンは線形。最初の100ビンは0～2kHzの可能性がある 修正方法: 対数ビンマッピングを使用（コードはリファレンスを参照）
3. スムージングなし
症状: ジッターが発生し、発作を誘発するようなビジュアル
理由: 生のFFTデータはフレーム間でノイズが多い
修正方法: analyserNode.smoothingTimeConstant = 0.7
4. requestAnimationFrameのクリーンアップなし
症状: メモリリーク、複数のレンダリングループ
修正方法: アニメーションIDを保存し、アンマウント時に cancelAnimationFrame を呼び出す
5. キャンバスサイズのハードコード
症状: Retinaディスプレイでぼやける、アスペクト比がおかしい
修正方法: devicePixelRatio を乗算し、リサイズイベントを処理する
6. メインスレッドのブロッキング
症状: オーディオの途切れ、フレームドロップ 理由: UIスレッドでの重いシェーダーコンパイル 修正方法: シェーダーは再生中ではなく、読み込み中にコンパイルする
プリセットのおすすめ
サイケデリック/トリッピー:
Flexi, martin + geiss - dedicated to the sherwin maxawowRovastar - Fractopia
スムーズ/チル:
Flexi - predator-prey-spiralsGeiss - Cosmic Strings 2
ハイエネルギー:
Flexi + Martin - disconnectedshifter - tumbling cubes
統合チェックリスト
- AudioContextが作成され、ユーザー操作で再開される
- AnalyserNodeがオーディオソースに接続されている
- キャンバスのサイズが正しい（devicePixelRatioを考慮）
- requestAnimationFrameを使用したレンダリングループ
- アンマウント時のクリーンアップ（cancelAnimationFrame）
- ブレンド時間を指定したプリセット読み込み
- リサイズ処理
- ESCキーで終了可能な全画面表示のサポート
- トラック情報のオーバーレイ（z-indexはキャンバスより上）
- 非アクティブ時のカーソル非表示
パフォーマンスのヒント
- 古いGPUではテクスチャ比率を下げる:
textureRatio: 0.5 - 不要な場合はfftSizeを減らす: 2048ではなく512または1024
- キャンバスに
will-change: transformを使用する - レンダリングループ中はDOM更新を避ける
- Chrome DevToolsのGPUタイムラインでプロファイリングする
リファレンス
→ references/butterchurn-guide.md - Butterchurn統合の完全ガイド
→ references/web-audio-fft.md - FFT抽出と周波数分析
→ references/glsl-shaders.md - 音声反応型シェーダーパターン
このスキルがカバーする範囲: Butterchurn/Milkdrop | Web Audio FFT | GLSLシェーダー | 全画面ビジュアライゼーション | 音声反応型アート