Waveform region editorPro

Select a stretch of a song and regenerate only that part from a prompt, then compare the new take in place and keep or discard it.

Markdown

On this page

ProSelect two bars and ask for a drum fill: only that stretch changes. Compare it in place, then keep or discard.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/waveform-region-editor

Usage

tsx

import { WaveformRegionEditor } from "@/components/ui/chatcn/pro/waveform-region-editor"

<WaveformRegionEditor
  peaks={peaks}
  duration={duration}
  source={song}
  status={status}
  result={result}
  onRegenerate={({ region, prompt }) => inpaint(region, prompt)}
  onAccept={keep}
  onDiscard={discard}
/>

Drag across the waveform to choose a stretch, drag its body to move it, or its handles to resize it. With a result, the new take plays inside the seams of the original: Original and New compare in place, and Play region plays it with a second either side.

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

ProNo region yet, regenerating, a new region to compare and failed.

Props

Prop	Type	Notes
`peaks`, `duration`, `source`		The song
`region`, `defaultRegion`, `onRegionChange`	`WaveRegion \| null`	Seconds
`minLength`	`number`	Default 1
`onRegenerate`, `onStop`, `status`		Idle, generating, ready or error
`result`	`RegionResult`	The new take of the region
`onAccept`, `onDiscard`, `error`
`labels`	`Partial<RegionEditorLabels>`	Every string the editor shows or announces, for translation

Keyboard

Key	Action
Select a stretch	Adds a region and focuses its start handle
`←` `→` on a handle	Move it by 0.1 s, 1 s with `Shift`
`Enter` in the prompt	Regenerate the region

Accessibility

The handles are sliders named Region start and Region end, valued in time.
The region is described in words and regenerating is announced.

Motion

Handles follow the pointer at once. The new take fades in over 200 ms with its seams drawn.