Text-to-Speech in React umsetzen

Text-to-Speech wird im modernen Web schnell zum Must-have. Ob für Barrierefreiheit, mehr Engagement oder einfach als zusätzliche Möglichkeit, Inhalte zu konsumieren: Deinem React-Projekt eine Stimme zu geben, ist einfacher, als du vielleicht denkst. Dieser Guide erklärt, wie Sprachausgabe im Browser funktioniert, welche Vor- und Nachteile die verschiedenen Ansätze haben und wie du TTS2Go Schritt für Schritt in deine React-App integrierst.

Jeder moderne Browser bringt die Web Speech API mit. Du kannst window.speechSynthesis.speak() mit einer SpeechSynthesisUtterance aufrufen und dir Text vorlesen lassen – ganz ohne externen Dienst. Das ist kostenlos, braucht keinen API-Key und läuft komplett im Client.

Der Haken ist die Qualität. Browser-Stimmen klingen roboterhaft, unterscheiden sich zwischen Betriebssystemen und Browsern und bieten nur eine begrenzte Auswahl. Derselbe Text kann auf verschiedenen Geräten völlig unterschiedlich klingen.

KI-gestützte Text-to-Speech hat die Spielregeln verändert. Neuronale Sprachmodelle erzeugen Audio, das bemerkenswert menschlich klingt – mit natürlicher Intonation, natürlichem Sprechtempo und Emotion. Diese Dienste unterstützen Dutzende Sprachen und Hunderte Stimmen.

Der Nachteil: Die Generierung dieses Audios kostet Geld und erfordert eine API. Das wirft eine wichtige Frage auf: Wann und wie generierst du es?

Ein Ansatz ist, dein gesamtes Audio im Voraus zu generieren und als statische Dateien auszuliefern. Der Vorteil: sofortige Wiedergabe, weil das Audio bereits auf einem CDN liegt, und jedes Mal gleichbleibende Qualität.

Der Nachteil sind die Kosten. Du bezahlst für die Audio-Generierung jedes einzelnen Inhalts – ob ihn jemand anhört oder nicht. Du musst alle Inhalte im Voraus kennen, was dynamischen Text ausschließt. Jede inhaltliche Änderung stößt eine neue Generierungs-Pipeline an, und die Speicherkosten wachsen mit deiner Bibliothek.

Die Alternative: Audio erst generieren, wenn ein Nutzer es anfordert. Das ist günstiger, weil du nur für Inhalte zahlst, die Menschen wirklich hören wollen, und es funktioniert auch mit dynamischen Inhalten.

Trotzdem musst du dein Generierungsbudget schützen. Uneingeschränkter Zugriff auf eine TTS-API bedeutet, dass jeder teure Generierungen auslösen könnte. Du brauchst eine Möglichkeit zu steuern, wer wann KI-Audio bekommt.

TTS2Go verfolgt einen cleveren Ansatz, der Qualität, Kosten und Einfachheit in Balance bringt.

Du bindest das SDK mit einem Frontend-API-Key in deine Website ein. Der API-Key ist durch Domain-Sperren für Anfragen und Rate Limiting geschützt, sodass er bedenkenlos in deinem clientseitigen Code stehen kann. Er dient zur Identifizierung – er ist kein Geheimnis.

Wenn die erste Person bei einem Inhalt auf einen TTS-Button klickt, hört sie sofort die Sprachsynthese des Browsers. Gleichzeitig wird im Hintergrund eine Generierungsanfrage an TTS2Go gesendet.

Du kannst dich in dein TTS2Go-Dashboard einloggen und diese Anfrage manuell freigeben oder das KI-Freigabesystem so konfigurieren, dass es Anfragen, die deine Kriterien erfüllen, automatisch freigibt. So behältst du die volle Kontrolle über dein Generierungsbudget, denn du zahlst nur für Audio, das du wirklich willst.

Sobald eine Anfrage freigegeben und generiert wurde, bekommt jeder weitere Nutzer, der bei diesem Inhalt auf TTS klickt, hochwertige KI-Audiowiedergabe in der von dir gewählten Stimme. Das Audio wird im CDN von TTS2Go gecacht, sodass die Wiedergabe sofort startet.

Das heißt: Dein erster Besucher bekommt mit Browser-TTS ein funktionierendes Erlebnis, deine Generierungskosten steuerst du über die Freigabe, und alle danach bekommen Premium-KI-Audio ohne zusätzliche Kosten.

Installiere das React-Paket von TTS2Go in deinem Projektverzeichnis:

npm install @tts2go/react

Das Paket ist mit unter 15 KB (gzipped) schlank und hat außer React keine Peer-Dependencies.

Umschließe deine Anwendung an der Wurzel deines Komponentenbaums mit dem TTS2GoProvider. Übergib deinen API-Key und deine Projekt-ID als Konfiguration.

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>
);

Nutze den useTTS-Hook in einer beliebigen Komponente, um Steuerelemente für Play, Pause und Stopp zu erhalten. Für ein schnelles Lautsprecher-Icon kannst du auch einfach den fertigen TTSButton einsetzen.

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>
  );
}

Der erste Nutzer, der auf Play klickt, hört Browser-TTS, während eine Generierungsanfrage an dein TTS2Go-Dashboard gesendet wird. Nach der Freigabe hören alle künftigen Nutzer KI-Audio.

Entdecke die Stimmauswahl, SSML-Unterstützung für eine fein abgestimmte Aussprache und die Highlight-API, die den Text auf dem Bildschirm mit den gesprochenen Wörtern synchronisiert.

In der vollständigen React-Dokumentation unter tts2go.com/docs/react findest du fortgeschrittene Patterns und Beispiele.