Skip to main content

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.

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

​
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. 
interface Song {
  title: string;
  artist: string;
  album?: string;
  duration?: string;
  coverUrl?: string;
  lyrics?: string;
  backgroundUrl?: string;
  description?: string;
}
FieldDescription
titleSong name shown in the track list and player.
artistArtist name shown below the title.
albumAlbum name shown in the player when present.
durationDisplay string (e.g. "4:12") shown at the right of each track row.
coverUrlURL to the album art image. Currently reserved for future use.
lyricsNewline-separated lyric lines. Used for floating lyrics on the radio and report pages.
backgroundUrlFull-bleed background image URL used in the music report song sections.
descriptionA personal note shown on the song card in the report. Falls back to a generic message if unset.

​
Playlist data structure

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 for a step-by-step guide.
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.