Chapter 10: Browser & OS Built-in TTS — The Free Fallback

The browser path is the "zero-hosting" dream: ship a few lines of JS, the user's device does the work. The OS-native path matters mostly when you control the device (a kiosk, a desktop Electron app) or the server (macOS build agents, a Linux box running Piper).

Browser support in 2026 — the API is universal, the voices are not

SpeechSynthesis is supported in essentially every current browser: Chrome, Edge, Safari, Firefox, and their mobile equivalents. Per MDN and caniuse, baseline support has been there for years (Chrome since 33, Safari since 7, Firefox since 49, Edge since the first Chromium build). So the API existing is not your problem — which voices it returns is.

The voices come from the underlying platform:

The crucial column is the third one. You cannot ship a Czech voice with your web app. You can only ask "does a Czech voice exist on this device right now?" and gracefully degrade if not. This is the defining limitation of the entire approach.

The localService flag — local vs. network, and why it matters

Each SpeechSynthesisVoice has a boolean localService. true means a synthesizer running on the device (offline-capable, private). false means the audio is generated remotely — the text you speak is sent to a server (Google's for Chrome's default voices, Microsoft's for Edge's "Online (Natural)" voices).

Two consequences for your project:

• Privacy / offline: if your texts are sensitive, or the device is offline, you must filter to voice.localService === true. Network voices silently fail (or fall back) without connectivity.
• Quality: the best-sounding browser voices are usually the network ones (Edge's "Natural" line, Google's cs-CZ). The local ones are the older, more robotic system voices. So there's a direct trade-off: natural-sounding usually means "your text left the device."

// Inspect what you've actually got
speechSynthesis.getVoices().forEach(v =>
  console.log(`${v.name} | ${v.lang} | ${v.localService ? 'LOCAL' : 'NETWORK'} | default=${v.default}`)
);

The voiceschanged async trap (you will hit this)

getVoices() frequently returns an empty array on first call, especially in Chrome and Edge, because voices load asynchronously after page init. The fix is to listen for the voiceschanged event — but you must also call getVoices() once eagerly, because in Safari the event may never fire and the list is already populated. Handle both:

function loadVoices() {
  return new Promise(resolve => {
    let voices = speechSynthesis.getVoices();
    if (voices.length) return resolve(voices);          // Safari / warm cache
    speechSynthesis.addEventListener('voiceschanged', () => {
      resolve(speechSynthesis.getVoices());             // Chrome / Edge / Firefox
    }, { once: true });
    // Safety net: some engines never fire the event
    setTimeout(() => resolve(speechSynthesis.getVoices()), 1000);
  });
}

Selecting a Czech voice (with graceful fallback)

The strategy: prefer a high-quality network Czech voice if available, fall back to any local cs voice, and finally bail out to a UI message rather than reading Czech text in a default English voice (which sounds grotesque — the engine will read Czech graphemes with English phonetics).

async function pickCzechVoice() {
  const voices = await loadVoices();
  const cz = voices.filter(v => v.lang.toLowerCase().startsWith('cs'));

  if (!cz.length) return null;                 // No Czech voice installed at all

  // 1) Prefer an Edge "Online (Natural)" or Google network voice (best quality)
  const natural = cz.find(v =>
    /natural|online|google/i.test(v.name) && !v.localService);
  if (natural) return natural;

  // 2) Otherwise any local Czech voice (offline, lower quality)
  const local = cz.find(v => v.localService);
  if (local) return local;

  // 3) Whatever Czech voice exists
  return cz[0];
}

If pickCzechVoice() returns null, you should tell the user their device has no Czech voice and link them to OS instructions (see below) — never silently read Czech in en-US.

Speaking, with rate / pitch / volume

