Sound effect generatorPro

Prompt, length and four variations as a playable grid: play in place, pick one, download, with a pending state that holds the grid and failures per tile.

Markdown

On this page

ProDescribe a sound, pick a length, get four variations to play, pick and download.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/sfx-generator

Usage

tsx

import { SfxGenerator } from "@/components/ui/chatcn/pro/sfx-generator"

<SfxGenerator
  variations={variations}
  status={status}
  onGenerate={({ prompt, duration }) => generate(prompt, duration)}
  onDownload={download}
/>

A variation is { id, duration, peaks, source, status }. While status is generating the grid holds four placeholder tiles, so the page does not jump when the sounds land. A tile with status: "error" retries itself through onRetry(id).

The examples play a demo synthesizer built on the Web Audio API (renderBabble and renderSfx in @/lib/chatcn-pro-speech): it sounds like a voice behind a wall, so nothing pretends to be a real model. Pass your API's audio as URLs or buffers instead.

Examples

States

ProBefore the first run, generating, a failed run, and one variation that did not render.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`	`string`	The prompt
`duration`, `defaultDuration`, `onDurationChange`	`"auto" \| number`
`durations`	`SfxDuration[]`	Default Auto, 2, 5 and 10 s
`variations`	`SfxVariation[]`
`status`, `onGenerate`, `onStop`		Generating turns Generate into Stop
`error`, `onRetry`		The whole run, or one tile by id
`picked`, `defaultPicked`, `onPickedChange`	`string`
`onDownload`, `suggestions`, `count`
`labels`	`Partial<SfxGeneratorLabels>`	Every string the generator shows or announces, for translation

Keyboard

Key	Action
`Enter`	Generate. Never while composing with an IME
`Esc`	Stop generating
`Tab`	Each tile's play, pick and download

Accessibility

Tiles are list items named with their number, length and whether they are in use.
The grid is aria-busy while generating; the count of new sounds is announced when they land.

Motion

Nothing for 300 ms, then the text shimmer. Waveforms fade in over 200 ms; a playing tile fills its waveform with the progress.