YU7 天际屏动态桌面歌词

一个面向小米 YU7 天际屏、Windows 桌面和 OBS 直播/录制场景的动态桌面歌词工具。项目提供本地歌词服务、透明 Web 叠加层和桌面歌词窗口，让汽水音乐歌词可以以低延迟、可调样式、可穿透点击的方式显示在天际屏、OBS 或日常桌面上。

关键词：YU7、天际屏、动态桌面歌词、汽水音乐歌词、OBS 歌词、透明歌词叠加层、Windows 桌面歌词。

项目特点

• 透明歌词叠加层：适合 OBS Browser Source，也可通过桌面窗口置顶显示。
• YU7 天际屏适配：支持宽屏桌面歌词展示，可用于车机/副屏/扩展屏风格的动态歌词画面。
• 汽水音乐歌词导入：支持粘贴汽水音乐分享链接解析歌词，并缓存到本地。
• 歌词播放同步：提供延迟补偿、时间轴调试和播放进度同步能力。
• 双语显示：支持主字幕、翻译字幕、副字幕和左右漂浮字群。
• 可视化配置：通过本地管理页调整字体、颜色、发光、透视、字群数量、动画速度等参数。
• 桌面端封装：WPF + WebView2 窗口，支持透明、置顶、托盘、拖动、缩放和本地服务自启动。
• 私有配置：运行数据、歌词缓存、日志和 API Key 保存在本地 data/ 目录，不进入 Git 仓库。

技术栈

• Node.js 22+
• 原生 HTTP Server
• HTML / CSS / JavaScript
• .NET 8 WPF
• Microsoft WebView2

快速启动

安装依赖后启动本地服务：

npm install
npm run start

开发模式：

npm run dev

启动桌面歌词窗口：

npm run start-desktop

也可以直接双击：

start-desktop.bat

OBS 接入

在 OBS 中添加：

Browser Source / 浏览器源

URL 填写：

http://127.0.0.1:18765/overlay

建议画布尺寸：

1920 x 1080

管理页

浏览器打开：

http://127.0.0.1:18765/admin

管理页可用于导入歌词、调整样式、设置延迟补偿、配置翻译参数和预览动画。

桌面窗口

桌面端提供置顶歌词窗口和顶部操作栏，适合在 YU7 天际屏、直播、录制或日常桌面歌词场景中使用：

• 顶部操作栏集成窗口标题、状态提示和常用按钮，避免重复显示两条操作栏。
• 穿透模式会让歌词区域接收不到鼠标事件，便于点击后方窗口；顶部操作栏仍保持可操作。
• 全屏后进入穿透模式时，顶部操作栏会贴合窗口顶部，不会因坐标偏移导致按钮失效。
• 在穿透模式中单击顶部操作栏空白区域不会退出全屏；只有实际拖动窗口时才会离开全屏并进入移动状态。

调试入口

固定某个动画时间点：

http://127.0.0.1:18765/overlay?timeMs=1800

显示布局参考线：

http://127.0.0.1:18765/overlay?debug=layout&timeMs=1800

本地数据

以下内容只保存在本机，不会提交到仓库：

data/
desktop/bin/
desktop/obj/
smtc-test/bin/
smtc-test/obj/
work/
*.log

其中 data/config.json 会保存本地配置和 API Key。首次上传前已将代码默认 API Key 清空，避免密钥进入 Git 历史。

仓库状态

该项目已公开发布，适合 YU7 天际屏、个人直播、录制和动态桌面歌词叠加场景使用。运行数据、歌词缓存、日志和 API Key 仍只保存在本地，不会提交到仓库。