Adding Text to Speech to React

Text-to-speech is quickly becoming a must-have feature on the modern web. Whether you are building for accessibility, engagement, or just giving users another way to consume content, adding voice to your React project is easier than you might think. This guide covers how browser speech works, the trade-offs of different approaches, and how to integrate TTS2Go into your React app step by step.

Every modern browser ships with the Web Speech API. You can call window.speechSynthesis.speak() with a SpeechSynthesisUtterance and hear text read aloud without any external service. It is free, requires no API key, and runs entirely on the client.

The catch is quality. Browser voices sound robotic, vary between operating systems and browsers, and offer limited voice selection. The same text can sound completely different on different devices.

AI-powered text-to-speech has changed the game. Neural voice models produce audio that sounds remarkably human, with natural intonation, pacing, and emotion. These services support dozens of languages and hundreds of voices.

The trade-off is that generating this audio costs money and requires an API, which raises an important question: when and how do you generate it?

One approach is to generate all your audio ahead of time and serve it as static files. The upside is instant playback since the audio is already on a CDN, and consistent quality every time.

The downside is cost. You pay to generate audio for every piece of content whether anyone listens or not. You must know all your content up front, which rules out dynamic text. Every content change triggers a new generation pipeline, and storage costs grow with your library.

The alternative is to generate audio only when a user requests it. This is cheaper since you only pay for content people actually want to hear, and it works with dynamic content.

However, you still need to protect your generation budget. Unrestricted access to a TTS API means anyone could trigger expensive generations. You need a way to control who gets AI audio and when.

TTS2Go takes a smart approach that balances quality, cost, and simplicity.

You add the SDK to your site with a frontend API key. The API key uses request domain blocking and rate limiting so it can safely live in your client-side code. It is an identification mechanism, not a secret.

When the first person clicks a TTS button on a piece of content, they hear browser speech synthesis immediately. At the same time, a generation request is sent to TTS2Go in the background.

You can log into your TTS2Go dashboard and approve that request manually, or configure the AI approval system to auto-approve requests that meet your criteria. This gives you full control over your generation budget since you only pay for audio you actually want.

Once a request is approved and generated, every subsequent user who clicks TTS on that same content gets high-quality AI audio playback in your chosen voice. The audio is cached on TTS2Go's CDN so playback is instant.

This means your first visitor gets a functional experience with browser TTS, your generation costs are controlled through approval, and everyone after that gets premium AI audio with no extra cost.

Install the TTS2Go React package in your project directory:

npm install @tts2go/react

The package is lightweight at under 15 KB gzipped with zero peer dependencies beyond React.

Wrap your application with the TTS2GoProvider at the root of your component tree. Pass your API key and project ID as config.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TTS2GoProvider } from "@tts2go/react";
import App from "./App";

const config = {
  apiKey: "your-api-key",
  projectId: "your-project-id",
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TTS2GoProvider config={config}>
      <App />
    </TTS2GoProvider>
  </StrictMode>
);

Use the useTTS hook in any component to get play, pause, and stop controls. You can also drop in the pre-built TTSButton for a quick speaker icon.

import { TTSButton, useTTS } from "@tts2go/react";

const VOICE_ID = "your-voice-id";

export default function Article({ text }: { text: string }) {
  const { status, play, stop, pause } = useTTS(text, VOICE_ID);

  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId={VOICE_ID} />
      <button onClick={status === "playing" ? stop : play}>
        {status === "playing" ? "Stop" : "Play"}
      </button>
    </div>
  );
}

The first user to click play hears browser TTS while a generation request is sent to your TTS2Go dashboard. Once approved, all future users hear AI audio.

Explore voice selection, SSML support for fine-tuned pronunciation, and the highlight API that syncs on-screen text with spoken words.

Check out the full React documentation at tts2go.com/docs/react for advanced patterns and examples.