音楽ビジュアライザー

音楽ファイルをドラッグ&ドロップ、またはクリックして選択

MP3 / WAV / OGG / AAC 対応

|
0:00 0:00

📋 このツールを作ったプロンプト

以下のプロンプトをClaude・ChatGPT・GeminiなどのAIに貼り付けると、同じようなツールを作ることができます。

ブラウザで動く音楽ビジュアライザーをHTML単一ファイル(HTML/CSS/JS完結)で実装してください。

【音声入力】
- ファイルのみ対応(マイク入力は不要)
- ドラッグアンドドロップとクリック選択の両方に対応する
- MP3 / WAV / OGG / AAC の音楽ファイルを読み込む
- 読み込み後にプレイヤーエリアを表示する

【Web Audio】
- AudioContext と AnalyserNode を使用する
- analyser.fftSize = 2048
- createMediaElementSource ではなく、decodeAudioData でバッファから再生する
  (再生・一時停止・シークに対応するため)
- GainNode で音量調整を実装する

【ビジュアルスタイル】
ボタンで以下4種類を切り替えられる。
- バー: 周波数データを横棒グラフで表示。HSL色相で周波数ごとに色変えする
- 波形: 時間領域データを折れ線で描画。グリーン主体に半透明の影を付ける
- サークル: 中心から放射状に周波数データを線分で描画。全周で 360 本。HSL沿い色
- パーティクル: 音山に応じてパーティクルを発生させ、重力で下に落ちる

【プレイヤー】
- 再生/一時停止ボタン、停止ボタンを表示する
- シークバーで任意の位置に移動できる(操作中は指を離したのちにシーク実行)
- 音量スライダーを表示する
- 現在時刻と全体尺度を mm:ss 形式で表示する
- 別のファイルを読み込むボタンも表示する

【制約】
- 外部ライブラリ不使用
- グローバル汚染防止のため即時関数(IIFE)で全体を囲む
- HTML/CSS/JS をすべて1ファイルに収める