Screen reader
Read text aloud word-by-word with synced highlighting, for kid-facing canvases with narrated passages.
| Status | Pairs with | Nouns |
|---|---|---|
| In prod | Interactive canvas Conversational task | Canvas, Skill |
What it does
An authoring helper for building Sprout canvases with read-aloud narration synced to browser speech boundary events. Renders each word as a span; SpeechSynthesisUtterance.onboundary drives the active-word highlight using the real charIndex, not guessed timers.
This is the actual skill the Sprout team uses in-production. The prompt and input variables below are the verbatim body shipped on the platform.
How to use it
Invoke this skill before authoring (or updating) any canvas that reads text aloud. Your agent receives the implementation pattern and the canvas constraints, then calls canvas.create or canvas.update with narration wired up correctly. Pass canvas_goal and narration_text.
The spec
This is the raw .md content. Download as file or copy below.
name: Screen reader
slug: screen-reader
description: Authoring helper for building Sprout canvases with read-aloud narration and word highlighting synced to browser speech boundary events.
category: home_agent
trustTier: experimental
kidCallable: false
status: published
pairs_with_patterns:
- canvas
- journal
pairs_with_nouns:
- Canvas
- Skill
handsReferenced:
- canvas_create
- canvas_update
inputVariables:
- name: canvas_goal
display_name: Canvas goal
description: What the canvas is trying to teach or do.
json_schema: { type: string }
- name: narration_text
display_name: Narration text
description: The sentence or lesson text to read aloud and highlight.
json_schema: { type: string }
# Skill prompt
When building or updating a Sprout canvas that reads text aloud, use this procedure.
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.
Implementation pattern:
1. Tokenize the sentence with a regex that records each word's start and end character offsets.
2. Render each word as a span with data-start and data-end attributes.
3. On SpeechSynthesisUtterance.onboundary, read event.charIndex and mark the span whose character range contains that index.
4. Clear the active word on onend or onerror.
5. If no boundary events arrive, surface that limitation or use a conservative fallback; do not present the fallback as exact sync.
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.
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.
Related
Interactive canvas Conversational task