Hyperweb Text Reader (portable)

A drop-in script that lets users select text on a page and click “Listen” to have it read aloud using the Web Speech API (SpeechSynthesis). Self-contained: injects its own button and styles, no external CSS or dependencies.

Live Demo Here: Live demo here: https://www.hyperwebmedia.com/text-reader/demo.html

This is a widget I have been working on at https://www.hyperwebmedia.com for some time, and deploying on client websites. I have finally refined it enough to give away to the public. I enjoy creating solutions that actually help people and I hope you find this helpful.

More information about ADA/WCAG Compliant Websites can be found here:

https://www.hyperwebmedia.com/ada-compliance

https://www.hyperwebmedia.com/resources/ada-checklist-website

Files

• text-reader.js — portable script, no build step.
• demo.html — simple demo page showing the script in action.
• demo.css — minimal styling for the demo page.

Quick start

1. Copy text-reader.js to your site (e.g., /js/text-reader.js).
2. Include it near the end of body (or with defer):

   <script src="/js/text-reader.js" defer></script>

3. (Optional) Configure voice/rate/pitch before loading:

   <script>
     window.hwReaderConfig = {
       lang: 'en-US',
       rate: 1,
       pitch: 1,
       // Optional: Cloud TTS (if provided, used first; otherwise falls back to browser speech)
       ttsEndpoint: '',       // e.g., https://your-tts-endpoint
       ttsApiKey: '',         // bearer token / API key
       ttsVoice: 'en-US'      // optional voice id/name for your TTS service
     };
   </script>
   <script src="/js/text-reader.js" defer></script>

Browser support

• Requires the Web Speech API’s SpeechSynthesis (modern browsers). If unavailable, the button will not appear.

Behavior

• Shows a “Listen” pill when non-empty text is selected.
• Cancels any current speech before speaking a new selection.
• Positions the control bottom-right on desktop; adjusts to bottom-left on small screens.
• If ttsEndpoint and ttsApiKey are set, it will call your cloud TTS; otherwise it uses the browser’s SpeechSynthesis.

Accessibility

• Button uses aria-label="Listen to selected text".
• Ignores empty/short selections.
• Falls back silently when SpeechSynthesis is not supported.

Public API

The script exports nothing by default; it auto-initializes on load. If you want to control it manually, you can:

• Call window.hwReader?.speak('text') to trigger speech.
• Call window.hwReader?.cancel() to stop current speech.