Wrap your text. Hear it read. Watch every word light up.
One React component reads your text aloud and lights each word as it is said.
Click any prose on this page to hear it
import { Player, SpokenText, SpokenTextProvider } from "spoken-text";
export default function Reader() {
return (
<SpokenTextProvider>
<SpokenText debounceMs={900}>
The tide came in slowly that morning, and the boats leaned over in the mud until the water found them again. By noon the harbour was full, and nobody could remember what the bottom looked like.
</SpokenText>
<Player />
</SpokenTextProvider>
);
}Press play, or click any word to hear the passage from there. Show the code and edit the passage to make it say something else.
React 18 or 19 is the only requirement. The speech, the transcript and the storage are all functions you pass in.
import { SpokenText } from "spoken-text";
<SpokenText>Any text you like.</SpokenText>Hand <SpokenText> your headings and paragraphs instead of a string and it reads the document. Each block is its own request, fetched as it is reached, under one playhead.
Reading a whole document →createAlignmentHandler is a plain (Request) => Response that turns text into audio and word timings. The speech, the transcript and the storage are yours to pass in.
The route →Three CSS variables change the colour. A class per word state replaces the look entirely. renderWord takes the word itself over.
Styling the highlight →Read the docs
/docs- Getting started →
Install it, mount the route, and hear a passage read back. Five minutes.
- Reading a whole document →
Hand it a page of elements. Blocks, lazy loading, what is left unspoken, and what is said that is not written.
- Styling the highlight →
Classes, data attributes and three CSS variables. Or take word rendering over entirely.
- The route →
One export, the bundled adapters, and how to bring your own speech, transcription and cache.
- Reference →
Every prop, every field on the controller, and everything exported.