> ## Documentation Index
> Fetch the complete documentation index at: https://help.helloazhenweb.top/llms.txt
> Use this file to discover all available pages before exploring further.

# 音乐电台 — 精选生日歌单

> 在 /radio 浏览歌单，选中一首歌，动画播放器会显示歌曲详情和可视化效果，同时歌词在背景中漂浮飘过。

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

## 浏览歌单

落地页是一个卡片网格 — 每个歌单一张卡片。每张卡片展示：

* 歌单名称与描述
* 歌曲数量
* 前三首歌曲标题的预览

点击任意歌单卡片即可打开它并查看完整曲目列表。

<Tip>
  每张歌单卡片上显示的图标是根据歌单的 `id` 推断的。`id` 为 `birthday-vibes` 的歌单会得到蛋糕图标，`favorite-songs` 会得到爱心图标，其他都会显示钢琴图标。给你的歌单起个有意义的 ID，就能自动匹配到合适的图标。
</Tip>

## 播放器

当你点击一首歌时，播放器横幅会出现在页面顶部。它会显示：

* 一个旋转的渐变方块（封面占位图），播放时角落会有一个五条波形可视化动画
* 歌曲 **标题** 和 **艺人**
* 已配置的 **专辑** 名（如果有）
* 一个播放/暂停切换按钮

当前正在播放的歌曲会在曲目列表中以粉色高亮显示。

## 漂浮歌词

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

## 歌曲数据结构

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

```typescript theme={null}
interface Song {
  title: string;
  artist: string;
  album?: string;
  duration?: string;
  coverUrl?: string;
  lyrics?: string;
  backgroundUrl?: string;
  description?: string;
}
```

| 字段              | 说明                               |
| --------------- | -------------------------------- |
| `title`         | 在曲目列表和播放器中显示的歌曲名。                |
| `artist`        | 显示在标题下方的艺人名。                     |
| `album`         | 出现时会显示在播放器中的专辑名。                 |
| `duration`      | 用于显示的字符串（如 `"4:12"`），出现在每行曲目的右侧。 |
| `coverUrl`      | 封面图的 URL。目前保留供未来使用。              |
| `lyrics`        | 以换行分隔的歌词。用于电台和报告页中漂浮的歌词。         |
| `backgroundUrl` | 在音乐报告歌曲段落中使用的全屏背景图 URL。          |
| `description`   | 显示在报告中歌曲卡片上的一段个人留言。未设置时会回退到通用文案。 |

## 歌单数据结构

```typescript theme={null}
interface Playlist {
  id: string;
  name: string;
  description?: string;
  coverUrl?: string;
  songs: Song[];
}
```

## 添加和编辑歌曲

要添加歌曲或新建歌单，请直接编辑 `lib/music-config.ts`。详情见 [配置音乐](/zh/customization/music-config) 的分步指南。

<Note>
  电台页面并不真正播放音频。它是一个视觉化的音乐体验 — 歌曲会被展示和动画化，但不会通过浏览器的音频 API 实际播放。如需真正的音频播放，可以将 `coverUrl` 或单独的 `audioUrl` 字段接入到 HTML `<audio>` 元素。
</Note>