async function speakCzech(text) {
  const voice = await pickCzechVoice();
  if (!voice) {
    alert('No Czech voice installed on this device. See settings to add one.');
    return;
  }
  const u = new SpeechSynthesisUtterance(text);
  u.voice  = voice;
  u.lang   = voice.lang;   // belt-and-suspenders; helps some engines
  u.rate   = 1.0;          // 0.1–10; ~0.9–1.1 sounds natural
  u.pitch  = 1.0;          // 0–2
  u.volume = 1.0;          // 0–1
  u.onerror = e => console.warn('TTS error', e.error);
  speechSynthesis.cancel();   // clear any queued/half-spoken utterance
  speechSynthesis.speak(u);
}

A few practical notes:

• rate above ~1.4 quickly turns robotic on local voices; the network "Natural" voices hold up better.
• Always speechSynthesis.cancel() before a new speak() if you want "barge-in" behaviour, or you'll queue utterances behind each other.
• There's no reliable cross-browser way to know the audio duration in advance; use onstart / onend / onboundary events for UI sync.

The long-text bug — chunk by sentence

Chrome has a long-standing bug where speechSynthesis stops after roughly 15 seconds / a couple hundred characters if you pass one giant utterance. Two mitigations, often combined:

(a) The pause/resume keep-alive hack — a setInterval that pings pause()+resume() every ~10s to stop the engine going idle:

function keepAlive() {
  if (speechSynthesis.speaking) {
    speechSynthesis.pause();
    speechSynthesis.resume();
  }
}
const ka = setInterval(keepAlive, 10000);
// clearInterval(ka) when your whole text is done

(b) Sentence chunking — the more robust approach: split the text into sentence-sized utterances and queue them. This also gives you per-sentence highlighting and error recovery.

function chunkText(text, maxLen = 180) {
  // Split on sentence boundaries, keep the punctuation
  const sentences = text.match(/[^.!?…]+[.!?…]?\s*/g) || [text];
  const chunks = [];
  let buf = '';
  for (const s of sentences) {
    if ((buf + s).length > maxLen && buf) { chunks.push(buf.trim()); buf = s; }
    else buf += s;
  }
  if (buf.trim()) chunks.push(buf.trim());
  return chunks;
}

async function speakLong(text) {
  const voice = await pickCzechVoice();   // or your English picker
  if (!voice) return;
  speechSynthesis.cancel();
  for (const chunk of chunkText(text)) {
    const u = new SpeechSynthesisUtterance(chunk);
    u.voice = voice;
    u.lang  = voice.lang;
    u.rate  = 1.0;
    speechSynthesis.speak(u);            // queued; engine plays them in order
  }
}

Sentence chunking respects Czech punctuation fine (.!?…), but watch for abbreviations and decimal numbers (3.14, tzv.) that contain periods — for production, a slightly smarter splitter or a sentence-segmentation library avoids mid-number breaks.

Quality reality, per OS — and Czech specifically

This is where honesty earns its keep. Built-in TTS quality varies enormously, and "is there a Czech voice at all" is a separate axis from "does it sound good."

macOS / iOS (Safari + native). The best of the built-ins. Apple ships Zuzana (cs_CZ) as the system Czech voice, and users can download Enhanced and Premium quality variants in System Settings → Accessibility → Spoken Content → System Voice → Manage Voices. The default (compact) Zuzana is intelligible but plainly synthetic; the Premium download is markedly better and is the single best free, local Czech voice you'll find on a consumer device. English on macOS is excellent (Samantha, and the neural "Siri" voices for system use). Via say on the command line you can list voices with say -v '?' and pick Czech with say -v Zuzana "Dobrý den".

Windows (Edge / Chrome / Firefox + SAPI/OneCore). The messiest platform.

• Windows ships a Czech voice, historically Microsoft Jakub (and newer OneCore voices). But there's a well-known wrinkle: some OneCore/"mobile" voices are registered such that only Microsoft's own apps see them, and third-party SAPI consumers (and sometimes browsers) don't — a registry-key situation users sometimes have to work around. So "Windows has a Czech voice" does not guarantee your web app sees it.
• The local Czech voice quality is mediocre — clearly robotic.
• The bright spot is Microsoft Edge's "Online (Natural)" voices. For Czech, Edge exposes Microsoft Antonín Online (Natural) and Microsoft Vlasta Online (Natural) — genuine neural voices that sound very good, and they appear in getVoices() (with localService=false) when running in Edge with network. This is, in practice, the highest-quality free Czech browser TTS available without any backend on your part — but it only works in Edge, online, and the text is sent to Microsoft.

