Audio overviewPro

A two host audio overview of a set of sources: captions that follow the speaker, a scrubber drawn from the turns, speeds, a transcript, and Ask a question to cut in and hear an answer before it resumes.

Markdown

On this page

ProTwo hosts talk through five sources. Ask a question to cut in: they answer in their own voices and pick up where they left off.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/audio-overview

Usage

tsx

import { AudioOverview } from "@/components/ui/chatcn/pro/audio-overview"

<AudioOverview
  hosts={hosts}
  sources={sources}
  turns={turns}
  onAsk={(question, at) => api.askHosts(question, at)}
/>

Turns are { id, speaker, text, start, end } in seconds. Ask a question pauses the hosts and opens a composer; onAsk resolves with the answer as turns timed from zero, which play in the hosts' voices before the overview picks up where it stopped. stage drives the generating steps.

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

ProNo sources, generating and failed.

Props

Prop	Type	Notes
`hosts`	`OverviewHost[]`	Required. Two read best
`sources`	`OverviewSource[]`	Shown as chips, three then a count
`turns`	`OverviewTurn[]`
`status`	`"empty" \| "generating" \| "ready" \| "error"`	Default ready
`stage`	`number`	0 to 2 while generating
`onGenerate`, `error`		Generate, regenerate and retry
`onAsk`	`(question, at) => Promise<OverviewTurn[]>`	Turns on the interrupt
`synthesize`	`boolean`	Speak turns with the demo voice. Default true
`rates`, `title`, `disabled`, `locale`
`labels`	`Partial<AudioOverviewLabels>`	Every string the overview shows or announces, for translation

Keyboard

Key	Action
`Space` on Play	Play or pause
`←` `→` on the scrubber	Seek by a second
`Enter` in the question	Ask the hosts

Accessibility

The caption names the speaker in text; the scrubber speaks its position in words.
Transcript turns are buttons that seek to that moment. The answer to a question is announced.

Motion

The caption swaps with a 150 ms blur crossfade when the speaker changes, never per word. The speaking host's level follows its audio.
Generating stages tick at once and the current one shimmers after 300 ms. Reduced motion keeps fades and holds the level still.