跳转到主要内容

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

​
浏览歌单

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

​
播放器

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

​
漂浮歌词

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

​
歌曲数据结构

歌曲在 lib/music-config.ts 中定义。每首歌至少需要 title 和 artist，其他字段都是可选的。 
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显示在报告中歌曲卡片上的一段个人留言。未设置时会回退到通用文案。

​
歌单数据结构

interface Playlist {
  id: string;
  name: string;
  description?: string;
  coverUrl?: string;
  songs: Song[];
}

​
添加和编辑歌曲

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