用 vibe coding 做了一个网易云桌面歌词工具

2026年7月1日

→ 在线 Demo
→ GitHub 项目地址

为什么会做这个

平时写东西的时候我会一直开着网易云。

问题是歌词总是在播放器窗口里,切到别的应用就看不到了。每次想看一句歌词,都得再切回去,节奏会被打断。

这个痛点很小,但出现得很高频。

所以我给自己做了一个桌面歌词工具:播放器在后台放歌,歌词在桌面上持续更新,不用来回切窗口。

做了什么

这个工具的目标很明确:轻、稳、跟歌准

核心能力主要有三块:

  • 自动识别网易云当前播放歌曲并拉取对应歌词
  • 歌词窗口置顶显示,尽量不打扰当前工作
  • 播放进度变化时自动同步歌词行(包含暂停/切歌场景)

技术上我用的是 Electron + TypeScript。界面保持极简,不做复杂播放器控制,只专注把“当前该显示哪句歌词”这件事做好。

最难的一步

最花时间的不是 UI,而是“歌词跟进度同步”这件事。

桌面歌词看起来只是往上滚动几行字,但真实体验很吃细节:

  • 进度读取有抖动,直接跟随会出现跳行
  • 切歌瞬间状态不稳定,容易短暂显示上一首歌词
  • 暂停和恢复播放时,如果状态机处理不好,会出现错位

我最后做的是一套偏“稳态优先”的同步策略:

  • 对进度做平滑和阈值判断,过滤微小抖动
  • 切歌时先进入过渡态,确认曲目后再切歌词
  • 暂停时锁住当前行,恢复后再重新对齐

这样做下来,体感会更像原生歌词组件,而不是一个“勉强能跑”的外挂层。

这次项目的收获

这次让我更确定一件事:

好工具不一定复杂,关键是能不能稳定解决一个高频小痛点。

MyLyrics 不是大项目,但它确实改变了我每天听歌时的工作流。

对我来说,这类项目正是 vibe coding 最有价值的场景:快速把一个个人需求做成可用产品,然后在真实使用中不断打磨细节。