音楽ビジュアライザー
音楽ファイルをドラッグ&ドロップ、またはクリックして選択
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ファイルに収める
Rui Software