跳转到主要内容
/radio 电台页面是一个专门的音乐空间,由你在 lib/music-config.ts 中定义的歌单驱动。访客可以浏览歌单、选择歌曲,享受可视化播放器 — 旋转的封面动画、五条波形可视化器,以及在背景中漂浮飘过的歌词片段。

浏览歌单

落地页是一个卡片网格 — 每个歌单一张卡片。每张卡片展示:
  • 歌单名称与描述
  • 歌曲数量
  • 前三首歌曲标题的预览
点击任意歌单卡片即可打开它并查看完整曲目列表。
每张歌单卡片上显示的图标是根据歌单的 id 推断的。idbirthday-vibes 的歌单会得到蛋糕图标,favorite-songs 会得到爱心图标,其他都会显示钢琴图标。给你的歌单起个有意义的 ID,就能自动匹配到合适的图标。

播放器

当你点击一首歌时,播放器横幅会出现在页面顶部。它会显示:
  • 一个旋转的渐变方块(封面占位图),播放时角落会有一个五条波形可视化动画
  • 歌曲 标题艺人
  • 已配置的 专辑 名(如果有)
  • 一个播放/暂停切换按钮
当前正在播放的歌曲会在曲目列表中以粉色高亮显示。

漂浮歌词

如果歌曲配置了 lyrics,在播放器活跃期间,单行歌词会从背景中向上漂浮。它使用与首页倒计时画面相同的 CSS float-up 关键帧动画。

歌曲数据结构

歌曲在 lib/music-config.ts 中定义。每首歌至少需要 titleartist,其他字段都是可选的。

歌单数据结构

添加和编辑歌曲

要添加歌曲或新建歌单,请直接编辑 lib/music-config.ts。详情见 配置音乐 的分步指南。
电台页面并不真正播放音频。它是一个视觉化的音乐体验 — 歌曲会被展示和动画化,但不会通过浏览器的音频 API 实际播放。如需真正的音频播放,可以将 coverUrl 或单独的 audioUrl 字段接入到 HTML <audio> 元素。