Read alongPro
A message read aloud with each word lit as it is spoken. The highlight follows the playhead through pauses, seeks and speed changes.
On this page
Installation
Usage
import { ReadAlong } from "@/components/ui/chatcn/pro/read-along"
<ReadAlong words={wordTimings} src={speechUrl} />
// Or, without word marks:
<ReadAlong text={text} duration={21} src={speechUrl} />One highlight sits behind the text, clipped to the word being spoken. It glides to the next word along a line and jumps when the line wraps or you seek, so it never sweeps diagonally across the paragraph. Words ahead of the voice are a step quieter and settle to ink once spoken. Everything is derived from the playhead, so pausing, seeking, changing speed or clicking a word to start there all keep it in step. The track's arrow keys move word by word. Pass word marks from your speech service, or let timeWords spread duration over the words by length with pauses at punctuation. controls={false} shows the text only, for a clock shared with another player.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
words | TimedWord[] | { text, start, end } in seconds |
text, duration | string, number | Even timings when there are no word marks |
src, audio | string, MessageAudio | A file, or a shared clock |
status | "preparing" | "ready" | "error" | Default ready |
controls | boolean | The player bar. Default true |
onRetry | () => void | |
labels | { play?, pause?, preparing?, failed?, retry?, rate? } | For translation |
Keyboard
| Key | Action |
|---|---|
| Space or Enter on play | Read aloud or pause |
| Left and Right on the track | Previous and next word |
| Home and End | Start and end |
Accessibility
- The track is a slider whose value text includes the word being read.
- The text stays plain text for screen readers; the highlight is decorative.
Motion
The highlight moves by clip-path in 150 ms only between neighbouring words on one line while playing; every other move is instant. Reduced motion makes every move instant.