跳转至

如何使用 Echo-Live

Echo-Live 无需运行安装程序,开箱即用。

不过在开始使用之前,您最好将其放置在一个合适的位置。

我的意思是,您最好别把它放在 “桌面”、“下载” 等类似的文件夹中,虽然这不影响使用,但可能影响您在 OBS 里添加源的速度以及不利于文件管理维护。

等一下! 如果您还没有在资源管理器中打开显示文件扩展名,请打开显示文件扩展名。特别提醒,下载完压缩包以后一定要解压!

使用方法

方法一:通过 OBS 内置浏览器广播传递消息(推荐)

  1. 打开 OBS,将 live.html 作为浏览器源 (不要勾选 “本地文件”) 添加到您的场景中。如果您不知道如何正确填写地址,请直接使用浏览器打开 live.html,然后复制地址栏里的地址。
  2. 选中您刚刚添加的对话框源,右键,在弹出菜单中找到 “混合方式”,选择 “关闭 sRGB”。
  3. 点击 OBS 菜单中的 停靠窗口 > 自定义浏览器停靠窗口,将 editor.html 添加到停靠窗口中。如果您不知道如何正确填写地址,同上。
  4. 在弹出的编辑窗口中,根据指引填写对话数据,点击 “发送”。(注:如果您关闭了广播功能则不会有发送按钮)
  5. 若要继续制作下一条对话,重复步骤 3。

注:如需修改启动后的初始消息,请编辑文件 start.js。

Linux 用户请注意

截至 OBS 官方为 Linux 发行的 30.0 版本,OBS 未提供浏览器源、自定义停靠窗口的功能,因此该方法不可用。

方法二:通过 WebSocket 传递消息

技术性操作

此方法需要您掌握一定的计算机知识,否则对您而言可能会是一场灾难,请量力而行。

  1. 在浏览器中打开 settings.html,这是配置文件编辑器。点击 “编辑” 标签页,更改以下配置:
    • Echo-Live → 广播 → 启用 WebSocket:开启;
    • 编辑器 → WebSocket → 启用 WebSocket:开启。
  2. 配置修改完成后点击底部的 “保存” 按钮保存配置文件。配置文件是 Echo-Live 根目录中的 config.js,用编辑后的配置文件覆盖它。
  3. 前往 Echo-Live WebSocket Server GitHub 仓库,下载最新版本,并根据仓库自述文件中的指引完成安装。

方法三:通过轮询传递消息

如果因 OBS 更新等原因导致上述方法失效,请尝试此方法。

  1. 在浏览器中打开 settings.html,这是配置文件编辑器。点击 “编辑” 标签页,更改以下配置:
    • Echo-Live → 广播 → 启用广播:关闭;
    • 消息轮询 → 启用消息轮询:开启;
    • 编辑器 → 表单预填充:
      • 启用在输出内容前插入内容:开启;
      • 启用在输出内容后插入内容:开启。
  2. 配置修改完成后点击底部的 “保存” 按钮保存配置文件。配置文件是 Echo-Live 根目录中的 config.js,用编辑后的配置文件覆盖它。
  3. 打开 OBS,将 live.html 作为浏览器源(勾选 “本地文件”)添加到您的场景中。
  4. 选中您刚刚添加的对话框源,右键,在弹出菜单中找到 “混合方式”,选择 “关闭 sRGB”。
  5. 使用文本编辑器打开 start.js 备用。建议您使用 VSCode 等专业文本编辑器作为您的文本编辑器,不建议使用 Windows 内置的记事本。
  6. 在浏览器中打开 editor.html,根据网页指引生成对话数据并复制。
  7. 将 start.js 中的内容全部替换成复制的内容并保存。
  8. 对话框将会自动打印修改后的消息。如果没有启用消息轮询,则需手动在 OBS 中选中浏览器源,点击 “刷新”。如果您自定义了一串消息列表,点击 “交互”,在弹出的窗口中点击任意内容区域即可开始打印下一条消息。
  9. 若要继续制作下一条对话,重复步骤 3 ~ 5。当您熟悉语法格式后,您也可以直接编辑 start.js。

注意事项

  • 对话框等前台页面基于 1920 × 1080 分辨率设计,如果您的分辨率过高或过低会影响显示效果。
  • config.js 是配置文件,您可以在配置文件编辑器中更改配置。
  • 富文本不适合快节奏的直播活动,更适合用作预先准备好的演出。
  • 您可能需要准备足够大的屏幕或副屏以获得更方便的操作体验。
  • 在浏览器中预览效果时,一些浏览器的自动播放音频政策会导致您在未点击网页的情况下听不到打字音效,这是正常现象,OBS 内置浏览器无此限制。
  • 请注意控制每一段话的字数,否则会溢出。
  • 对话框网页不可见时会进入休眠状态以防止意料之外的演出,此机制可以在配置中关闭,但不建议你这么做。

如何使用编辑器

编辑器

此标签页用于发送消息。

点击 “输出” 按钮可跳转至输出标签页输出一串用于发送消息的代码。

