Accessibility · Text reader

Highlight text and click “Listen.”

A portable text reader that injects its own button and uses the Web Speech API-no dependencies, no extra CSS.

On hyperwebmedia.com we pair it with Google Cloud TTS for richer voices; your copy ships browser-only until you point it at your own endpoint.

Download script View live demo Read the README GitHub repo
No dependencies SpeechSynthesis Namespaced styles

What it does.

Shows a “Listen” button when users highlight text-then reads it aloud using the browser’s speech engine.

  • Self-contained: injects its own control and styles, no conflicts.
  • Configurable language, rate, and pitch via window.hwReaderConfig.
  • API hooks: hwReader.speak() and hwReader.cancel().
  • Graceful fallback: hides itself if SpeechSynthesis isn’t supported.
Copy-paste ready Drop-in 
<script>
  window.hwReaderConfig = { lang: 'en-US', rate: 1, pitch: 1 };
</script>
<script src="/text-reader/text-reader.js" defer></script>

Highlight any text on your page, click “Listen,” and the selected text is spoken aloud.

Cloud voices when you want them.

Default: browser speech. Optional: point it at your TTS endpoint for richer voices; it falls back automatically if the endpoint fails.

  • On hyperwebmedia.com we pair it with Google Cloud TTS for natural voices.
  • Your copy stays browser-only until you add a ttsEndpoint.
  • Keep it portable: no external CSS or extra dependencies.
Optional setup Cloud + fallback
Enable cloud TTS
Set config
ttsEndpoint (and if needed ttsApiKey/ttsVoice) in hwReaderConfig.
Use our proxy
Place your service account JSON at text-reader/service-account.json (or set tts-config.php), then point ttsEndpoint to /text-reader/tts-google.php.
Fallback
If cloud TTS fails, the widget auto-falls back to browser speech. 
<script>
  window.hwReaderConfig = {
    lang: 'en-US',
    ttsEndpoint: 'https://your-tts-endpoint',
    ttsApiKey: 'YOUR_KEY',
    ttsVoice: '' // let the service pick; set a voice e.g. "en-US-Chirp-HD-F"
  };
</script>
<script src="/text-reader/text-reader.js" defer></script>

Leave those fields empty to stay on browser speech only.