Hey everyone,
Adding accessibility features or “read aloud” modes usually means integrated third-party APIs and managing API keys. But you can actually make the browser talk using the native Web Speech API.
It’s surprisingly simple to implement and gives you control over the voice, pitch, and speed.
The Code: speechSynthesis.speak()
You just need to create an “Utterance” object and tell the browser to speak it.
javascript
const message = new SpeechSynthesisUtterance("Hello! I am speaking natively from your browser.");
// Optional: Customize the voice
message.rate = 1; // Speed (0.1 to 10)
message.pitch = 1.2; // Pitch (0 to 2)
message.volume = 1; // Volume (0 to 1)
window.speechSynthesis.speak(message);Why this is a win:
- Zero Latency: Since it’s local to the device, there is no “round-trip” to a server. The speech starts instantly.
- Privacy-Friendly: The text never leaves the user’s machine to be processed by a third party.
- Accessibility: It’s a great way to provide audio feedback for complex data or to help users with visual impairments navigate your UI.
One small catch:
Browsers generally block audio from playing automatically to prevent annoying ads. You’ll need to trigger the speak() function inside a user gesture, like a button click.
Happy coding!
Marko