Text-to-Speech in JavaScript: A Complete Guide

Why Giving Your Web App a Voice Changes Everything

I build browser-based tools that need to work across devices without server dependencies. The Web Speech API is surprisingly capable for text-to-speech — I’ve used it in accessibility features and notification systems. Here’s a practical implementation guide.

Picture this: you’re developing a fitness app. It offers personalized workout plans, tracks user progress, and even calculates calories burned. But something’s missing—its ability to engage users in a truly interactive way. Now, imagine your app giving vocal encouragement: “Keep going! You’re doing great!” or “Workout complete, fantastic job!” Suddenly, the app feels alive, motivating, and accessible to a broader audience, including users with disabilities or those who prefer auditory feedback.

This is the transformative power of text-to-speech (TTS). With JavaScript’s native speechSynthesis API, you can make your web application speak without relying on third-party tools or external libraries. While the basics are straightforward, mastering this API requires understanding its nuances, handling edge cases, and optimizing for performance. Let me guide you through everything you need to know about implementing TTS in JavaScript.

Getting Started with the speechSynthesis API

The speechSynthesis API is part of the Web Speech API, and it’s built directly into modern browsers. It allows developers to convert text into spoken words using the speech synthesis engine available on the user’s device. This makes it lightweight and eliminates the need for additional installations.

The foundation of this API lies in the SpeechSynthesisUtterance object, which represents the text to be spoken. This object lets you customize various parameters like language, pitch, rate, and voice. Let’s start with a simple example:

Basic Example: Making Your App Speak

Here’s a straightforward implementation:

// Check if speech synthesis is supported
if ('speechSynthesis' in window) {
 // Create a SpeechSynthesisUtterance instance
 const utterance = new SpeechSynthesisUtterance();

 // Set the text to be spoken
 utterance.text = "Welcome to our app!";

 // Speak the utterance
 speechSynthesis.speak(utterance);
} else {
 console.error("Speech synthesis is not supported in this browser.");
}

When you run this snippet, the browser will vocalize “Welcome to our app!” It’s simple, but let’s dig deeper to ensure this feature works reliably in real-world applications.

Customizing Speech Output

While the default settings suffice for basic use, customizing the speech output can dramatically improve user experience. Below are the key properties you can adjust:

1. Selecting Voices

The speechSynthesis.getVoices() method retrieves the list of voices supported by the user’s device. You can use this to select a specific voice:

speechSynthesis.addEventListener('voiceschanged', () => {
 const voices = speechSynthesis.getVoices();

 if (voices.length > 0) {
 // Create an utterance
 const utterance = new SpeechSynthesisUtterance("Hello, world!");

 // Set the voice to the second available option
 utterance.voice = voices[1];

 // Speak the utterance
 speechSynthesis.speak(utterance);
 } else {
 console.error("No voices available!");
 }
});

2. Adjusting Pitch and Rate

Tuning the pitch and rate can make the speech sound more natural or match your application’s tone:

• pitch: Controls the tone, ranging from 0 (low) to 2 (high). Default is 1.
• rate: Controls the speed, with values between 0.1 (slow) and 10 (fast). Default is 1.

// Create an utterance
const utterance = new SpeechSynthesisUtterance("Experimenting with pitch and rate.");

// Set pitch and rate
utterance.pitch = 1.8; // Higher pitch
utterance.rate = 0.8; // Slower rate

// Speak the utterance
speechSynthesis.speak(utterance);

3. Adding Multilingual Support

To cater to a global audience, you can set the lang property for proper pronunciation:

// Create an utterance
const utterance = new SpeechSynthesisUtterance("Hola, ¿cómo estás?");

// Set language to Spanish (Spain)
utterance.lang = 'es-ES';

// Speak the utterance
speechSynthesis.speak(utterance);

Using the appropriate language code ensures the speech engine applies the correct phonetics and accents.

Advanced Features to Enhance Your TTS Implementation

Queueing Multiple Utterances

Need to deliver multiple sentences in sequence? The speechSynthesis API queues utterances automatically:

// Create multiple utterances
const utterance1 = new SpeechSynthesisUtterance("This is the first sentence.");
const utterance2 = new SpeechSynthesisUtterance("This is the second sentence.");
const utterance3 = new SpeechSynthesisUtterance("This is the third sentence.");

// Speak all utterances in sequence
speechSynthesis.speak(utterance1);
speechSynthesis.speak(utterance2);
speechSynthesis.speak(utterance3);

Pausing and Resuming Speech

Control playback with pause and resume functionality:

// Create an utterance
const utterance = new SpeechSynthesisUtterance("This sentence will be paused midway.");

// Speak the utterance
speechSynthesis.speak(utterance);

// Pause after 2 seconds
setTimeout(() => {
 speechSynthesis.pause();
 console.log("Speech paused.");
}, 2000);

// Resume after another 2 seconds
setTimeout(() => {
 speechSynthesis.resume();
 console.log("Speech resumed.");
}, 4000);

Stopping Speech

Need to cancel ongoing speech? Use the cancel method:

// Immediately stop all ongoing speech
speechSynthesis.cancel();

Troubleshooting Common Pitfalls

• Voice List Delays: The voice list might not populate immediately. Always use the voiceschanged event.
• Language Compatibility: Test multilingual support on various devices to ensure proper pronunciation.
• Browser Variability: Safari, especially on iOS, has inconsistent TTS behavior. Consider fallback options.

if ('speechSynthesis' in window) {
 console.log("Speech synthesis is supported!");
} else {
 console.error("Speech synthesis is not supported in this browser.");
}

Accessibility and Security Considerations

Ensuring Accessibility

TTS can enhance accessibility, but it should complement other features like ARIA roles and keyboard navigation. This ensures users with diverse needs can interact smoothly with your app.

Securing Untrusted Input

Be cautious with user-generated text. While the speechSynthesis API doesn’t execute code, unsanitized input can introduce vulnerabilities elsewhere in your application.

Performance and Compatibility

The speechSynthesis API works in most modern browsers, including Chrome, Edge, and Firefox. However, Safari’s implementation can be less reliable, particularly on iOS. Always test across multiple browsers and devices to verify compatibility.

💡 In practice: Cross-browser voice consistency is the biggest pain point. Chrome and Safari return completely different voice lists, and some voices vanish between OS updates. I always implement a fallback chain: preferred voice → same language voice → default voice. Never hardcode a voice name — I learned this when a Chrome update removed ‘Google US English’ and broke my app for a week.

Quick Summary

• The speechSynthesis API enables native text-to-speech functionality in modern browsers.
• Customize speech output with properties like voice, pitch, rate, and lang.
• Handle edge cases like delayed voice lists and unsupported languages.
• Improve accessibility by combining TTS with other inclusive features.
• Test thoroughly on various platforms to ensure reliable performance.

Now it’s your turn. How will you leverage text-to-speech to enhance your next project? Let me know your ideas!

📋 Disclosure: Some links are affiliate links. If you purchase through these links, I earn a small commission at no extra cost to you. I only recommend products I have personally used or thoroughly evaluated.

📚 Related Articles

• Vibe Coding Is a Security Nightmare — Here’s How to Survive It
• Claude Code Changed How I Ship Code — Here’s My Honest Take After 3 Months
• Ultimate Guide to Secure Remote Access for Your Homelab

Frequently Asked Questions