Song cardPro
A generated song as a row or a tile: cover with play, title and style, waveform with the position, A and B takes, and extend, remix and download for the take you hear.
On this page
ProA row and a tile: play in place on the cover, switch between A and B, extend or remix the take you hear.
Installation
Usage
import { SongCard } from "@/components/ui/chatcn/pro/song-card"
<SongCard title="Harbor lights" tags={["Lo-fi hip hop", "92 bpm"]} cover={cover} takes={takes} onExtend={extend} onRemix={remix} onDownload={download} />A take is { id, label, duration, peaks, source }. Actions receive the take you are hearing. status covers composing (with progress) and failed with a retry. Starting a song stops any other one on the page.
The examples play a demo synthesizer built on the Web Audio API (renderStem and renderSong in @/lib/chatcn-pro-music): drums, bass, keys and a sung line in a key and tempo, rendered offline. Pass your own audio as URLs or buffers instead.
Examples
States
ProComposing with progress, failed, a long title and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
title, tags, cover, coverAlt | ||
takes, take, defaultTake, onTakeChange | SongTake[] | |
status, progress, error, onRetry | Ready, generating or error | |
onExtend, onRemix, onDownload | (takeId) => void | Each shows its action |
layout | "row" | "tile" | Default row |
labels | Partial<SongCardLabels> | Every string the card shows or announces, for translation |
Keyboard
| Key | Action |
|---|---|
Tab | Play, takes, then the actions |
← → on the takes | Switch take |
Accessibility
- Play is named with the song: "Play Harbor lights". Takes are a radio group named with their length.
- A composing card is
aria-busy; a failure is an alert that says nothing was charged.
Motion
- The cover's play button fades in over 150 ms on hover or focus and is always shown on touch. The waveform fills with the position.