Introduction
The Web Speech API's SpeechSynthesis interface is available in all modern browsers. Create an utterance, configure rate (0.5-2.0), pitch (0-2), and volume (0-1), then call speechSynthesis.speak(). Voices are platform-dependent: Chrome uses Microsoft/Google voices, Safari uses macOS neural voices, and Firefox uses system voices. Test across browsers because the same utterance sounds different on each platform.
Web Speech API Fundamentals
The Web Speech API's SpeechSynthesis interface is available in all modern browsers. Create an utterance, configure rate (0.5-2.0), pitch (0-2), and volume (0-1), then call speechSynthesis.speak(). Voices are platform-dependent: Chrome uses Microsoft/Google voices, Safari uses macOS neural voices, and Firefox uses system voices. Test across browsers because the same utterance sounds different on each platform.
SSML for Fine-Grained Control
SSML (Speech Synthesis Markup Language) allows prosodic control:
ARIA and Screen Reader Considerations
For accessibility features built with TTS, use aria-live="polite" for non-critical announcements and aria-live="assertive" for urgent messages (like errors or timer warnings). Test with actual screen readers (NVDA, JAWS, VoiceOver) because their TTS engines differ from browser SpeechSynthesis. Our tool helps you preview the spoken form of UI copy before deployment.
Frequently Asked Questions
What browsers support the Web Speech API for TTS?
All major browsers — Chrome, Firefox, Safari, and Edge — support the Web Speech API's SpeechSynthesis interface. However, voice quality, available voices, and behavior differ significantly. Chrome integrates with Microsoft/Google voices, Safari uses macOS neural voices, and Firefox relies on system voices. Always test your TTS implementation across multiple browsers to ensure consistent quality.
Can I use TTS for commercial applications without licensing fees?
Yes. The Web Speech API is built into browsers and is royalty-free. However, platform-specific voices may have their own licensing terms. For high-volume commercial applications, consider dedicated TTS services like Google Cloud Text-to-Speech, Amazon Polly, or Azure Speech, which offer higher-quality neural voices and SSML support but charge per character.
How do I make TTS stop speaking when a user navigates away?
Call window.speechSynthesis.cancel() in the page's beforeunload event handler or in a cleanup function (for framework users, this goes in useEffect return or componentWillUnmount). Without this, speech continues even after navigation, which creates a poor user experience and can cause overlapping speech if the user returns to the page quickly.
What is the difference between speechSynthesis.speak() and speechSynthesis.cancel()?
speak() adds an utterance to the speech queue and begins playing it. cancel() immediately stops all current and queued speech. There is also pause() and resume() for mid-utterance control. Note that calling speak() while speech is already active queues the new utterance, so you may need to cancel() first if you want to interrupt ongoing speech.
Does TTS work offline or does it require an internet connection?
Browser-based TTS using the Web Speech API works entirely offline. The voices are part of the operating system or browser installation, so no network requests are made. This makes TTS suitable for offline applications, PWAs, and environments with unreliable connectivity. Cloud-based TTS services, by contrast, require an internet connection for each request.
How do I handle long text with TTS without freezing the browser?
Break long text into sentences or paragraphs and queue them sequentially using the onend event. For very long documents, consider chunking text into segments of 200-500 characters and adding small pauses between them using setTimeout. This prevents the browser from blocking the main thread and gives users time to follow along visually.
Can I customize the voice, rate, pitch, and volume for individual utterances?
Yes. The SpeechSynthesisUtterance object has four properties for fine-tuning: rate (0.5 to 2.0, with 1.0 being normal speed), pitch (0 to 2, with 1.0 being normal pitch), volume (0 to 1), and voice (which selects from the available speechSynthesis.getVoices() list). These can be set per utterance, allowing different sections of content to use different voices or speeds.
How do I select a specific voice from the available options?
First, call window.speechSynthesis.getVoices() to retrieve the array of available voices. On Chrome, voices may not be available until the page loads, so you might need to wait for the voiceschanged event. Then set utterance.voice to the desired voice object. Filter by voice.lang for language-specific selection, or by voice.name for a specific speaker like "Microsoft David" or "Google US English".
What is SSML and why should I use it?
SSML (Speech Synthesis Markup Language) is an XML-based markup language that gives you fine-grained control over how text is spoken. With SSML you can add pauses with
Is there a way to detect when TTS finishes speaking?
Yes. The SpeechSynthesisUtterance object fires several events: onstart when speech begins, onend when speech completes, onpause and onresume for mid-speech control, and onerror when something goes wrong. The onend event is particularly useful for queuing the next chunk of text, updating UI state, or triggering follow-up actions after speech completes.
How do I make TTS announcements accessible to screen reader users?
Use aria-live regions to announce dynamic content changes. For non-critical announcements, use aria-live="polite" which waits for the current screen reader utterance to finish. For urgent messages like errors or warnings, use aria-live="assertive" which interrupts the current announcement. Always test with actual screen readers like NVDA or JAWS, as their behavior differs from browser SpeechSynthesis.
What are common accessibility pitfalls when implementing TTS?
Common pitfalls include: not providing a visual alternative for speech-only interactions, failing to pause speech when the user starts typing, not respecting the user's system preferences for reduced motion or accessibility settings, playing speech automatically without user consent, and not testing with actual assistive technology users. Always provide a visible play/pause/stop control for TTS.
Conclusion
Text-to-speech is a powerful tool for improving web accessibility, but implementing it correctly requires attention to browser compatibility, user experience, and assistive technology integration. The Web Speech API provides a solid foundation for adding TTS to web applications, and SSML gives you the control needed for natural-sounding speech. By following accessibility best practices — using aria-live regions appropriately, testing with real screen readers, handling edge cases like long text and offline scenarios, and always providing user controls — you can build TTS features that genuinely improve your application's usability for people with visual impairments, reading difficulties, or situational disabilities. Remember that TTS is an enhancement, not a replacement for accessible design. Pair it with proper semantic HTML, keyboard navigation, and contrast-ratio compliance for a truly inclusive experience.
Frequently asked questions
What browsers support the Web Speech API for TTS?
All major browsers — Chrome, Firefox, Safari, and Edge — support the Web Speech API's SpeechSynthesis interface. However, voice quality, available voices, and behavior differ significantly. Chrome integrates with Microsoft/Google voices, Safari uses macOS neural voices, and Firefox relies on system voices. Always test your TTS implementation across multiple browsers to ensure consistent quality.
Can I use TTS for commercial applications without licensing fees?
Yes. The Web Speech API is built into browsers and is royalty-free. However, platform-specific voices may have their own licensing terms. For high-volume commercial applications, consider dedicated TTS services like Google Cloud Text-to-Speech, Amazon Polly, or Azure Speech, which offer higher-quality neural voices and SSML support but charge per character.
How do I make TTS stop speaking when a user navigates away?
Call window.speechSynthesis.cancel() in the page's beforeunload event handler or in a cleanup function (for framework users, this goes in useEffect return or componentWillUnmount). Without this, speech continues even after navigation, which creates a poor user experience and can cause overlapping speech if the user returns to the page quickly.
What is the difference between speechSynthesis.speak() and speechSynthesis.cancel()?
speak() adds an utterance to the speech queue and begins playing it. cancel() immediately stops all current and queued speech. There is also pause() and resume() for mid-utterance control. Note that calling speak() while speech is already active queues the new utterance, so you may need to cancel() first if you want to interrupt ongoing speech.
Does TTS work offline or does it require an internet connection?
Browser-based TTS using the Web Speech API works entirely offline. The voices are part of the operating system or browser installation, so no network requests are made. This makes TTS suitable for offline applications, PWAs, and environments with unreliable connectivity. Cloud-based TTS services, by contrast, require an internet connection for each request.
How do I handle long text with TTS without freezing the browser?
Break long text into sentences or paragraphs and queue them sequentially using the onend event. For very long documents, consider chunking text into segments of 200-500 characters and adding small pauses between them using setTimeout. This prevents the browser from blocking the main thread and gives users time to follow along visually.
Can I customize the voice, rate, pitch, and volume for individual utterances?
Yes. The SpeechSynthesisUtterance object has four properties for fine-tuning: rate (0.5 to 2.0, with 1.0 being normal speed), pitch (0 to 2, with 1.0 being normal pitch), volume (0 to 1), and voice (which selects from the available speechSynthesis.getVoices() list). These can be set per utterance, allowing different sections of content to use different voices or speeds.
How do I select a specific voice from the available options?
First, call window.speechSynthesis.getVoices() to retrieve the array of available voices. On Chrome, voices may not be available until the page loads, so you might need to wait for the voiceschanged event. Then set utterance.voice to the desired voice object. Filter by voice.lang for language-specific selection, or by voice.name for a specific speaker like "Microsoft David" or "Google US English".
What is SSML and why should I use it?
SSML (Speech Synthesis Markup Language) is an XML-based markup language that gives you fine-grained control over how text is spoken. With SSML you can add pauses with , emphasis with , control pronunciation with , and adjust speaking rate mid-sentence with . It is essential for reading numbers as dates, spelling acronyms correctly, and controlling the rhythm of complex sentences.
Is there a way to detect when TTS finishes speaking?
Yes. The SpeechSynthesisUtterance object fires several events: onstart when speech begins, onend when speech completes, onpause and onresume for mid-speech control, and onerror when something goes wrong. The onend event is particularly useful for queuing the next chunk of text, updating UI state, or triggering follow-up actions after speech completes.
How do I make TTS announcements accessible to screen reader users?
Use aria-live regions to announce dynamic content changes. For non-critical announcements, use aria-live="polite" which waits for the current screen reader utterance to finish. For urgent messages like errors or warnings, use aria-live="assertive" which interrupts the current announcement. Always test with actual screen readers like NVDA or JAWS, as their behavior differs from browser SpeechSynthesis.
What are common accessibility pitfalls when implementing TTS?
Common pitfalls include: not providing a visual alternative for speech-only interactions, failing to pause speech when the user starts typing, not respecting the user's system preferences for reduced motion or accessibility settings, playing speech automatically without user consent, and not testing with actual assistive technology users. Always provide a visible play/pause/stop control for TTS.