Why this demo?
To show the text reader works on any site without shared classes or global CSS. The script inserts its own control and uses the Web Speech API.
- Namespaced classes and inline styles avoid collisions.
- No external dependencies; it just works where SpeechSynthesis is available.
- Preferences like language, rate, and pitch are configurable via
window.hwReaderConfig.
Embed it
Copy text-reader.js to your project and include it with defer near the end of body.
<script src="/js/text-reader.js" defer></script>Optional config
Set language and voice options before loading:
<script>
window.hwReaderConfig = { lang: 'en-US', rate: 1, pitch: 1 };
</script>
<script src="/js/text-reader.js" defer></script>API hooks
After load, control it programmatically:
hwReader.speak('text')hwReader.cancel()
Cloud TTS (optional)
Use your own TTS service (e.g., cloud or GPU-backed) and fall back to browser speech if unavailable.
<script>
window.hwReaderConfig = {
lang: 'en-US',
ttsEndpoint: 'https://your-tts-endpoint',
ttsApiKey: 'YOUR_KEY',
ttsVoice: 'en-US'
};
</script>
<script src="/js/text-reader.js" defer></script>If the endpoint/key is not set or fails, the script automatically uses the browser’s SpeechSynthesis.
Try it now
Highlight any of this text and click “Listen” when the button appears at the bottom.