声・音声に反応するOBSオーバーレイ｜光の糸・点の列・ワイプ枠の3構図×3配色【無料版あり】
- Digital500 JPY
声を出すと線がふくらみ、点が灯り、カメラ枠の四隅から針が伸びる——OBSに入っている音の大きさで動く、飾りを足さない配信オーバーレイです。 構図は3つ（光の糸／点の列／カメラ枠を囲む角の針）、配色は構図ごとに3つで、合計9通り。マイクだけでなくBGMやゲーム音にも反応し、音が止まると約0.3秒で静かな形に戻ります。 OBSのブラウザソースにURLを1つ貼るだけ。構図と配色は同梱の設定画面で、動くプレビューを見ながら選んでコピーできます。ログイン・APIキー・サブスクは不要です。
3つの構図と、9通りの配色
■ 構図1 光の糸（おすすめサイズ 1200×200） 1本の細い線。声で中央がレンズ状にふくらみ、笑い声でふくらみが横に広がります。無音ではまっすぐな1本の線に戻ります。 ■ 構図2 点の列（1200×120） うっすら見えている点の列。声で中央から左右へ点が灯り、笑い声で端まで届きます。無音では全部の点が薄く残ります。 ■ 構図3 角の針（800×480・カメラ枠を囲む型） カメラ映像のまわりを、四隅のカギだけで示す枠です。声で四隅から辺に沿って短い針が外向きに伸びます。針は外向きなので、枠の内側（カメラ映像）にはかぶりません。無音では四隅のカギだけが残ります。 ■ 配色は構図ごとに A / B / C A 単色ライン系（1色だけ。笑い声は色でなく形で伝える） B 2色の対比系（笑い声の瞬間だけ2色目になる） C 落ち着いた系（色みを抑えた線＋笑い声で差し色） 色はすべて NULLSIGNAL の配色システム（7パレット）から選んでいます。
置き方と、ここが違います
■ 置き方（3分） 1. OBS → ツール → WebSocketサーバー設定 で「有効にする」にチェック（OBS 28以降は標準搭載、追加インストール不要） 2. 同梱の index.html を開き、構図と配色を選んで「URLをコピー」 3. OBS → ソース → ブラウザ →「ローカルファイル」のチェックを外してURLを貼る URLで直接指定もできます（例 bar.html?comp=a&pal=c1b）。背景は透明です。 ■ マイク以外の音にも反応します 音量は OBS の WebSocket から受け取るので、マイク・BGM・ゲーム音・歌枠の伴奏・コラボ相手の声など、OBSに入っている音すべてが対象です。特定の音だけに反応させることもできます（source=マイク など）。 ■ 表示しているのは「今の音量」です それっぽく動くだけのアニメーションではなく、実際の音量で動きます。周波数スペクトラム（音の高さ別のグラフ）ではありません。 ■ 無料版との違い 無料版「Audio Line FREE」で使えるのは、構図1 光の糸 × 配色A の1通りだけです。この有料版では9通りすべてと設定画面での切り替えが使えます。
動作環境・動作確認・ファイル・ライセンス
■ 動作環境 OBS Studio 28以降（WebSocketサーバーを有効にして使います）。接続先はご自身のPC内（ws://127.0.0.1）だけで、受け取るのは音量の数値のみ。音声そのものや、外部のサーバーへの送信はありません。 ■ 動作確認（事実のとおり書きます） ・9通りすべてを、ヘッドレスChrome と見本の音量（小声→会話→笑い声→無音）で描画して確認しています。 ・実際のOBS（32.2.2）に接続し、音を鳴らして、3つの構図が実際の音量で動くことを確認しています。ただし、このとき描画したのはChromeで、OBSのブラウザソースの中での表示そのものは確認していません。 ・Windows で確認しています。macOS は未確認です。 ■ 同梱ファイル bar.html（本体）／index.html（設定を作る画面＋プレビュー）／lib・shared・fonts（部品とフォント）／README.txt／Terms-利用規約.txt ■ ライセンス 商用・非商用を問わず配信・動画でお使いいただけます（収益化可・クレジット不要）。改変も自由です。 ファイルそのものの再配布・再販売、学習データとしての利用はご遠慮ください。 同梱フォント（Chakra Petch / JetBrains Mono）は SIL Open Font License 1.1 です。 本商品は人が仕様を決め、AI（Claude）の補助でコードを書いたものです。生成AIによる画像は使用していません（商品画像も、同梱のコードで描いた実画面です）。
