音に反応する配信ビジュアライザー│Sound Visualizer for OBS【無料版あり】

OBSのブラウザソースで動作する音声ビジュアライザーです。

『無料版』は、音声接続不要で手軽に使えるシンプルなビジュアライザー。

『有料版』は、OBSの音声にリアルタイムで反応する高機能版です。

配信画面の下部や背景演出として、

音に合わせた動きや、雰囲気づくりにお使いいただけます。

■ 無料版 / 有料版について

【無料版】

音声接続不要。

ファイルをOBSに追加するだけで動く、シンプルなビジュアライザーです。

【有料版】

OBSの音声にリアルタイムで反応する音声対応版です。

円形モード・入力ソース選択・カスタムプリセット保存など、

より細かい演出ができます。

■ 同梱ファイル

【無料版】

visualizer_free.html　ビジュアライザー本体

【有料版】

index.html　ビジュアライザー本体

server.ps1　ローカルサーバー起動スクリプト

start.bat　サーバー起動バッチファイル

■ 動作環境

OS：Windows 10 / 11

OBS：OBS Studio 32以降

■ 無料版のセットアップ

【Step 1】

OBSのソースパネルで + → ブラウザ を追加する

【Step 2】

以下を設定してください。

ローカルファイル：チェックを入れる

ファイル：visualizer_free.html を選択

幅：1920（配信解像度に合わせる）

高さ：576以上

FPS：60

透明な背景：チェックを入れる

【Step 3】

設定後は、Alt + ドラッグで端をトリミングして配置してください。

■ 有料版のセットアップ

【Step 1】

index.html / server.ps1 / start.bat の3ファイルを

同じフォルダに置く

【Step 2】

OBSのWebSocketを有効にする（初回のみ）

OBS → ツール → obs-websocket 設定

「WebSocketサーバーを有効にする」にチェック

「認証を有効にする」はオフのまま

OKを押して閉じる

【Step 3】

start.bat をダブルクリックしてサーバーを起動する

※ 配信中は、起動したウィンドウを閉じないでください。

【Step 4】

OBSのソースパネルで + → ブラウザ を追加する

以下を設定してください。

URL：http://localhost:8080/index.html

幅：1920（配信解像度に合わせる）

高さ：576以上

FPS：60

透明な背景：チェックを入れる

【Step 5】

設定後は、Alt + ドラッグで端をトリミングして配置してください。

■ 設定パネル

ブラウザソースを右クリック → インタラクト を開き、

画面右下の設定ボタンから各種調整ができます。

■ 無料版で調整できる項目

・色

ベース色 / 中間色 / アクセント色を #RRGGBB 形式で設定できます。

・プリセット

Default / Light / Natural / Cute / Neon / Dark

・バー

太さ / 本数 / 高さ上限 / 角の丸み

・アニメーション

速さ / 不透明度

■ 有料版でできること

・OBSの音声にリアルタイムで反応

・入力ソースの選択

・円形モード

・各種デザイン調整

・カスタムプリセット保存

・より細かいビジュアライザー演出

■ ご利用について

配信での使用は、商用・非商用問わず自由です。

再配布・改変・転売はご遠慮ください。

■ 免責事項

本アプリの使用によって生じたトラブルや損害については、責任を負いかねます。

OBS Studioのアップデート等により、動作しなくなる場合があります。

■ サポートについて

不具合やご要望がありましたら、お知らせください。

可能な範囲で確認しますが、対応をお約束するものではありません。