🎵 Apple Music Style Lyric Engine

让歌词成为桌面的一部分

• steam订阅量已超过2000+

一直很喜欢 Apple Music 的动态歌词界面，尤其是那种随着音乐节奏缓缓滚动的歌词、柔和的背景色彩，以及恰到好处的模糊效果。

于是，我尝试把这套视觉体验搬到 Windows 桌面上，让原本只是用来展示壁纸的桌面，也能成为一个沉浸式的音乐空间。

这个项目基于 HTML、CSS 和 JavaScript 开发，专门为 Wallpaper Engine 设计。它参考了 Apple Music 的歌词界面，在保留原有视觉风格的同时，针对桌面使用场景进行了适配。

目前开源的是项目的完整前端部分，不包含音乐信息获取及歌词同步后端。

✨ 项目特色

🎨 熟悉的 Apple Music 视觉风格

项目在界面设计上尽可能贴近 Apple Music 的原生体验。

采用大字号歌词排版、柔和的渐变色彩与毛玻璃模糊效果，让整个桌面不再只是静态的背景，而是能够随着音乐变化的动态画面。

相比传统的音乐可视化壁纸，我更希望它看起来简洁、自然，而不是堆砌复杂的特效。

🎶 让歌词自然地流动

歌词展示是整个项目的核心。

通过 JavaScript 实现歌词的动态滚动、当前歌词高亮以及平滑的过渡动画，尽可能还原 Apple Music 中那种流畅、连贯的歌词切换体验。

播放音乐时，当前歌词会成为视觉焦点，其他歌词则自然地融入背景，让用户能够轻松跟随歌曲的节奏。

🌈 动态模糊与渐变背景

除了歌词本身，我也花了一些心思在背景的视觉表现上。

利用 CSS Filter、渐变和透明度效果，营造出柔和的背景氛围，让歌词与背景之间形成自然的层次感。

整个界面尽量避免过度复杂的装饰，希望在保持视觉效果的同时，也能适合作为长期运行的桌面壁纸。

🖥️ 专为 Wallpaper Engine 设计

这并不是简单地将一个网页放进 Wallpaper Engine，而是在设计时就考虑了桌面壁纸的使用场景。

• 多分辨率适配：支持 1080P、2K、4K 等常见桌面分辨率。
• 轻量化前端：基于原生 Web 技术实现，尽量减少不必要的资源开销。
• 平滑动画：通过 CSS 和 JavaScript 实现歌词滚动与视觉过渡。
• 灵活的数据接口：预留歌词数据接口，方便后续接入不同音乐平台或本地服务。

🔌 不局限于某一个音乐平台

项目采用前后端分离的思路，前端主要负责歌词展示和视觉效果，音乐播放状态、歌词内容等数据则由外部服务提供。

因此，它并不需要与某个特定音乐播放器深度绑定。

只要后端能够按照对应的数据格式提供歌曲信息和歌词数据，就可以驱动前端进行展示。

这也为后续扩展不同音乐平台、增加自定义功能留下了空间。

🛠️ 技术实现

项目整体采用原生 Web 技术开发，没有引入复杂的前端框架。

• HTML5：负责页面结构与歌词内容展示。
• CSS3：实现毛玻璃效果、渐变背景、响应式布局及过渡动画。
• JavaScript (ES6+)：负责歌词数据处理、滚动控制与界面状态更新。
• Wallpaper Engine：作为网页壁纸的运行环境。

选择这套技术栈，主要是希望项目足够轻量，同时方便其他开发者阅读、修改和二次开发。

🚀 快速体验

不需要下载源码或手动导入网页，直接通过 Steam 创意工坊订阅即可安装壁纸。

1. 打开 Steam 创意工坊页面。
2. 点击 订阅，Steam 会自动下载壁纸资源。
3. 启动 Wallpaper Engine，在已安装壁纸中找到本项目并应用。

🎮 Steam 创意工坊： 点击订阅壁纸

💻 GitHub 开源地址： 查看前端源码

💡 写在最后

最初做这个项目，其实只是因为自己很喜欢 Apple Music 的歌词设计，想让 Windows 桌面也拥有类似的体验。

从歌词排版、滚动动画到背景模糊效果，整个过程更多的是不断调整细节，让它看起来更接近自己心目中的效果。

目前项目还有不少可以完善的地方，所以决定先把前端代码开源出来。

如果你也喜欢这种风格，或者对 Wallpaper Engine、网页动画和音乐可视化感兴趣，欢迎下载体验，也欢迎基于项目进行修改和二次开发。

如果这个项目对你有帮助，欢迎点个 ⭐ Star！

📄 开源协议

本项目基于 MIT License 开源。

本项目为个人开发的非官方作品，与 Apple Inc. 及 Apple Music 无关联。