OBS 浏览器源连接方法:从添加 URL 到声音设置
了解如何在 OBS Studio 中添加浏览器源,并设置小组件 URL、画面尺寸和音频监听。本指南还整理了浏览器源没有画面或声音时的排查方法。
在 OBS Studio 中连接直播小组件和叠加层时,最常用的功能就是浏览器源。将服务提供的 URL 粘贴到浏览器源后,即可在直播画面上显示赞助提醒、聊天框和目标小组件等网页内容。
第一次设置时,很容易对 URL 的填写位置、宽度和高度以及观众能否听到声音产生疑问。当画面或声音没有出现时,还需要判断问题出在 URL 还是 OBS 的音频设置。
本文将依次介绍添加浏览器源、设置 URL 和尺寸,以及配置音频监听的完整流程。示例使用 DORODORA 的消息赞助提醒,但同样适用于提供 URL 的聊天框和其他直播小组件。
准备事项
- DORODORA 账户和赞助页面
- 最新版本的 OBS Studio
- 用于测试提醒的场景
您可以直接编辑正式直播场景,但首次连接时创建一个空白测试场景更安全。先确认提醒的大小、位置和 TTS 音量,再将设置完成的浏览器源复用到正式场景中。
设置流程概览
- 在 DORODORA 直播控制台中启用消息和 TTS。
- 复制
浏览器源(URL)。 - 在 OBS 场景中添加浏览器源。
- 输入 URL 和画面尺寸。
- 发送测试提醒并检查画面和声音。
- 根据需要调整音频监听和音量。
完成一次连接后,浏览器源会保存在 OBS 中,无需在每次直播前重新粘贴 URL。
1. 从 DORODORA 复制提醒 URL
打开 DORODORA 直播控制台,在右侧设置区域展开消息(TTS)。
检查以下选项:
启用:开启消息赞助提醒。启用 TTS:朗读赞助消息。启用自定义语音:允许赞助者选择自定义语音。
修改后请点击保存。
点击同一区域中的浏览器源(URL)即可复制地址。它与分享给观众的赞助页面不同,是专供 OBS 接收提醒的组件地址。
请勿在直播、视频或公开文章中展示浏览器源 URL。截图时也必须完整遮挡该地址。
2. 在 OBS 中添加浏览器源
打开 OBS Studio,选择要显示提醒的场景,在底部来源面板点击+,然后选择浏览器或 Browser。

点击来源面板下方的+。图片来源:OBS Sources Guide

在列表中选择 Browser。图片来源:OBS Sources Guide
为新来源设置便于识别的名称,例如:
DORODORA 赞助提醒
如果其他场景中已经存在同一个浏览器源,可通过添加现有进行复用。共用一个来源比创建多个独立副本更容易管理。
3. 设置 URL 和画面尺寸
在属性窗口的 URL 中粘贴 DORODORA 地址,并保持本地文件关闭。
最简单的方式是让尺寸与 OBS 基础画布一致。1080p 直播可使用:
宽度:1920
高度:1080
720p 可使用 1280 × 720。准确数值可在设置 → 视频 → 基础(画布)分辨率中查看。

在属性中输入 URL、宽度和高度。图片来源:OBS Browser Source
| 选项 | 建议初始值 | 原因 |
|---|---|---|
| 使用自定义帧率 | 关闭 | 默认 30 FPS 足以进行首次测试。 |
| 自定义 CSS | 保持默认 | 保留透明背景并移除页面边距。 |
| 不可见时关闭源 | 关闭 | 避免切换场景时无谓断开组件连接。 |
| 场景激活时刷新浏览器 | 关闭 | 避免重新加载正在播放的提醒。 |
根据 OBS 官方文档,开启第一个选项后,隐藏来源或离开场景时会卸载浏览器页面;第二个选项则会在返回场景时重新加载页面。实时提醒通常需要保持连接,因此建议先关闭这两个选项。
如果看到通过 OBS 控制音频,建议开启。这样 TTS 会在音频混音器中单独显示,您可以分别控制静音、音量和监听。
完成后点击确定。
4. 调整提醒的位置和大小
选择浏览器源后,OBS 预览中会显示红色边框。拖动边框即可调整大小和位置。
如果使用了完整画布尺寸,请先将来源准确适配屏幕:
- Windows:右键来源,选择
变换 → 适配屏幕 - macOS:右键来源,选择
变换 → 适配屏幕 - 快捷键:Windows 使用
Ctrl+F,macOS 使用Cmd+F
如果提醒位置已经由小组件自身决定,无需裁剪浏览器源。保持完整画布可以减少动画在边缘被截断的问题。
浏览器源必须在来源列表中位于游戏和背景上方。列表中越靠上的来源会显示在越前面,因此放在游戏捕获下方的提醒可能正常运行却无法看到。
5. 发送测试提醒
在 DORODORA 控制台的消息(TTS)中点击测试提醒,无需等待真实赞助。
测试前请确认:
- OBS 正在运行。
- 浏览器源的眼睛图标已开启。
- DORODORA URL 已完整粘贴。
启用和启用 TTS已保存。
如果提醒出现在 OBS 预览中并播放 TTS,基础连接就已完成。
6. 设置 TTS 音量和音频监听
如果提醒可见但没有声音,请在发送测试时观察 OBS音频混音器中的音量表是否移动。
音量表有反应
这表示声音已经进入 OBS。请检查:
- 来源没有被静音。
- 音量滑块没有调得太低。
高级音频属性中已勾选直播使用的音轨。- 如果主播也需要听到声音,将
音频监听设为监听并输出。
即使设为关闭监听,观众仍可能听到来源。监听主要决定主播是否通过耳机或扬声器听到声音。相反,仅监听(输出静音)可能会从直播输出中移除声音。主播和观众都需要听到 TTS 时,通常选择监听并输出。

