801 字
4 分钟
一个免费音乐网站的上线
AI 摘要Gemini 2.5 Pro
起因
很早以前，我做过一个叫「清音乐」的免费在线音乐网站。那时候完全是小白水平：
- UI 直接抄的「清 Tab」的主页，加了个播放页
- 用 SVG 透镜滤镜实现玻璃拟态，Edge 一开只剩 15FPS
- 几千行过程式代码塞在一个 HTML 里，改一个样式全站爆炸
- 靠免费 API，隔三差五就挂
暑假的时候我试图重构它，结果翻了翻代码当场自闭，直接放弃。
但神奇的是，这一坨代码居然是我所有网站里流量最高的（当时还没建博客呢）——在必应站长工具里显示能排到「在线免费音乐」相关词的前几名（现在应该没了）。这让我意识到：大家真的很需要一个干净、好看、不登录也能听、登录后还能永久收藏的免费音乐网站。
如今市面上的免费音乐站要么 UI 像 2010 年，要么强制登录，要么后端跑路只剩个空壳。于是我决定：重做一次，这次要做得“好用”且“好看”。
新项目诞生
用了一周时间，正好也是吃上了Gemini 3的发布，全新的 THW Music 上线了。
WARNING本项目目前使用 ElysiumStack 公开的 ElysiumMeting 免费音乐API，在此致以最诚挚的感谢！
NOTE我只是把 API 反代到了自己的子域名
meting.tianhw.top，我不想给公益API太大压力，如果成了我会通过Docker自建API服务，但我的服务器在洛杉矶，网速不是很行，届时可能影响体验，先看看网站流量吧
这次最大的进步
| 老版本（清音乐） | 新版本（THW Music） |
|---|---|
| 无持久化存储，依靠浏览器本地存储 | 用 Supabase 实现完整注册/登录 + 收藏永久同步 |
| 玻璃拟态 SVG 滤镜，巨卡 | 纯 CSS + Tailwind 实现 WinUI 风格 Mica/Acrylic 效果，丝滑 |
| 歌词滚动卡顿 | 逐句高亮 + 可拖动进度 + 全屏沉浸式歌词页 |
| 主题固定 | 用 ColorThief 实时从专辑封面取色，动态主题换色 |
| 各种全局变量，屎山代码 | 完整模块化 + 自定义事件总线，结构清晰 |
| CF Pages，国内抽风 | Netlify 大陆优化 |
技术栈一览
- 样式：Tailwind CSS + 手写 WinUI 风格 Mica 毛玻璃 + CSS 变量动态主题
- 动画：GSAP（只用了 Timeline 和轻量 tween）
- 颜色提取：ColorThief
- 音乐源：ElysiumMeting→ EdgeOne CDN 反代 → meting.tianhw.top
- 认证与数据库：Supabase
- 部署：Netlify
功能展示
WARNING目前的登录/注册还没有验证码的步骤，各位大佬手下留情，上一次的便签墙还能招来XSS攻击我是没想到的😅
- 注册/登录后解锁收藏：收藏夹跨设备同步
- 动态主题：每换一首歌，UI 主色调自动跟随专辑封面变化
- 歌词体验：
- 逐句高亮 + 平滑滚动
- 全屏沉浸式歌词页（侧边栏自动隐藏）
体验
目前，此项目已经部署在 Netlify 上，点击 https://music.tianhw.top 即可体验！
有 bug 或建议欢迎在下方的评论区提，我看到都会回。