Browser text-to-speech: hear every voice your browser has built in

Why the voice list differs by browser and device

A page ships no voices of its own. It gets the ones the browser offers, and every browser offers a different set: most systems have a speech synthesizer of their own, browsers pass its voices through, and some browsers add voices that run on a remote service. So the same page lists different voices in Edge on Windows, Chrome on a Mac and Firefox on Linux. Each voice says which kind it is.

• Local voices (localService is true) are spoken by the synthesizer on your device. The text stays on the device.
• Remote voices (localService is false) are spoken by a service over the network. The text you play with one is sent to that service, and MDN notes that remote voices can add latency, bandwidth or cost.
• Microsoft Edge’s “Online (Natural)” voices, with names like “Microsoft Guy Online (Natural) - English (United States)” and Ana, Eric and many more beside it, are Microsoft’s neural voices, and they are remote: the text is sent to Microsoft’s speech service. Windows also names its own installed voices after Microsoft, and those run on the device.
• Chrome’s “Google” voices, such as “Google US English”, are voices Chrome adds on the desktop next to the system’s own, and Chrome reports them as remote.

None of this has to be taken on trust: the tester above shows the name, language, local or remote flag and default that your own browser reports, voice by voice.

Browser TTS in a few lines of JavaScript

No library, key or account: this runs as it is in the console of any browser that has the Web Speech API. Listen for voiceschanged, because in Chrome the list is empty until the voices have loaded.

// List the voices this browser reports. The list can start empty and fill in later.
function listVoices() {
  for (const voice of speechSynthesis.getVoices()) {
    const where = voice.localService ? "local" : "remote";
    console.log(voice.name, voice.lang, where, voice.default ? "default" : "");
  }
}
listVoices();
speechSynthesis.addEventListener("voiceschanged", listVoices);

// Speak a sentence, in the first English voice if there is one.
const utterance = new SpeechSynthesisUtterance("Hello from your browser.");
const english = speechSynthesis
  .getVoices()
  .find((voice) => voice.lang.startsWith("en"));
utterance.voice = english ?? null; // null: the browser's default voice
utterance.rate = 1; // 0.1 to 10
utterance.pitch = 1; // 0 to 2
speechSynthesis.speak(utterance);

// Stop speaking and empty the queue.
speechSynthesis.cancel();

The limits of browser TTS

• You cannot choose your visitors’ voices. A page picks from the list each visitor’s browser reports, and that list can be long, short or empty.
• There is no audio file. Speech goes straight to the device’s audio output. The API hands the page no audio to save, upload or download, and none of an utterance’s events (start, end, boundary, mark, pause, resume, error) carries any.
• A page cannot add a voice. Nothing a web page does installs a voice into speechSynthesis, a cloned voice included.
• Speed and pitch are requests. The API takes a rate from 0.1 to 10 and a pitch from 0 to 2, and a voice may hold either to a narrower range.
• Remote voices send your text away to the service that speaks it, and need the network to speak at all.
• The list can load late. In Chrome it is empty until voiceschanged fires, so code that reads it once at page load can find nothing.

Use your own cloned voice in a browser

Because a page cannot add a voice to the browser, your own voice has to arrive as audio. Clone it with a text-to-speech service, have the service speak the text, and play the result in the page with an <audio> element or new Audio(url). That also gets you the audio file browser TTS never gives you.

With VoiceLabs you clone a voice from a 2–30 second recording of clear speech, either in the VoiceLabs studio in your browser or through the API (POST /v1/voices/clone, or cloneVoice() in the @voicelabs/sdk package). Clone only a voice you have the right to use: the responsible use policy says what that means. After that, a request with your text and the voice’s name comes back as a take in that voice.

Keep the API key on a server. An API key spends your account’s audio, and the SDK’s own documentation puts the rule plainly:

“In a browser, only ever use a key you are willing to make public.”

So the page asks your own server for the speech, and the server, which holds the key, asks VoiceLabs.

A server route that speaks in your cloned voice

A Next.js route handler with the SDK. generateSpeech() starts the generation and waits for it to finish; the audio_url it comes back with is a signed, time-limited link, so the browser can play it without ever seeing the key.

// app/api/speak/route.ts: runs on your server, so the API key never reaches a browser.
import { VoiceLabs } from "@voicelabs/sdk";

const voicelabs = new VoiceLabs({ apiKey: process.env.VOICELABS_API_KEY! });

export async function POST(request: Request) {
  const { text } = (await request.json()) as { text: string };
  // In a real app, check who is asking and cap the text first.
  const generation = await voicelabs.generateSpeech({
    text,
    voice_name: "My voice", // the name you gave your cloned voice
  });
  // A signed, time-limited link to the audio: a browser can play it without the key.
  return Response.json({ audioUrl: generation.audio_url });
}

And the page that plays it. Browsers can refuse to start sound the visitor did not ask for, so run it from a click, and keep the element’s controls so they can press play themselves.

// In the page, from a click handler.
const response = await fetch("/api/speak", {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({ text: "Hello, in my own voice." }),
});
if (!response.ok) throw new Error(`Speech failed with HTTP ${response.status}`);
const { audioUrl } = await response.json();

const player = document.querySelector("audio"); // an <audio controls> element
player.src = audioUrl;
await player.play();

That route answers anyone who can reach it. A real one checks who is asking and caps the text, because every request spends your plan’s audio. The API is part of VoiceLabs Pro: on an account without an active subscription or trial, every request to it is refused. Authentication, errors and rate limits are in the API guide.

Questions about browser text-to-speech