Music composerPro
One composer for a song: a description with genre, mood, tempo with tap tempo, key and length chips, an instrumental switch, and lyrics with section tags that autocomplete.
On this page
ProDescribe a song and set genre, mood, tempo with tap tempo, key and length in the line. Compose lands a card with two takes.
Installation
Usage
import { MusicComposer } from "@/components/ui/chatcn/pro/music-composer"
<MusicComposer status={status} onCompose={({ prompt, params }) => compose(prompt, params)} onStop={cancel} />Every parameter is a chip in the line and anything left on its label is the model's choice: bpm and key are null for Auto. Tempo opens a stepper with tap tempo (the median of your last taps). Lyrics open the audio-tags editor with section tags like [Chorus]; Instrumental turns them off.
Examples
States
ProEmpty, with lyrics and section tags, instrumental, composing and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
value, defaultValue, onValueChange | string | The description |
params, defaultParams, onParamsChange | MusicParams | Genre, moods, bpm, key, instrumental, seconds, lyrics |
genres, moods, lengths, maxMoods, tempoRange | The choices offered | |
onCompose, status, onStop | Generating turns Compose into Stop | |
sections | AudioTagInfo[] | Section tags for the lyrics |
labels | Partial<MusicComposerLabels> | Every string the composer shows or announces, for translation |
Keyboard
| Key | Action |
|---|---|
Enter | Compose. Never while composing with an IME |
Shift + Enter | New line |
[ in the lyrics | Open the section tags |
Esc | Stop, or close a chip editor |
Accessibility
- Chips are buttons named with their value: "Tempo: 88 bpm", "Key: A minor".
- Tap tempo announces the tempo it lands on. Instrumental and Lyrics are toggle buttons.
Motion
- Chip menus and editors grow from their chip in 180 ms; a changed value swaps with a 150 ms blur crossfade. The lyrics panel opens at once.