OBSブラウザソースの接続方法：URLの追加から音声設定まで
OBS Studioにブラウザソースを追加し、ウィジェットURL、画面サイズ、音声モニタリングを設定する方法を解説します。映像や音声が出ない場合の確認項目もまとめています。
配信用ウィジェットやオーバーレイをOBS Studioに接続するとき、最もよく使われる機能がブラウザソースです。サービスから発行されたURLを貼り付けると、投げ銭通知、チャット、目標ウィジェットなどのWeb画面を配信上に表示できます。
初めて設定するときは、URLをどこに入れるのか、幅と高さはいくつにするのか、視聴者にも音が聞こえるのか迷いやすいものです。映像や音声が出ない場合も、URLとOBSの音声設定のどちらに原因があるのかを切り分ける必要があります。
この記事では、ブラウザソースの追加、URLとサイズの設定、音声モニタリングまでを順番に解説します。実例にはDORODORAのメッセージ投げ銭通知を使用しますが、URLを発行するチャットや他の配信ウィジェットにも同じ手順を利用できます。
用意するもの
- DORODORAアカウントと投げ銭ページ
- 最新版のOBS Studio
- 通知テストに使うシーン
本番用シーンを直接編集することもできますが、最初は空のテストシーンを作ると安全です。通知の大きさ、位置、TTS音量を確認してから、完成したソースを本番用シーンで再利用できます。
設定の流れ
- DORODORAストリームコンソールでメッセージとTTSを有効にします。
ブラウザソース（URL）をコピーします。- OBSのシーンにブラウザソースを追加します。
- URLと画面サイズを入力します。
- テスト通知を送り、映像と音声を確認します。
- 必要に応じて音声モニタリングと音量を調整します。
一度接続すれば、毎回URLを貼り直す必要はありません。OBSに保存されたブラウザソースをそのまま使えます。
1. DORODORAから通知URLをコピーする
DORODORAストリームコンソールを開き、右側の設定でメッセージ（TTS）を展開します。
次の項目を確認してください。
有効化：メッセージ投げ銭通知を有効にします。TTSを有効化：投げ銭メッセージを読み上げます。カスタムボイスを有効化：支援者がカスタムボイスを選べるようにします。
変更後は必ず保存を押してください。
同じ欄のブラウザソース（URL）を押すとアドレスがコピーされます。これは視聴者に共有する投げ銭ページとは異なり、OBSが通知を受信するための専用ウィジェットURLです。
ブラウザソースURLを配信、動画、公開記事に表示しないでください。スクリーンショットでもURL全体を必ず隠してください。
2. OBSにブラウザソースを追加する
OBS Studioを開いて通知を表示するシーンを選択します。下部のソースで+を押し、ブラウザまたはBrowserを選びます。
ソース欄の下にある+を押します。画像出典：OBS Sources Guide
一覧からBrowserを選択します。画像出典：OBS Sources Guide
後から識別しやすい名前を付けます。例えば次のようにサービス名と用途を入れると便利です。
DORODORA投げ銭通知
同じブラウザソースが別のシーンにある場合は、既存を追加で再利用できます。複数のコピーを作るより、1つのソースを共有するほうが管理しやすくなります。
3. URLと画面サイズを設定する
プロパティのURLにDORODORAのアドレスを貼り付けます。ローカルファイルはオフのままにします。
画面サイズはOBSの基本キャンバスに合わせるのが簡単です。1080p配信なら次の値を使います。
幅：1920
高さ：1080
720pなら1280 × 720です。正確な値は設定 → 映像 → 基本（キャンバス）解像度で確認できます。
プロパティにURL、幅、高さを入力します。画像出典：OBS Browser Source
| 項目 | 推奨初期値 | 理由 |
|---|---|---|
| カスタムフレームレート | オフ | 最初の確認には標準の30 FPSで十分です。 |
| カスタムCSS | 標準のまま | 透明背景と余白削除を維持できます。 |
| 表示されていないときにソースをシャットダウン | オフ | シーン切り替え時の不要な切断を防ぎます。 |
| シーンがアクティブになったときにブラウザを更新 | オフ | 再生中の通知が再読み込みされるのを防ぎます。 |
OBS公式ドキュメントによると、前者をオンにするとソースを非表示にしたときや別のシーンへ移動したときにページがアンロードされます。後者はシーンへ戻った際にページを再読み込みします。リアルタイム通知は接続を維持するほうが自然なので、まずは両方オフにしてください。
OBS経由で音声を制御するが表示される場合はオンにします。TTSが音声ミキサーに個別表示され、ミュート、音量、モニタリングを他の音声と分けて管理できます。
設定後にOKを押します。
4. 通知の位置とサイズを合わせる
ブラウザソースを選ぶとOBSプレビューに赤い枠が表示されます。枠をドラッグして位置とサイズを変更できます。
キャンバス全体のサイズを入力した場合は、まず画面に正確に合わせます。
- Windows：右クリックして
変換 → 画面に合わせる - macOS：右クリックして
変換 → 画面に合わせる - ショートカット：Windowsは
Ctrl+F、macOSはCmd+F
通知位置をウィジェット側で指定している場合、ブラウザソース自体を切り抜く必要はありません。キャンバス全体を維持するとアニメーションが端で切れる問題を減らせます。
ブラウザソースはソース一覧でゲームや背景より上に置きます。上にあるソースほど前面に描画されるため、ゲームキャプチャの下では通知が動作していても見えません。
5. テスト通知を送る
DORODORAコンソールのメッセージ（TTS）で通知テストを押します。実際の投げ銭を待つ必要はありません。
テスト前に確認してください。
- OBSが起動している
- ブラウザソースの目のアイコンがオンになっている
- DORODORAのURLを完全に貼り付けている
有効化とTTSを有効化を保存している
OBSプレビューに通知が表示されてTTSが再生されれば、基本接続は完了です。
6. TTS音量と音声モニタリングを設定する
通知は見えるのに音が出ない場合、テスト中に音声ミキサーのメーターが動くか確認します。
音量メーターが動く場合
音声はOBSまで届いています。次を確認してください。
- ソースがミュートされていない
- 音量スライダーが低すぎない
音声の詳細プロパティで配信用トラックが選択されている- 配信者も聞く場合は
音声モニタリングをモニターと出力にする
モニターオフでも視聴者には音が出る場合があります。モニタリングは主に配信者がヘッドホンで聞くかどうかを決めます。一方、モニターのみ（出力はミュート）では配信出力から音が外れることがあります。双方が聞くTTSには通常モニターと出力を使用します。
メーター、スライダー、ミュート、モニタリングを確認します。画像出典：OBS Audio Mixer Guide
音量メーターが動かない場合
- ブラウザソースのプロパティを開き直します。
OBS経由で音声を制御するがあればオンにします。- メッセージ通知用URLであることを確認します。
現在のページのキャッシュを更新を押します。- DORODORAからもう一度テスト通知を送ります。
更新すると再生中の通知が中断される場合があります。本番中ではなくテスト時に行ってください。
通知が表示されない場合
他のソースの後ろにある
DORODORA通知をゲームキャプチャ、画像、色ソースより上へ移動し、目のアイコンも確認します。
URLが間違っている
投げ銭ページとブラウザソースURLは用途が異なります。OBSにはメッセージ（TTS）内のブラウザソース（URL）を入れます。前後の空白とアドレス全体を確認してください。
設定を保存していない
スイッチを変更した後は保存を押します。保存せず移動すると以前の設定が残る場合があります。
画面外で再生されている
右クリックして変換 → 変換をリセット、続いて画面に合わせるを選びます。幅と高さが基本キャンバスと同じかも確認してください。
シーン切り替え後に通知が来ない
表示されていないときにソースをシャットダウンをオフにします。複数シーンでは既存を追加で同じソースを再利用してください。
配信前に必ず録画で確認する
プレビューが正しく、ヘッドホンでTTSが聞こえても、実際の配信出力は異なる場合があります。1〜2分録画して再生してください。
確認項目は次のとおりです。
- 通知がゲームやWebカメラに隠れていない
- 名前とメッセージが読める
- TTSがマイクより極端に大きい、または小さくない
- ゲーム音が通知音やTTSをかき消していない
- TTSの最初や最後が切れていない
- シーン切り替え後もテスト通知が動作する
OBS公式音声ガイドも、本番と同じ条件で録画して聞き直すことを推奨しています。ミキサーのメーターだけより、完成した録画のほうが確実です。
よくある質問
ブラウザソースURLを視聴者に共有できますか？
いいえ。視聴者にはDORODORA投げ銭ページを共有します。ウィジェットURLはOBSにだけ入力し、公開しないでください。
推奨解像度はいくつですか？
OBSの基本キャンバスと同じ値から始めます。1080pなら1920×1080、720pなら1280×720です。
自分にTTSが聞こえれば視聴者にも聞こえますか？
双方に聞かせる場合はモニターと出力を選び、テスト録画で確認してください。
TTSだけを切って画面通知を残せますか？
はい。メッセージ通知を有効にしたままTTSだけをオフにして保存します。
OBSを起動しなくても投げ銭を受け取れますか？
投げ銭ページでの決済はOBSとは独立しています。ただしOBSとブラウザソースが動いていなければ、リアルタイム通知は配信に表示されません。イベントはDORODORAコンソールで確認できます。
まとめ
重要なのは正しいURL、ソースの順序、音声出力の3点です。DORODORAでメッセージとTTSを有効にし、専用URLをOBSブラウザソースへ貼り付けます。
その後、テスト通知を送り、音声ミキサーと録画を確認してください。モニタリング設定によって、配信者が聞く音と配信に出る音は異なる場合があります。
DORODORAは投げ銭ページ、AI TTS、Voice Cloning TTS、OBS通知URL、ストリームコンソールを1つの流れで提供します。メッセージ通知を設定し、決済通知を配信コンテンツとして活用してみてください。
参考資料
- OBS Browser Source: https://obsproject.com/kb/browser-source
- OBS Sources Guide: https://obsproject.com/kb/sources-guide
- OBS Audio Mixer Guide: https://obsproject.com/kb/audio-mixer-guide