Android (Chrome / Firefox + Android TTS). Depends entirely on the installed engine (Google Speech Services or Samsung TTS) and whether the user has downloaded the cs-CZ voice data. Google's Czech voice is reasonable. Coverage is uneven across devices and OEMs.

Linux (Firefox / Chromium). The weak spot. Out of the box, Linux often has no usable TTS through the browser, or only espeak/speech-dispatcher — which is the textbook "1990s robot" sound and barely tolerable for Czech. If your reader base is heavily Linux, the browser fallback essentially does not exist for them; this is a strong reason to consider a server-side option (next section).

Quality summary table:

English, by contrast, is well-served and natural on macOS, iOS, Edge (Natural), and modern Android. The honest bottom line: English built-in TTS is "good enough" almost everywhere; Czech is only reliably good on Apple devices and in Edge online.

When the browser fallback is "good enough"

• Accessibility / convenience read-aloud, where users accept their device's own voice (they already chose it system-wide).
• You can't or won't run any backend, and near-zero cost is the hard constraint.
• Your audience skews macOS/iOS or Edge users (then Czech quality is actually fine).
• English-first features where Czech is secondary.
• A graceful "lite" tier layered under a paid/cloud option: use the browser engine for free users, a real neural API for the premium path.

When it is NOT good enough (the limitations, plainly)

• Inconsistent across users. Two visitors get totally different voices and quality. You cannot guarantee a "house voice," brand consistency, or even that Czech works at all.
• You can't choose or bundle voices. No way to ship a specific voice; you're at the mercy of what's installed.
• No server-side / no audio capture. You cannot pre-generate MP3s, cache audio, build a podcast feed, or do anything on the backend. It only plays live in the user's browser.
• Linux and bare Windows-Chrome Czech are weak-to-broken.
• Network voices leak text to Google/Microsoft and need connectivity — so the "best" browser voices aren't private or offline.
• Mobile autoplay restrictions: speak() often must be triggered by a user gesture; auto-reading on page load is frequently blocked.
• The 15-second/long-text bug and quirky cross-browser event behaviour mean even the basics need defensive code (above).

Server-side OS TTS — the same idea, on your machine

If you like "OS-grade, free, no per-character cost" but hate "I don't control the voice," move the OS engine to the server, where you do control it. Two routes worth knowing:

macOS say (if you have a Mac/Mac mini/CI runner). It writes audio to a file, so it's usable in a pipeline:

# List Czech voices, then synthesize to a file
say -v '?' | grep cs_CZ
say -v Zuzana -o vystup.aiff "Dobrý den, toto je test."
# Convert to mp3 for the web (needs ffmpeg)
ffmpeg -i vystup.aiff -codec:a libmp3lame -qscale:a 4 vystup.mp3

This gives you consistent, decent Czech (especially with the Premium Zuzana installed) and full backend control — at the price of needing macOS hardware. Note Apple's licensing restricts using system voices outside Apple platforms, so this is fine for your own Mac, not for redistributing the voice.

Piper (cross-platform, open source, the real recommendation for self-hosting). Piper is a fast, fully local neural TTS from the Rhasspy/Home Assistant ecosystem. It runs on Linux/Windows/macOS, even a Raspberry Pi, has no per-character cost, and — importantly — ships a Czech voice (cs_CZ, e.g. the jirka voice in low/medium quality) hosted on Hugging Face. Quality is clearly better than espeak and roughly in the "good local neural" tier, though below top cloud voices.

# Download a Czech Piper voice (model + config) from the rhasspy/piper-voices repo,
# then synthesize to a WAV file — fully offline, no API key, no per-char cost.
echo 'Dobrý den, toto je test české syntézy.' | \
  piper --model cs_CZ-jirka-medium.onnx --output_file out.wav

