Text-to-Speech Button — Free Web Speech API Read-Aloud Snippet

Every major browser ships a working text-to-speech engine for free, through the Web Speech API's speechSynthesis interface — no server round-trip, no paid API key, no audio file to generate. This snippet wires up a "Read aloud" button that speaks a paragraph using window.speechSynthesis and SpeechSynthesisUtterance, with real play/pause/stop states and a pulsing icon and live word highlight synced to the browser's own speech-boundary events, not a fake timer.

The actual API surface

speechSynthesis.speak(utterance) queues an utterance for the browser's speech engine; speechSynthesis.pause() and .resume() suspend and continue it mid-sentence (support for true pause/resume varies slightly by browser and voice, but is solid in current Chrome, Edge, and Safari); speechSynthesis.cancel() stops everything immediately. The utterance object itself fires onstart, onend, onerror, and — most usefully for a rich UI — onboundary, which the browser calls as it crosses each word or sentence boundary while speaking, carrying a charIndex and charLength into the original text.

Real-time word highlighting from onboundary

Rather than faking a highlight with a fixed-interval timer (which drifts out of sync with actual speech rate almost immediately), this snippet listens to utterance.onboundary and uses the event's charIndex/charLength to slice the exact word currently being spoken out of the original paragraph, wrapping it in a <span class="tts-word"> with a highlight background. Because the event fires from the browser's own speech engine, the highlight tracks the actual audio, not an approximation — the same technique used by karaoke-style read-along apps.

Honest handling of missing support

Not every browser or embedded webview implements speechSynthesis (some in-app browsers and older environments don't), so the script feature-detects 'speechSynthesis' in window && 'SpeechSynthesisUtterance' in window before wiring anything up, disables the button, and shows a clear inline message rather than silently failing or throwing when clicked. That kind of honest degradation matters more here than in most snippets, because a broken read-aloud button with no explanation is worse for accessibility than no button at all.

Where it fits alongside other accessibility affordances

Pair a read-aloud button with a dyslexia-friendly reading mode toggle and a text size adjuster for a genuinely useful reading-accessibility toolbar — some users benefit from hearing content while others benefit from font and spacing changes, and offering both costs little once you have this pattern in place. It also complements the live region announcer pattern, since the role="status" element here announces state changes ("Speaking…", "Paused", "Finished") to screen reader users the same way.