▦ sonic-stage · audio visualizer · 6 themes
音楽ファイルをアップロードすると、 6 種類のテーマ (Cyber Neon / Vinyl Warm / Aurora / Sakura / Vaporwave / Minimal Mono) で 周波数 + 波形 + BPM 同期 アニメーション が動く 無料 ビジュアライザ。 全画面切替で 配信背景 / VTuber 画面 / 動画素材 / カフェドヤ にそのまま使える。 音声は あなたのブラウザだけで処理され、 サーバーには送信されません。
[ ./how_it_works ]
壱
「音楽 アップロード」 ボタンか、 ドラッグ&ドロップ で 音楽ファイル (mp3 / wav / m4a / ogg / flac) を投入。 音声は あなたのブラウザ内だけで処理され、 サーバーに送信されません。 アップロードしない場合は 内蔵 デモ音源 (96 BPM の 4-on-floor キック + トライアド、 WebAudio で プログラム生成、 著作権クリーン) が ループ再生されます。
弐
Cyber Neon (周波数バー + scanline + bass glitch) / Vinyl Warm (回るレコード + 真鍮ラベル + ろうそく橙) / Aurora (流れる色ノイズ + bass で色相シフト) / Sakura (花びら 80 粒が音量で舞う) / Vaporwave (パース grid 床 + 太陽 + chrome 文字 bounce) / Minimal Mono (中央 円 + 多重リング)。 ←→ キーで 高速切替、 タップ /クリックでも切替。
参
ツールバー右の ⛶ ボタンか f キーで 全画面。 配信ソフト (OBS の Window Capture / Browser Source) で 取り込んで 配信背景に、 画面録画で 動画素材に、 カフェで 開いて ドヤるのも自由。 スペースで 再生/一時停止、 ←→ で テーマ切替。
[ ./faq ]
アップロードした 音楽ファイル の 周波数 + 波形 + 音量 を リアルタイム解析して、 6 種類のおしゃれな ビジュアル テーマで 表示する 無料 オーディオ ビジュアライザです。 WebAudio API の AnalyserNode で FFT 周波数 (256 帯域) + 時間波形 (512 サンプル) + 全体 RMS + 簡易 BPM 検出を 60fps で行い、 Canvas 2D で 各テーマ専用の演出を描きます。 音声は あなたのブラウザの中だけで処理され、 サーバーには 1 ビットも 送信されません。
(1) **Cyber Neon** = ピンク + シアン + 紫の 32 本 周波数バー (左右ミラー) + scanline + bass で chromatic split。 (2) **Vinyl Warm** = 黒い円盤が 33⅓ RPM で回転 + 真鍮 中央ラベル + ろうそく orange glow + 周波数で外周リング。 (3) **Aurora** = 5 つの sin/cos 重ね合わせで オーロラ 帯を描く + bass で 色相 60度シフト + 高音で turbulence + 星 60 粒。 (4) **Sakura** = 80 粒の桜 花びらが 音量に比例した速度で 舞い散る + 縦書き 「桜」 + 朱印 「音響」。 (5) **Vaporwave** = パース grid 床 + 太陽 (横スリット) + chrome 文字が bass で scale bounce。 (6) **Minimal Mono** = 中央 円 (低音で半径変化) + 多重リング (周波数で sage 色変化) + 波形 破線。
**いいえ、 古典 DSP + Canvas 2D だけです**。 WebAudio の AnalyserNode (内部実装は FFT + smoothing time constant) で 周波数解析、 RMS 履歴 240 サンプル の自己相関で 簡易 BPM 検出 (60-180 BPM レンジ)、 帯域別 平均 (低 0-8% / 中 8-40% / 高 40-100%) で bass/mid/treble 抽出。 ML モデル DL ゼロ、 有料 API ゼロ。 ライブラリ依存ゼロ で 各 visualizer が 300 行以内に収まる軽量実装です。
**はい、 推奨用途です**。 OBS Studio で Window Capture (ブラウザを全画面表示してキャプチャ) または Browser Source (URL を直接読込) で 取り込めます。 透かし / クレジット表記 / 課金は一切なし、 商用利用 OK。 BGM を 配信で流すなら 著作権フリー音源 (DOVA-SYNDROME / 甘茶の音楽工房 / 魔王魂 / YouTube Audio Library 等) を 投入すれば、 ビジュアル付きで 流せます。 16:9 アスペクト比 で 設計しているので 1080p / 1440p / 4K どれでも綺麗に伸びます。
ブラウザの decodeAudioData が読める形式 (mp3 / wav / m4a / ogg / aac / flac / webm 等) は全て対応。 ファイルサイズは ブラウザ内 デコード に Memory を使うので、 おおよそ 100MB (= 30 分の wav 16bit 44.1kHz stereo) 程度まで が現実的な上限。 通常 4-6 分の mp3 (4-8MB) なら 余裕で動きます。 mp4 動画ファイルは 音声トラックだけ取り出して 再生します (映像は 表示しません)。
**プライバシー**: アップロードされた音楽は あなたの ブラウザ JS の中だけで処理されます。 サーバーに 音声 / 解析データ / メタデータ を 送信する経路は ありません (Network タブで確認可能)。 ファイルが消えるのは ページを閉じた時 + メモリから即解放。 **商用利用**: ビジュアル出力 (画面録画 / スクショ / 配信) は 商用利用可、 透かし無し、 クレジット強制なし。 ただし 投入する音楽自体の 著作権は ご自身で確認してください。
(1) 60fps で 直近 4 秒 (240 サンプル) の RMS (音量) 履歴を 保存、 (2) 平均減算で 中心化、 (3) lag = 60×fps/180 BPM 〜 60×fps/60 BPM のレンジで 自己相関 (Σ x[i] × x[i+lag]) を計算、 (4) 最大値の lag から bpm = 60×fps / lag を採用、 (5) 慣性 (前回値 × 0.7 + 新値 × 0.3) で 急変防止。 4-on-floor / 8 ビート / 軽い syncopation の音楽で 90% 程度の精度。 アンビエント / フリージャズ など 拍が曖昧な音楽は 安定しません。
ラボ 48 本目で **音処理 ライン 4 本目** (voice-scribe 音→文字 / pitch-flip 音→音 / hum-score 音→構造化 (楽譜+MIDI) / sonic-stage 音→映像 (ビジュアライザ))。 「音 → 文字 / 音 → 音 / 音 → 構造化 / 音 → 映像」 で 音 の入出力 4 軸が 完成。 visual は **6 テーマ動的 palette 切替** (CSS Variables + Canvas viz) で、 vibe-coder dark cyberpunk neon と Cyber テーマ は palette 近いが、 vibe-coder は IDE 4 ペイン モック / sonic-stage は 全画面 ライブ ビジュアライザ で 用途完全別、 唯一の 「6 テーマ 動的 切替 + アップロード受け 全画面ビジュアライザ」 motif。
**スペース** または **k** = 再生 / 一時停止、 **f** = 全画面トグル、 **→** または **n** = 次のテーマ、 **←** または **p** = 前のテーマ。 配信中に スペース連打して 「曲止めて DJ 風アピール」 とか、 ←→ 連打で テーマカルーセル風に魅せる演出も可能。