Speech-aware caption animation
Captions that fill inside each spoken word.
A small TypeScript library for the Web Speech API: as the browser speaks, the active word fills continuously from left to right inside its letters.
npm install @enumura/glyphflowLive speech example
Press Speak. Keep your eyes on the caption.
The caption is the demo: one spoken word at a time fills inside its glyphs. The timing record stays below after playback.
Checking browser speech support…
The visual
One word stays whole while its colour moves through the glyphs.
The active word is a single DOM span. GlyphFlow changes only --kn-progress, so the highlight travels through letter shapes instead of flashing an entire word at once.
The voice is the clock
The browser's word starts are what move the caption forward.
When the browser reports that a word has started, only that word begins its inside-letter wipe. When it reports the following word, GlyphFlow completes the prior word. The caption changes on the voice's actual timing.
The voice begins “Every”
“letter” begins; Every completes
“follows” begins; letter completes
Each next-word start completes the prior word and begins the inside-letter wipe for the current one.
Tune the next wipe
Later wipes gently adapt to the voice's pace.
A word's exact end time is unknown when it starts. GlyphFlow moves the inside-letter wipe at an approximate pace until the next word begins. That next-word start reveals how long the prior word took, so later wipes can adjust a little to the voice's pace.
Start the inside-letter wipe at an approximate pace.
The prior word's actual duration is now known
Use a small part of that result when starting the next wipe.
This is not character-by-character pronunciation timing. It works with voices that report word starts to the browser.