Piper is covered in depth in the local/self-hosted chapter; the point here is that it's the natural upgrade from "browser fallback" when you want the same free/offline ethos but consistent, server-generated, cacheable audio. Architecturally: the browser Web Speech API is the client-side free option (no hosting, inconsistent), and Piper is the server-side free option (you host a small container, fully consistent, can pre-generate and cache files).

Decision shortcut

• Need zero hosting, English-first, accept whatever voice the user has → Web Speech API, with the chunking/voiceschanged code above.
• Need decent Czech for free and your users are mostly Apple/Edge → Web Speech API is genuinely fine; explicitly detect and warn the others.
• Need consistent Czech + English, free, and you can run a small container → Piper (server-side), not the browser API.
• Have a Mac you control and want quick file output → say + ffmpeg.
• Need top-tier natural Czech for all users regardless of device → none of the above; that's the cloud/neural chapters.

Key Takeaways

• The Web Speech API (SpeechSynthesis) is universally supported in 2026 browsers and costs nothing, but you don't control which voices exist on the user's device — that is its defining limitation.
• Czech quality via built-ins is uneven: genuinely good on macOS/iOS (Zuzana, especially the Premium download) and via Edge's "Online (Natural)" voices (Antonín/Vlasta), mediocre-to-broken on Windows-Chrome/Firefox and on Linux.
• The best-sounding browser voices (Edge "Natural", Google cs-CZ) are network voices (localService=false): they send your text to a server and need connectivity. Filter on localService if you need privacy/offline.
• You must handle the async voiceschanged event, the ~15s/long-text cutoff (pause/resume hack and/or sentence chunking), and the case where no Czech voice exists (warn the user rather than read Czech in an English voice).
• There is no audio capture / no server-side generation from the browser API — you can't cache or pre-render files. If you need that, move to a server-side OS engine: macOS say -o (consistent, needs a Mac) or, better, Piper (open-source neural, free, offline, ships a Czech voice).
• Treat the browser fallback as a free "lite" tier under a real neural option, or for English-first / Apple-heavy audiences — not as your primary path if consistent, natural Czech for everyone is the goal.

Key References

• MDN. SpeechSynthesis — Web APIs. 2025. https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis — Core controller interface, getVoices(), voiceschanged behaviour.
• MDN. Using the Web Speech API. 2025. https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API — Working example of utterances, rate/pitch/voice selection.
• MDN. SpeechSynthesisVoice: localService property. 2025. https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/localService — Distinguishing local vs. remote/network voices.
• caniuse. Speech Synthesis API. 2025. https://caniuse.com/speech-synthesis — Cross-browser support matrix for SpeechSynthesis.
• Microsoft. Read Aloud natural voices in Microsoft Edge. 2025. https://www.microsoft.com/en-us/edge/features/read-aloud — Edge "Online (Natural)" neural voices (incl. Czech Antonín/Vlasta), online + Edge-only.
• Apple. Voices in different languages and dialects on Mac. 2025. https://support.apple.com/en-us/104952 — System voices incl. Czech "Zuzana" and Enhanced/Premium downloads.
• ss64. say(1) — macOS Manual Page. 2025. https://ss64.com/osx/say.html — say -v voice listing and -o file output for server-side synthesis.
• Stack Overflow. Chrome speech synthesis with longer text. 2024. https://stackoverflow.com/questions/21947730/chrome-speech-synthesis-with-longer-text — The ~15s cutoff bug, pause/resume keep-alive, and chunking workarounds.
• rhasspy/piper. Piper — fast local neural TTS (GitHub). 2025. https://github.com/rhasspy/piper — Open-source offline TTS as the server-side free alternative.
• Hugging Face. rhasspy/piper-voices — Czech (cs). 2025. https://huggingface.co/rhasspy/piper-voices/tree/main/cs — Available Czech cs_CZ Piper voice models.