Speech Synthesis API: Browser Support, Voices, Limitations

What is the Speech Synthesis API?

The Speech Synthesis API is the controller half of the Web Speech API, exposed on every page as window.speechSynthesis. It uses the SpeechSynthesisUtterance object to queue text for playback, then reads it aloud through the operating system's installed voices. The Web Speech Community Group at the WICG maintains the specification.

Which browsers does the Speech Synthesis API support?

The Speech Synthesis API works in every modern desktop and mobile browser. Chrome, Edge, Firefox, Safari, Opera, and Samsung Internet all expose window.speechSynthesis, while Internet Explorer, Opera Mobile, and the legacy stock Android Browser never added support.

What are the key features of the Speech Synthesis API?

The Speech Synthesis API gives a small but practical surface area: a controller for playback, an utterance object for the text and its settings, and a list of installed voices to pick from. The most useful pieces are queue control, voice selection, and the lifecycle events.

• SpeechSynthesisUtterance: The utterance object holds the text to read and the per-call settings for voice, language, pitch, rate, and volume. Each call to speak() takes one utterance and adds it to the queue.
• Voice queue and playback control: The speechSynthesis controller exposes speak(), pause(), resume(), and cancel(), plus the speaking, pending, and paused boolean properties. A page can pause a long passage and resume it without losing position.
• Voice selection through getVoices(): getVoices() returns the SpeechSynthesisVoice objects the operating system has installed, with name, lang, voiceURI, and localService fields. Pick a voice by language code or by name and assign it to the utterance.
• Lifecycle events: Each utterance fires start, end, pause, resume, error, boundary, and mark events. The boundary event fires on each word or sentence break, which is what karaoke-style highlighters and read-along readers use.
• voiceschanged event: Chrome, Edge, and Firefox load voices asynchronously from the OS. The voiceschanged event on speechSynthesis fires when the list is ready, so code that needs a specific voice should listen for it before calling getVoices().
• Pitch, rate, and volume controls: Pitch ranges from 0 to 2 with a default of 1, rate ranges from 0.1 to 10 with a default of 1, and volume ranges from 0 to 1. These map to whatever the OS speech engine accepts.
• Per-utterance language tag: The utterance lang property accepts a BCP 47 tag like en-US, fr-FR, or hi-IN. The browser picks a voice that matches the tag if the page does not set utterance.voice directly.
• Mixed local and network voices: Some browsers expose cloud voices alongside the local OS voices. The localService boolean on each SpeechSynthesisVoice lets the page filter for offline-only voices when latency or privacy matters.

How do you use the Speech Synthesis API?

A working speech synthesis call is six short steps: confirm support, wait for the voice list, build an utterance, set the voice and rate, queue it with speak(), and listen for the end event so the next utterance can start.

• Check support: Test typeof window.speechSynthesis === "object" before calling any API on it. If the check fails, fall back to a server-rendered audio file or a third-party text-to-speech service.
• Wait for voices to load: Call window.speechSynthesis.getVoices() and, if the result is empty, attach a voiceschanged listener and read the list inside the handler. Chrome, Edge, and Firefox all populate the list asynchronously.
• Pick a voice: Filter the voice list by lang or by name and store the chosen SpeechSynthesisVoice. For accessibility, prefer voices where localService is true so the audio works offline.
• Build the utterance: Create a new SpeechSynthesisUtterance with the text, then assign voice, lang, rate, pitch, and volume. One utterance plays one continuous block of text.
• Trigger speak() inside a user gesture: Call window.speechSynthesis.speak(utterance) from a click or tap handler. Safari on iOS rejects the call if it is not part of a user gesture, so a setTimeout or page-load call goes silent there.
• Listen for the end event: Attach an end listener to the utterance to know when it finishes. Use the boundary event to highlight the current word in the UI as it plays back.

The snippet below confirms support and lists the first five installed voices, including whether each one runs locally or hits a network service:

// Run in the DevTools console of any browser to test Speech Synthesis support.
const supportsSynthesis = typeof window.speechSynthesis === "object";
console.log("Speech Synthesis:", supportsSynthesis ? "supported" : "not supported");

if (supportsSynthesis) {
  const loadVoices = () => {
    const voices = window.speechSynthesis.getVoices();
    console.log("Installed voices:", voices.length);
    voices.slice(0, 5).forEach(v => console.log(v.name, v.lang, v.localService ? "local" : "network"));
  };

  // Chrome, Edge, and Firefox load voices asynchronously.
  if (window.speechSynthesis.getVoices().length === 0) {
    window.speechSynthesis.addEventListener("voiceschanged", loadVoices, { once: true });
  } else {
    loadVoices();
  }
}

What are the known issues with the Speech Synthesis API?

The Speech Synthesis API has wide browser coverage on paper, but the cross-browser reality is messy. Voice lists vary per OS, autoplay rules block playback on iOS, and Chrome quietly cancels long utterances after about 15 seconds.

• Voice list varies per OS and browser: The same site sees a US English Samantha voice on macOS, a Microsoft David voice on Windows, and a Google US English voice on Android. Code that hardcodes a voice name breaks on the next operating system.
• Voices load asynchronously in Chrome, Edge, and Firefox: getVoices() returns an empty array on the first call. Always wire up the voiceschanged event before reading the list, otherwise the picker shows nothing on first load.
• iOS Safari requires a user gesture: WebKit only lets speak() run inside a click, tap, or keypress handler. A page-load auto-greeting goes silent on every iPhone and iPad.
• Chrome cancels long utterances after roughly 15 seconds: Single SpeechSynthesisUtterance objects longer than about 200 to 250 characters get cut off mid-sentence on desktop Chrome. Split text into shorter utterances and queue them in order.
• Background tab playback is unreliable: Chrome and Safari throttle or stop synthesis when the tab loses focus. A long-form reader needs a Wake Lock or has to detect visibilitychange and re-queue.
• Firefox for Android has no synthesis support: Firefox on Android exposes SpeechRecognition but not SpeechSynthesis. Detect missing support and route the user to Chrome or Samsung Internet for that page.
• Network voices leak the spoken text: Cloud voices send the utterance text to the vendor's servers. Filter on localService when the content is sensitive, such as banking dictation or medical notes.
• SSML support is partial: Most browsers ignore SpeechSynthesisUtterance SSML markup like prosody or break tags. Plan around plain text and use rate or pitch on the utterance for emphasis.

In my experience, the most surprising failure is the silent iOS drop. A speak() call that works on every desktop browser does nothing on iPhone unless it is wired straight to a click handler, and the bug rarely shows up in console logs. Always test the playback path on a real iPhone with a real tap, not just an emulator click.

Citations

All Speech Synthesis API version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - SpeechSynthesis: developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis
• MDN Web Docs - Web Speech API: developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
• MDN Web Docs - SpeechSynthesisUtterance: developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance
• MDN Web Docs - Using the Web Speech API: developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API
• WICG - Web Speech API draft specification: wicg.github.io/speech-api
• W3C - Web Speech API community draft: webaudio.github.io/web-speech-api
• Chrome for Developers - Web apps that talk: Introduction to the Speech Synthesis API: developer.chrome.com/blog/web-apps-that-talk-introduction-to-the-speech-synthesis-api
• Wikipedia - Speech synthesis: en.wikipedia.org/wiki/Speech_synthesis
• Mozilla Hacks - Web Speech API hits Firefox Nightly: hacks.mozilla.org/2016/01/firefox-and-the-web-speech-api
• Microsoft Learn - Microsoft Edge release notes: learn.microsoft.com/en-us/deployedge/microsoft-edge-relnote-stable-channel