Screen Reader (Read-Aloud Canvas Helper)

An agent skill that builds read-aloud into any Sprout canvas — narration with real word-by-word highlighting synced to the browser's speech engine, not guessed timers. Each spoken word lights up as it's read, so early and emerging readers can follow along. Includes an honest fallback when a voice can't report word boundaries, and optional 'unskippable narration' gating for lessons.

Adopt
Screen Reader (Read-Aloud Canvas Helper)

Authoring helper for building Sprout canvases with read-aloud narration and word highlighting synced to browser speech boundary events.

How it works

  1. 1Gather inputsConfirm the canvas goal and the exact narration text to read aloud and highlight.
  2. 2Wire boundary-synced highlightingTokenize the text into word spans carrying data-start/data-end character offsets; on SpeechSynthesisUtterance.onboundary, read event.charIndex and mark the span whose range contains it; clear the active word on onend/onerror.
  3. 3Handle the no-boundary fallbackIf the selected voice emits no boundary events, surface that limitation or use a conservative fallback — never present a timer guess as exact word sync.
  4. 4Respect gating + canvas constraintsWhen narration must be unskippable, disable Next/Replay/Play while speaking and unlock only in the onend/onerror path. Keep sandbox limits (no external scripts, fetch, or localStorage); the reader helper itself never calls completion — exactly one final sprout.score/complete/timed lives in the activity.

Instructions

  1. When building or updating a Sprout canvas that reads text aloud, use this procedure.
  2. ​
  3. Use browser SpeechSynthesisUtterance.onboundary with charIndex to highlight the actual word being spoken. Do not rely on guessed timers for word highlighting unless the selected browser voice does not emit boundary events.
  4. ​
  5. Implementation pattern:
  6. 1. Tokenize the sentence with a regex that records each word's start and end character offsets.
  7. 2. Render each word as a span with data-start and data-end attributes.
  8. 3. On SpeechSynthesisUtterance.onboundary, read event.charIndex and mark the span whose character range contains that index.
  9. 4. Clear the active word on onend or onerror.
  10. 5. If no boundary events arrive, surface that limitation or use a conservative fallback; do not present the fallback as exact sync.
  11. ​
  12. For lesson screens, make narration unskippable when requested: disable Next, Replay, and Play while narration is speaking, then unlock them only in the onend/onerror completion path. Replay should lock the page again until the replay narration completes.
  13. ​
  14. Keep Sprout canvas constraints in mind: no external scripts, no fetch, no localStorage, and exactly one final sprout.score, sprout.complete, or sprout.timed completion call at the end of the activity. The reader helper itself must not call completion.

Inputs

  • Canvas goalcanvas_goalWhat the canvas is trying to teach or do.
  • Narration textnarration_textThe sentence or lesson text to read aloud and highlight.