Word sync captionsPro
Word level highlight synced to audio time, as read aloud paragraphs, two line captions or karaoke.
On this page
ProRead aloud, captions and karaoke over the same timed narration. Click a word to seek.
Installation
Usage
import { WordSyncCaptions } from "@/components/ui/chatcn/pro/word-sync-captions"
<WordSyncCaptions words={timings} time={audio.currentTime} onSeek={seek} />words is the shape speech APIs return: text with start and end seconds. Drive time from the audio element's timeupdate or an animation frame. Spoken words take the text color, the current word gets a quiet fill, upcoming words wait one gray step down, all readable. Nothing changes weight or size, so lines never reflow as speech moves.
Examples
States
ProBefore the first word, each variant mid sentence, and finished.
Props
| Prop | Type | Notes |
|---|---|---|
words | SyncWord[] | { text, start, end }, seconds |
time | number | Current playback time in seconds |
variant | "paragraph" | "captions" | "karaoke" | Default paragraph |
onSeek | (time) => void | Click a word to seek |
maxChars | number | Line length for captions and karaoke. Default 36 |
Accessibility
- A named region with the full text in reading order. It is not a live region: the audio carries the timing.
- Words are not tab stops; clicking one is a pointer shortcut and keyboard users seek with the player.
Motion
The current word's fill moves with a 100 ms color transition. Captions page two lines at a time with a short enter, so the eye is not chasing a scroll. Karaoke draws an accent fill under the word being sung, growing with it. Reduced motion keeps the color changes and drops the enter.