当您勾选了 “使用快速格式化代码” 后,您可以使用快速格式化代码为文本添加样式,同时编辑器中会出现格式化控制器,用于快速在光标处或选中文本两侧插入代码。点击控制器上的文本颜色按钮会弹出拾色器悬浮框,拾色器最上方是色板下拉选单,我们准备了多套精心设计的配色方案(除了 “Minecraft” 色板,您最好谨慎使用),您可以在此切换不同的色板。如果您对颜色的使用有困扰,请见无障碍使用指南 § 色盲/色弱视觉调整。

编辑器

勾选 “使用快速格式化代码” 后的编辑器

如果您启用了广播模式,则会出现 “发送” 按钮,点击即可直接发送消息。

配置

此处用于配置输出代码时头尾插入的内容。如果您不知道这是什么请不要动它。

输出

此处用于输出代码。

如果您启用了广播模式,则会出现 “发送” 按钮,点击即可直接发送消息。您可以在这里编辑自定义消息直接发送。默认接受消息格式数据,如果头尾包含配置中插入的内容则会先去除头尾再以消息格式数据处理。

日志

输出 Echo-Live 运行日志,只有启用广播模式的情况下才有日志显示。

对话框状态仪表板

对话框状态仪表板默认禁用,可以在配置文件中启用,只有在广播模式下才能生效。如果你在 OBS 中添加了多个对话框,建议启用。

对话框状态仪表板可以监控对话框运行状态,底部的颜色指示条表示对话框是否处于休眠状态,绿色为激活,红色为休眠。如果您有视觉障碍,请见无障碍使用指南 § 色盲/色弱视觉调整。

对话框状态仪表板

您可以使用右键(触屏设备长按)为对话框添加标记,标记会显示在右侧,有以下几种标记:

  • 取消标记:无效果。
  • 已选中:此时未被选中的对话框将不会收到消息。
  • 已排除:不会收到任何消息。

另外,仅接收定向广播的对话框会在默认情况下显示一个半隐的禁止图标 。启用高对比度时,禁止图标 会旋转 90 度以便和标记排除状态区分。

当对话框正在打印消息时,仪表板上对应的方块会显示 沙漏图标。

如果对话框收到了多条消息并且至少有一条消息未打印,将会在空闲时显示 气泡图标。此时点击对应的方块即可打印下一条消息。

对话框状态仪表板上显示了气泡图标

也许您已经发现了,对话框可以被命名,并且在仪表盘中显示自定义名称。想要自定义对话框名称,请打开 OBS 中对话框源的设置,在地址后方添加以下参数:

?name=自定义名称

假如您的对话框文件位于 D:/Echo-Live/live.html,那么完整的地址应该是:

file:///D:/Echo-Live/live.html?name=自定义名称

当然,如果您使用的是 Linux 系统,那么地址也许是这样的:

file:///home/root/Echo-Live/live.html?name=自定义名称

保存设置后刷新源即可生效。

如何使用配置文件编辑器

参阅配置 § 使用配置文件编辑器。

如何使用历史记录

历史记录是一个面向观众展示历史对话消息的页面,于 1.3.0 版本加入,位于 Echo-Live 根目录中的 history.html。

  1. 要使用历史记录,首先必须打开广播模式才能使其正常工作。
  2. 打开 OBS,将 history.html 作为浏览器源 (不要勾选 “本地文件”) 添加到您的场景中。如果您不知道如何正确填写地址,请直接使用浏览器打开 history.html,然后复制地址栏里的地址。
  3. 如果您已完成了上文中描述的广播模式下应该做的准备工作,那么历史记录可以开始使用了。

如何使用形象播放器

形象播放器是一个展示立绘的演出工具,于 1.6.0 版本加入,位于 Echo-Live 根目录中的 character.html。

  1. 要使用形象播放器,首先必须打开广播模式才能使其正常工作。
  2. 打开 OBS,将 character.html 作为浏览器源 (不要勾选 “本地文件”) 添加到您的场景中。如果您不知道如何正确填写地址,请直接使用浏览器打开 character.html,然后复制地址栏里的地址。
  3. 如果您已完成了上文中描述的广播模式下应该做的准备工作,那么历史记录可以开始使用了。

形象播放器目前仍是一个实验性功能,没有可供直接操作的用户界面,仅供特殊演出使用。

如何使用 URL 参数

参阅 URL 参数。

工作模式

广播模式

广播模式是一种基于浏览器内网页之间的通信技术实现的工作模式,由编辑器发送广播消息,对话框接收消息。该工作模式要求对话框和编辑器都在 OBS 的环境内。

广播模式工作原理

广播模式工作原理

广播模式下可以开启 WebSocket 连接,第三方软件可以通过 WebSocket 接口向 Echo-Live 发送消息。

WebSocket 工作原理

WebSocket 工作原理

轮询模式

轮询模式是备用方案,由对话框主动定时查询 start.js 是否发生更改,如果发生更改则输出新消息。启用广播模式将会禁用该模式。

轮询模式工作原理

轮询模式工作原理

孤立模式

孤立模式在当前版本中已无法保证按预期工作,如无特殊需求请不要使用此模式。

当以上两种模式均未启用时将会进入孤立模式。在此模式下,一旦 Echo-Live 播放完了所有消息,生命周期便到此为止,再次使用需要刷新浏览器。