检查音量表、滑块、静音和监听状态。图片来源:OBS Audio Mixer Guide
音量表没有反应
- 重新打开浏览器源属性。
- 如果有
通过 OBS 控制音频,请将其开启。 - 确认 URL 是消息提醒专用地址。
- 点击
刷新当前页面缓存。 - 再次从 DORODORA 发送测试提醒。
刷新浏览器源可能会中断正在播放的提醒。请在测试期间操作,不要在直播中操作。
提醒没有显示时的检查项
浏览器源被其他内容遮挡
将 DORODORA 提醒移动到游戏捕获、图片和颜色源上方,并检查眼睛图标是否开启。
粘贴了错误的 URL
赞助页面和浏览器源 URL 用途不同。OBS 需要的是消息(TTS)内显示的浏览器源(URL)。请检查前后空格以及地址是否完整。
没有保存设置
切换选项后请点击保存。否则之前的设置可能仍然生效。
测试提醒在画面外播放
右键来源,依次选择变换 → 重置变换和适配屏幕。同时确认宽度和高度与基础画布一致。
切换场景后提醒停止
关闭不可见时关闭源。如果多个场景使用同一提醒,请通过添加现有复用同一个来源。
直播前务必检查录制结果
即使 OBS 预览正常、耳机中也能听到 TTS,实际直播输出仍可能不同。直播前录制一到两分钟并回放文件。
请检查:
- 提醒没有被游戏或摄像头遮挡。
- 赞助者名称和消息清晰可读。
- TTS 相对麦克风不会过响或过轻。
- 游戏声音没有盖住提醒音和 TTS。
- TTS 开头和结尾没有被截断。
- 切换场景后测试提醒仍正常播放。
OBS 官方音频指南也建议在正常条件下进行录制并回听。相比只观察混音器音量表,最终录制文件更可靠。
常见问题
可以把浏览器源 URL 分享给观众吗?
不可以。应向观众分享 DORODORA 赞助页面。浏览器源 URL 只应输入 OBS,不要公开展示。
应该使用什么分辨率?
从 OBS 基础画布尺寸开始:1080p 使用 1920×1080,720p 使用 1280×720。
如果主播能听到 TTS,观众也能听到吗?
当双方都需要听到时,请选择监听并输出,并通过测试录制确认结果。
可以关闭 TTS 但保留画面提醒吗?
可以。保持消息提醒启用,只关闭 TTS 并保存即可。
不运行 OBS 也能收到赞助吗?
赞助页面的支付独立于 OBS。没有运行 OBS 和连接浏览器源时,只是无法在直播中实时显示提醒。相关事件仍可在 DORODORA 控制台中查看。
总结
最重要的三个要素是正确的 URL、来源顺序和音频输出。在 DORODORA 中启用消息和 TTS,复制专用 URL,并粘贴到 OBS 浏览器源中即可完成基础连接。
随后发送测试提醒,检查音频混音器并进行测试录制。根据监听设置,主播听到的声音可能与直播输出不同。
DORODORA 将赞助页面、AI TTS、Voice Cloning TTS、OBS 提醒 URL 和直播控制台整合在同一流程中。设置消息提醒,让简单的支付通知也能成为直播内容的一部分。
参考资料
- 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