Beat Link Trigger OBS 直播叠加层完整教程为 Twitch 直播打造实时 DJ 曲目数据可视化【免费下载链接】beat-link-triggerTrigger events and automate shows in response to events on Pioneer CDJs项目地址: https://gitcode.com/gh_mirrors/be/beat-link-triggerBeat Link Trigger 是一款专为 Pioneer CDJ 打造的开源桥接工具能将 CDJ 的播放事件自动化到灯光、视频和 DAW 软件。它内置的OBS 叠加层 Web 服务器可以直接抓取 CDJ 正在播放的曲目名称、BPM、进度和波形配合 OBS Studio 的浏览器源即可在 Twitch 直播中实时展示 DJ 曲目数据让直播间瞬间专业起来。️ OBS 直播叠加层能做什么传统的做法是用屏幕截图方式截取 Player Status 窗口的一部分放进直播画面但这种方式样式完全不可控。OBS 叠加层功能则让你自己决定显示什么、放在哪里、长什么样 实时显示每个玩家的曲目标题、艺术家、专辑、BPM、播放/剩余时间️ 动态展示专辑封面和波形图整曲预览或滚动细节 用 HTML CSS JavaScript 自由排版打造品牌化直播间面板 数据通过内置 Web 服务器以 JSON 形式实时更新画面流畅不闪烁⚙️ 第一步连接 DJ Link 网络并上线叠加层的数据来自 CDJ 发出的 DJ Link 网络数据包所以先让 Beat Link Trigger 与播放器网络在线确认运行 CDJ 的电脑和运行 Beat Link Trigger 的电脑在同一局域网打开 Beat Link Trigger触发窗口会自动搜索网络中的播放器勾选要监听的播放器状态变为绿色即表示已上线 没有硬件也能玩即使离线叠加层服务器也会提供两套内置模拟曲目数据Gareth Emery 的Concrete Angel和 Lindsey Stirling 的Transcendence方便你先设计好模板。️ 第二步启动内置 OBS 叠加层 Web 服务器在菜单Network网络中选择OBS Overlay Web Server即可打开叠加层服务器配置窗口菜单动作定义见 src/beat_link_trigger/triggers.clj窗口中的关键选项选项作用Server PortWeb 服务器端口默认 17081一般无需修改Run勾选后启动 / 取消勾选停止服务器Open in Browser用浏览器打开叠加层页面顺便复制地址栏 URL 粘贴到 OBSTemplates Folder指定自定义模板文件夹必须包含overlay.html文件Public Folder指定公共资源文件夹其中文件可通过/public/文件名引用Inspect Template Parameters以树状结构查看当前所有可用模板变量的实时值服务器的路由实现模板渲染、/params.json数据接口、封面与波形图片接口位于 src/beat_link_trigger/overlay.clj。 第三步在 OBS Studio 中添加浏览器源在 Beat Link Trigger 中勾选Run启动服务器打开 OBS Studio在来源中右键 → 添加 →浏览器填写地址OBS 与 Beat Link Trigger 在同一台电脑http://127.0.0.1:17081在另一台电脑上直播http://运行BLT电脑的局域网IP:17081设置合适的宽度和高度叠加层就会实时显示在直播画面中 进阶自定义你的叠加层模板Beat Link Trigger 自带一套默认模板源码在 resources/beat_link_trigger/templates/overlay.html你可以照着它修改或者完全自己写。模板是 HTML 文件支持 Selmer 模板语法。最简单的用法——在overlay.html里插入变量h1{{ master.track.title }} — {{ master.track.artist }}/h1 p{{ master.pitch-display }} / {{ master.track-bpm }} BPM/p推荐的流畅更新方式由于 OBS 浏览器源没有双缓冲机制整页刷新会导致闪烁。最佳实践是页面只渲染一次然后用 JavaScript 定时轮询/params.json接口按元素 ID 更新变化的部分默认模板正是这样实现的。可用的核心变量完整列表可点击Inspect Template Parameters实时查看players/master/mixers/collections顶层设备分组如{{ players.1.track.title }}播放状态is-playing、is-paused、is-synced、is-tempo-master时间time-played.display、time-remaining.minutes曲目详情track.artist、track.album、track.colorrekordbox 颜色代码、track.rating等常用过滤器lower/upper大小写、abbreviate:20截断长标题、default:No track空值占位、sort按通道号排序。动态图形接口——直接以img标签引用即可img src/art/1 width80 height80 img src/wave-preview/1?width500height100 img src/wave-detail/1?width800scale2/art/1播放器 1 的专辑封面80×80无封面时返回透明图/wave-preview/1整曲波形预览带播放进度线、Cue 点和段落色带/wave-detail/1滚动式细节波形可调整缩放级别把 logo、字体、样式表等放进Public Folder用/public/logo.png这样的方式引用即可。 常见问题 FAQQ模板改不动页面不更新确保你的文件夹里文件名就叫overlay.html改完刷新浏览器即可看到效果模板与公共资源不要用同一个文件夹否则会暴露原始模板。QOBS 里看到页面闪烁说明你可能用了整页刷新方案。改用轮询/params.json DOM 局部更新的写法。Q想让波形背景透明或换成白色可以在 Global Setup Expression 中使用set-overlay-background-color、set-overlay-indicator-color、set-overlay-emphasis-color调整波形配色。Q如何获取源码如需要在本地研究或构建可克隆仓库git clone https://gitcode.com/gh_mirrors/be/beat-link-trigger 更多资源完整的模板语法、变量说明和过滤器清单见官方文档 doc/modules/ROOT/pages/ObsOverlay.adoc服务器核心逻辑见 src/beat_link_trigger/overlay.clj。现在打开你的 CDJ让直播间拥有真正的实时 DJ 数据面板吧【免费下载链接】beat-link-triggerTrigger events and automate shows in response to events on Pioneer CDJs项目地址: https://gitcode.com/gh_mirrors/be/beat-link-trigger创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考