/radio 电台页面是一个专门的音乐空间,由你在 lib/music-config.ts 中定义的歌单驱动。访客可以浏览歌单、选择歌曲,享受可视化播放器 — 旋转的封面动画、五条波形可视化器,以及在背景中漂浮飘过的歌词片段。
浏览歌单
落地页是一个卡片网格 — 每个歌单一张卡片。每张卡片展示:- 歌单名称与描述
- 歌曲数量
- 前三首歌曲标题的预览
播放器
当你点击一首歌时,播放器横幅会出现在页面顶部。它会显示:- 一个旋转的渐变方块(封面占位图),播放时角落会有一个五条波形可视化动画
- 歌曲 标题 和 艺人
- 已配置的 专辑 名(如果有)
- 一个播放/暂停切换按钮
漂浮歌词
如果歌曲配置了lyrics,在播放器活跃期间,单行歌词会从背景中向上漂浮。它使用与首页倒计时画面相同的 CSS float-up 关键帧动画。
歌曲数据结构
歌曲在lib/music-config.ts 中定义。每首歌至少需要 title 和 artist,其他字段都是可选的。
歌单数据结构
添加和编辑歌曲
要添加歌曲或新建歌单,请直接编辑lib/music-config.ts。详情见 配置音乐 的分步指南。
电台页面并不真正播放音频。它是一个视觉化的音乐体验 — 歌曲会被展示和动画化,但不会通过浏览器的音频 API 实际播放。如需真正的音频播放,可以将
coverUrl 或单独的 audioUrl 字段接入到 HTML <audio> 元素。