How to Speak JavaScript: Speech API Guide | FiftyGPT

Published October 31, 2026 · FiftyGPT Team · 6 min read

How to speak JavaScript? It means making the browser read text aloud using the Web Speech API — specifically speechSynthesis.speak() with a SpeechSynthesisUtterance. It takes about five lines of code, works in all modern browsers, and needs no libraries. Here's the complete guide with working examples.

How do you make JavaScript speak text aloud?

The simplest possible example — paste this in your browser console and your computer will talk:

const utterance = new SpeechSynthesisUtterance("Hello, I can speak JavaScript.");
speechSynthesis.speak(utterance);

That's the whole API in miniature: create an utterance (the thing to say), hand it to speechSynthesis (the speaker), and the browser handles the rest using the operating system's voices. No API keys, no network calls, no dependencies. It works in Chrome, Edge, Firefox, and Safari on both desktop and mobile, though voice quality and available voices vary by OS.

The API is asynchronous and non-blocking — your page keeps running while speech plays. You can queue multiple utterances and they'll play in order, which is handy for reading articles section by section. One quirk: in Chrome, speechSynthesis.getVoices() may return an empty array on first call, so listen for the voiceschanged event before listing voices (covered below).

How do you control voice, pitch, rate, and volume?

Every SpeechSynthesisUtterance exposes properties you can tune before speaking:

const u = new SpeechSynthesisUtterance("Customizing my voice.");
u.rate = 1.1;    // 0.1 (slow) to 10 (fast); 1 is normal
u.pitch = 1.2;   // 0 (deep) to 2 (high); 1 is normal
u.volume = 0.9;  // 0 (silent) to 1 (full)
u.lang = "en-GB"; // hint for voice selection
speechSynthesis.speak(u);

To pick a specific voice — say a British English one — load the voice list properly:

function speakWithVoice(text, voiceName) {
  const voices = speechSynthesis.getVoices();
  const voice = voices.find(v => v.name.includes(voiceName));
  const u = new SpeechSynthesisUtterance(text);
  if (voice) u.voice = voice;
  speechSynthesis.speak(u);
}
speechSynthesis.onvoiceschanged = () => speakWithVoice("Hello", "Google UK English");

Practical tip: don't hardcode voice names in production — they differ across devices. Instead, filter by voice.lang (e.g. starts with "en") and let the OS pick the default. For more on English voice options, see our British accent generator roundup. Control methods speechSynthesis.pause(), .resume(), and .cancel() manage playback; .speaking tells you if audio is active.

How do you handle speech events in JavaScript?

Utterances fire events you can hook for UI feedback — highlighting the sentence being read, enabling a stop button, or chaining utterances:

const u = new SpeechSynthesisUtterance("Event-driven speech.");
u.onstart = () => console.log("Started speaking");
u.onend = () => console.log("Finished speaking");
u.onerror = (e) => console.error("Speech error:", e.error);
u.onboundary = (e) => console.log("Word boundary at char", e.charIndex);
speechSynthesis.speak(u);

The boundary event is the gem: it fires at word boundaries, letting you highlight each word karaoke-style as it's spoken — the foundation of read-along features in read aloud extensions and language-learning apps. Note that boundary events are reliable in Chrome but patchy in Safari and Firefox, so treat word-highlighting as progressive enhancement.

A common pattern for "read this article" buttons: split text into sentences, queue one utterance per sentence, and use onend to advance a progress indicator. Keep utterances under a few hundred characters each — very long utterances can get cut off on some mobile browsers. Clear, well-formed sentences queue more reliably — our run-on sentence checker guide helps tidy the text before you split it.

What are the browser support and limitations?

Support is broad but uneven. Here's the 2026 reality:

Key limitations to design around: autoplay policies — most browsers require a user click before speech starts, so always trigger from a button; voice inconsistency — the same code sounds different on every device, so never promise a specific voice; no server-side use — this is a browser API only, useless in Node.js (use a TTS API there); and mobile interruptions — phone calls and screen locks can kill queued speech. For production TTS with consistent voices, a cloud API (Google Cloud TTS, Amazon Polly, ElevenLabs) is the upgrade path — the Web Speech API is for free, client-side, best-effort speech. For a deliberately stylised synthetic voice, compare robotic voice generator tools.

Try it free on FiftyGPT

Try text generator free on FiftyGPT. For help with a speech feature, contact FiftyGPT.

Frequently asked questions

How do you make JavaScript speak text aloud?

Create a SpeechSynthesisUtterance and hand it to speechSynthesis.speak(). It takes about five lines of code, works in all modern browsers, needs no libraries, and uses the operating system's voices, with no API keys, network calls, or dependencies.

How do you control voice, pitch, rate, and volume?

Tune the utterance properties before speaking: rate from 0.1 to 10, pitch from 0 to 2, volume from 0 to 1, and lang as a hint for voice selection. Load the voice list properly, filter by voice.lang, and do not hardcode voice names, as they differ across devices. Control methods pause, resume, and cancel manage playback.

How do you handle speech events in JavaScript?

Utterances fire onstart, onend, onerror, and onboundary events. The boundary event fires at word boundaries, letting you highlight each word karaoke-style, but it is reliable in Chrome and patchy in Safari and Firefox. For read-this-article buttons, split text into sentences, queue one utterance per sentence, and use onend to advance a progress indicator.

What are the browser support and limitations?

Speech synthesis is full in Chrome and Edge on desktop, Safari on desktop and iOS, Firefox, and Chrome on Android, but voice selection and boundary events are uneven. Design around autoplay policies, voice inconsistency, no server-side use, and mobile interruptions. For production TTS with consistent voices, a cloud API is the upgrade path.

Why does getVoices() sometimes return an empty array in Chrome?

In Chrome, speechSynthesis.getVoices() may return an empty array on first call, so listen for the voiceschanged event before listing voices.

FAQs