Events & Callbacks Example

A focused teacher for the speech lifecycle — speak one utterance and watch every public event and per-call callback fire in real time.

Why a separate example

There are two parallel ways to observe speech: responsiveVoice.addEventListener(name, fn) (process-wide, persists across calls) and inline onstart / onend / onerror / onboundary callbacks passed to speak() (bound to a single utterance). Most confusion in the wild stems from mixing them up. This example surfaces both at the same visual level — a row of per-call pills bound to one utterance, and a row of global pills that fire across the lifetime of the page — so the distinction is concrete instead of conceptual.

What you'll see

Two rows of pills. The top row (four pills: onstart, onboundary, onend, onerror) are the per-call callbacks you pass to speak(). The bottom row (nine pills: OnReady, OnVoiceResolved, OnStart, OnPartStart, OnPartEnd, OnPause, OnResume, OnEnd, OnError) are the global events you register with addEventListener().
The default text triggers chunking. The text box starts with a multi-sentence sample long enough that the engine splits it into several parts. Click Speak and you'll see OnPartStart show part X of N and OnPartEnd count up as each chunk finishes.
Pills reset on every Speak click, except OnReady — that one fires once when the page loads and stays green for the rest of the session.
The full event log sits below the pills. Once you recognize a pill, you can scroll the log to see the actual data each event carries.
onboundary only fires for browser-native voices. When a voice plays through the HTTP fallback (server-side audio), the boundary callback stays quiet and its counter doesn't move.
OnPause has a ~60-second browser limit. If you click Pause and don't click Resume within about a minute, the browser cancels the speech automatically and you'll see OnEnd fire instead of OnResume.

Next Steps

Events Guide — full event reference and async/await patterns
Basic Example — minimal OnReady + speak() flow without the inspection scaffolding