EchoMusic 插件 — 在 Windows 任务栏上方显示当前歌词和封面的透明浮窗
- 🎵 卡拉OK双色渐变歌词 — 已播放歌词高亮色,未播放暗色。支持 YRC 逐字着色和整行渐变两种模式
- 🎮 悬停控件栏 — 鼠标移入浮窗显示播放控制(⏮ ⏯ ⏭ ❤️ 🔒),液态玻璃半透风格,移出 150ms 淡出
- ❤️ 喜欢/收藏按钮 — 一键切换喜欢,实时同步主程序
isFavorite状态,收藏时实心红色 #ff2d55 - 📻 私人 FM 不喜欢按钮 — FM 模式下替代"上一首",跳过并上报垃圾歌曲(三层回退兜底)
- 📀 专辑封面显示 — 圆形/方形封面,左侧或右侧放置,尺寸 24–64px
- 🌐 翻译与音译 — 有翻译/音译时在副行显示,可独立开关
- 🔍 歌词正则过滤 — 正则匹配隐藏制作信息、版权信息等无关歌词行
- 📜 进度驱动滚动 — 33ms 刷新
translateX平滑滚动,歌词自动匹配播放进度 - 🔒 锁定/解锁拖拽 — 锁定后鼠标穿透 (
screen-saver级置顶),解锁可自由拖拽 - 📍 任务栏自动贴靠 — 自动检测任务栏位置和尺寸,窗口自动贴靠边缘
- 🖥️ 屏幕热切换 — 监测显示器连接/断开/DPI 变化,自动重定位
- 🔤 系统字体选择 — 通过
ctx.fonts.getAll()API 动态加载,自定义下拉框选择 - 🎨 颜色自定义 — 已播放色、未播放色自由调节
- 📏 窗口尺寸可调 — 宽 200–600px,高 24–80px,可拖拽缩放
- 📌 始终置顶 —
screen-saver级一次置顶 + 心跳软恢复,不干扰任务栏
- 将
taskbar-lyric文件夹放入 EchoMusic 的plugins目录 - EchoMusic → 设置 → 插件 → 启用「任务栏歌词」
- 开始播放,浮窗自动出现在任务栏上方
| 设置项 | 说明 | 默认 |
|---|---|---|
| 启用任务栏歌词 | 浮窗显隐 | ✅ |
| 设置项 | 说明 | 默认 |
|---|---|---|
| 双行显示 | 显示两行歌词 | ✅ |
| 显示翻译 | 有翻译时副行显示 | ✅ |
| 显示音译 | 有音译时副行显示 | ❌ |
| 副歌词跑马灯 | 副行超长滚动 | ❌ |
| 无歌词文本 | 无歌词时展示文字 | "EchoMusic" |
| 设置项 | 说明 | 默认 |
|---|---|---|
| 启用歌词过滤 | 隐藏匹配歌词行 | ❌ |
| 过滤正则式 | ` | ` 分隔关键词 |
| 设置项 | 说明 | 默认 |
|---|---|---|
| 显示封面 | 显隐专辑封面 | ✅ |
| 封面大小 | 24–64px | 36px |
| 封面形状 | 圆形 / 方形 | 圆形 |
| 封面位置 | 左边 / 右边 | 左边 |
| 设置项 | 说明 | 默认 |
|---|---|---|
| 主歌词字号 | 10–24px | 14px |
| 副歌词字号 | 10–18px | 12px |
| 字体名称 | 下拉选择系统字体 | 系统默认 |
| 已播放颜色 | 已播放部分颜色 | #31cfa1 |
| 未播放颜色 | 未播放部分颜色 | #7a7a7a |
| 设置项 | 说明 | 默认 |
|---|---|---|
| 锁定窗口位置 | 锁定时鼠标穿透,关闭可拖拽 | ✅ |
| 手动调整 | 启用偏移滑块微调 | ❌ |
| 窗口宽度 | 200–600px | 400px |
| 窗口高度 | 24–80px | 40px |
| 水平偏移 | -100%–100% | 0% |
| 垂直偏移 | -100%–100% | 0% |
- 鼠标移到歌词上 → 封面和歌词淡出 → 显示控件栏
- 移出 150ms 后控件淡出 → 歌词恢复
- 快速进出自动重置延迟,无闪烁
- 状态实时同步主程序
playback.isFavorite - 点击发送
toggleFavorite命令 - 收藏 → 实心红心,未收藏 → 空心
- 检测到
isPersonalFM = true时,「上一首」按钮变为「不喜欢」 - 实现三层回退:直调 API → BroadcastChannel 中继 → IPC
nextTrack兜底
- 开「启用歌词过滤」
- 填正则关键词(
|分隔) - 匹配行自动跳过,其余行时间轴不受影响
- 悬停控件点 🔒 解锁
- 任意位置拖拽浮窗
- 再点 🔒 锁定,偏移量自动保存
- 值是百分比,适配不同分辨率
- 水平:正→右,负→左
- 垂直:正→远离任务栏,负→靠近
- 外观面板 → 字体下拉
- 自动列出系统所有已安装字体
- 选中即生效(实时预览)
| 场景 | 说明 |
|---|---|
| 第三方任务栏工具 | StartAllBack / ExplorerPatcher 可能导致位置偏差,用手动偏移调 |
| 全屏应用 | 浮窗仍显示,需手动关闭 |
| 多显示器 | 显示在主显示器任务栏上方 |
| 本地主程序版本 | 需 EchoMusic ≥ 2.2.6-beta.9(isFavorite 需主进程支持) |
taskbar-lyric/
├── index.js # 主入口 — 设置面板、窗口生命周期、心跳恢复
├── taskbar-lyric-window.js # 浮窗渲染 — 歌词着色、悬停控件、封面、过滤
├── taskbar-lyric-window.css # 浮窗样式 — 渐变、过渡、控件栏玻璃态
├── shared.js # 共享常量与工具
├── manifest.json # 插件清单
├── icon.svg # 图标
└── README.md
| 特性 | 实现 |
|---|---|
| 卡拉OK着色 | YRC 逐字渐变逐字着色,非 YRC 整行 translateX 渐变 |
| 进度滚动 | 33ms requestAnimationFrame 驱动 translateX,与播放同步 |
| 悬停控件 | setIgnoreMouseEvents(true, { forward: true }) 透传 mousemove,150ms 离开防抖 + 3s 看门狗 |
| 喜欢状态 | snapshot.playback.isFavorite 直读,toggleFavorite 命令切换 |
| FM 不喜欢 | 替代上一首按钮,三层回退:API 直调 → channel 中继 → IPC 跳过 |
| 歌词过滤 | 正则缓存 lyricFilterPatterns → 匹配跳过 → findNextVisibleIndex 降级 |
| 设置同步 | BroadcastChannel 优先,storage 轮询后备,hash 比较防抖 |
| 置顶保活 | screen-saver 级一次性置顶 + BroadcastChannel 心跳软恢复(连续 9s 无心跳才重建) |
| 字体扫描 | ctx.fonts.getAll() API,自定义下拉框 |
| 屏幕热切换 | 每 2s 检测 screen 几何变化 → positionToTaskbar 重定位 |
| 位置锚定 | 宽度变化以封面侧边缘为锚点,防中心漂移 |
| 偏移百分比 | 以窗口可移动范围为基准计算,自适应分辨率 |
- 心跳从 storage 轮询迁到 BroadcastChannel,消除 Chromium 节流误判
- 窗口恢复改为渐进取态机(9s 无心跳才重建),消除闲置后重建闪屏
- 悬停离开防抖从 300ms 降至 150ms
- 修复鼠标快速进出控件不显示的问题
- 修复划出后控件长时间不消失的孤儿定时器问题
- 私人 FM 模式不喜欢按钮(替代上一首)
screen-saver级一次性置顶替代 2s 循环保活
- 歌词正则过滤
- 悬停控件(播放/暂停/上一首/下一首/喜欢/锁定)
- 喜欢按钮基于
snapshot.playback.isFavorite - 系统字体通过
ctx.fonts.getAll()加载 - 掀盖偏移修复
- 宽度范围 200–600px
随 EchoMusic 项目分发。