> ## 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.

# Music radio — curated birthday playlists

> Browse playlists at /radio, pick a song, and watch the animated player show song details and a visualizer while lyrics float across the background.

The radio page at `/radio` is a dedicated music space built from the playlists you define in `lib/music-config.ts`. Visitors browse playlists, select songs, and enjoy a visual player complete with a spinning album art animation, a five-bar audio visualizer, and floating lyric snippets drifting across the background.

## Browsing playlists

The landing view shows a card grid — one card per playlist. Each card displays:

* The playlist name and description
* A song count
* A preview of the first three song titles

Click any playlist card to open it and see the full track list.

<Tip>
  The icon shown on each playlist card is derived from the playlist `id`. Playlists with id `birthday-vibes` get a cake icon, `favorite-songs` gets a heart, and all others get a piano icon. Give your playlists meaningful IDs to get the right icon automatically.
</Tip>

## The player

When you click a song, the player banner appears at the top of the page. It shows:

* A spinning gradient tile (the album art placeholder) with a five-bar visualizer animation in the corner when playing
* The song **title** and **artist**
* The **album** name, if one is configured
* A play/pause toggle button

The currently active song is highlighted in the track list with a pink accent.

## Floating lyrics

If a song has `lyrics` configured, individual lyric lines float up from the background while the player is active. This uses the same CSS `float-up` keyframe animation as the home page countdown screen.

## Song data structure

Songs are defined in `lib/music-config.ts`. Every song must have at minimum a `title` and `artist`. All other fields are optional.

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

| Field           | Description                                                                                     |
| --------------- | ----------------------------------------------------------------------------------------------- |
| `title`         | Song name shown in the track list and player.                                                   |
| `artist`        | Artist name shown below the title.                                                              |
| `album`         | Album name shown in the player when present.                                                    |
| `duration`      | Display string (e.g. `"4:12"`) shown at the right of each track row.                            |
| `coverUrl`      | URL to the album art image. Currently reserved for future use.                                  |
| `lyrics`        | Newline-separated lyric lines. Used for floating lyrics on the radio and report pages.          |
| `backgroundUrl` | Full-bleed background image URL used in the music report song sections.                         |
| `description`   | A personal note shown on the song card in the report. Falls back to a generic message if unset. |

## Playlist data structure

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

## Adding and editing songs

To add songs or create new playlists, edit `lib/music-config.ts` directly. See [Configuring music](/customization/music-config) for a step-by-step guide.

<Note>
  The radio page does not stream audio. It is a visual music experience — songs are displayed and animated but not played back through the browser's audio API. Real audio playback can be added by wiring `coverUrl` or a separate `audioUrl` field to an HTML `<audio>` element.
</Note>