音声波形バー＆ワイプ枠｜OBSの音に反応するオーディオ波形オーバーレイ【マイクもBGMもゲーム音も】

OBSに入っている音に合わせて、リアルタイムに動く波形オーバーレイです。

マイクの声だけでなく、BGM・ゲーム音・歌枠の伴奏・コラボ相手の声も、まとめて拾います。画面の端に置く「バー」と、カメラを囲む「ワイプ枠」の2モード入り。

表示しているのは本物の音量の推移です。それっぽく動かしているアニメーションではありません。飾りは入れず、細い等幅のバーと1色だけ。どんな配信画面にも乗ります。

HTMLファイル1枚。ログイン・APIキー・サブスク・サーバー不要。

2つのモード・できること・動作環境

■ bar — 画面の端に置く波形バー

配信画面の下や上に置く、横長（縦長にもできます）の波形。歌枠・雑談・ASMRなど、画面の動きが少ない配信のアクセントに。

■ frame — カメラを囲むワイプ枠

カメラ映像の周りを囲む四角い枠。バーは枠の外側に向かって伸びるので、カメラ映像には絶対にかぶりません。

■ 置き方

1. OBS → ツール → WebSocketサーバー設定 で「有効にする」にチェック（OBS 28以降に標準で入っています。追加インストール不要）

2. 同梱の index.html を開いてお好みを選ぶと、貼るURLとおすすめサイズが出ます

3. OBS → ソース → ブラウザ →「ローカルファイル」のチェックを外して、そのURLを貼る

index.html には「接続をためす」ボタンも入っています。押すとOBSのWebSocketのバージョンとパスワードの要否を表示するので、つながらないときの切り分けがすぐできます。

■ マイクだけではありません

OBSのミキサーから音量を受け取るので、マイクの声・BGM・ゲーム音・歌枠の伴奏・コラボ相手の声を、すべてまとめて拾います。特定の音だけに反応させたいときは、OBSの音声ソース名を指定してください（例：マイクだけ）。

■ 本物の音量の推移です

左が「今」、右へ向かって過去へ流れていきます。つまり表示は実際の振幅の時間変化そのもので、音に合わせてそれらしく動かしているアニメーションではありません。

※ 周波数スペクトラム（音の高さ別のグラフ）ではありません。音量です。

■ あえて無地です

細い等幅のバーと1色だけ。光らせたり、飾りの目盛りや模様を足したりしていません。配信画面の邪魔をせず、どんな絵柄の横にも置けることを優先しました。大きい音のときだけ色が変わります（この境目も変えられます）。

■ 調整できるところ

配色7種（暗い画面用5・明るい画面用2）／バーの本数・太さ・すき間・長さ／感度／なめらかさ／色が変わる大きさ／上下対称の有無／角の丸み／枠の余白。全部URLで指定でき、index.htmlがそのURLを作ります。

■ 動作環境

OBS Studio 28以降（WebSocketサーバー機能が標準搭載されているバージョン）。Windows / macOS どちらでも動きます。「ツール → WebSocketサーバー設定」で有効にする必要があります。

■ 通信について

つなぎ先はご自身のPCの中（ws://127.0.0.1）だけです。受け取るのは音量の数値だけで、音声データそのものは扱いません。外部のサーバーへは一切送信しません。OBSのWebSocketパスワードは、URLに書く方法のほかに、この端末に覚えさせる方法（OBSのカスタムブラウザドックでindex.htmlを開いて保存）も用意しています。

■ 同梱ファイル

bar.html（本体）／index.html（設定を作る画面＋プレビュー＋接続テスタ）／lib（OBSから音量を受け取る部分）／shared・fonts（共通CSSとフォント）／README.txt／利用規約.txt

■ ライセンス

商用・非商用を問わず配信・動画でお使いいただけます（収益化可・クレジット不要）。改変も自由です。ファイルそのものの再配布・再販売、学習データとしての利用はご遠慮ください。同梱フォント（Chakra Petch / JetBrains Mono）は SIL Open Font License 1.1 です。生成AIによる画像は使用していません。