Text-to-Speech mit JavaScript umsetzen

Du brauchst kein Framework, um deiner Website Text-to-Speech (TTS) hinzuzufügen. Egal, ob du mit reinem HTML und JavaScript, einem Static Site Generator oder einer serverseitig gerenderten Seite arbeitest: Deine Inhalte zum Sprechen zu bringen, ist unkompliziert.

Dieser Guide erklärt, wie Sprachausgabe im Browser funktioniert, welche Vor- und Nachteile die verschiedenen Ansätze haben und wie du TTS2Go in jedes JavaScript-Projekt integrierst.

Moderne Browser bringen die Web Speech API direkt mit. Mit ein paar Zeilen Vanilla-JavaScript kannst du:

```js

const utterance = new SpeechSynthesisUtterance("Hello world");

window.speechSynthesis.speak(utterance);

```

Keine npm-Pakete, keine API-Keys und kein Server nötig. Das Ganze ist kostenlos und funktioniert offline.

Der Haken liegt bei Qualität und Konsistenz:

• Die Stimmen klingen oft roboterhaft.
• Stimmqualität und -auswahl unterscheiden sich je nach Plattform.
• Chrome unter Windows klingt anders als Safari unter macOS.
• Ein einheitliches Hörerlebnis für alle Nutzer kannst du nicht garantieren.

KI-Text-to-Speech hat grundlegend verändert, was mit Sprache im Web möglich ist. Neuronale Sprachmodelle erzeugen Audio, das wirklich menschlich klingt – mit natürlichen Pausen, Betonungen und natürlichem Rhythmus.

Eine Möglichkeit ist, Audio für alle deine Inhalte vorab zu generieren und die Dateien über ein CDN auszuliefern.

Vorteile

• Sofortige Wiedergabe für deine Nutzer
• Überall dieselbe Qualität und dieselbe Stimme

Nachteile

• Du bezahlst vorab für das Audio jedes einzelnen Inhalts – egal, ob er jemals abgespielt wird oder nicht
• Die Inhalte müssen im Voraus feststehen
• Bei Änderungen müssen die Dateien neu generiert werden
• Die Speicherkosten wachsen mit deiner Content-Bibliothek

Vorab-Generierung funktioniert gut für kleine, stabile Kataloge, wird aber im großen Maßstab teuer und unflexibel.

Effizienter ist es, Audio erst dann zu generieren, wenn jemand tatsächlich auf Play klickt.

Vorteile

• Du zahlst nur für Audio, das Nutzer wirklich anfordern
• Dynamische und nutzergenerierte Inhalte lassen sich ganz natürlich abdecken

Herausforderung

Ohne jegliche Kontrolle könnte jeder Besucher deiner Website teure Generierungen auslösen. Du brauchst also einen Weg, um festzulegen, was wann generiert wird – damit du dein Budget im Griff behältst und trotzdem überall TTS anbieten kannst.

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

1. Sicherer clientseitiger Key

Du bindest das SDK mit einem Frontend-API-Key in deine Website ein. Der 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 und Ratenbegrenzung – er ist kein Geheimnis.

1. Erster Besucher: sofortige Browser-TTS + Generierung im Hintergrund

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.

1. Freigabe und Budgetkontrolle

In deinem TTS2Go-Dashboard kannst du:

• Generierungsanfragen 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.

1. Alle weiteren Besucher: Premium-KI-Audio vom CDN

Sobald eine Anfrage freigegeben und generiert wurde, bekommt jeder weitere Nutzer, der bei diesem Inhalt auf TTS klickt, hochwertiges KI-Audio in der von dir gewählten Stimme – sofort ausgeliefert über das CDN von TTS2Go.

In der Praxis heißt das: Der erste Besucher hört Browser-TTS, die Kosten steuerst du über die Freigabe, und alle danach bekommen Premium-KI-Audio.

Installiere das Vanilla-JavaScript-Paket von TTS2Go mit npm:

npm install @tts2go/vanilla

Wenn du keinen Bundler verwendest, kannst du es per <script>-Tag von einem CDN laden und über window.TTS2Go darauf zugreifen.

Initialisiere eine neue TTS2Go-Instanz mit den Zugangsdaten deines Projekts:

import { TTS2Go } from "@tts2go/vanilla";

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

Rufe tts.create() mit deinem Text und einer Voice-ID auf, um eine TTS-Instanz mit vollständiger Wiedergabesteuerung zu erhalten:

const instance = tts.create(
"Hello from TTS2Go in plain JavaScript!",)

Von hier aus kannst du die komplette JavaScript-API von TTS2Go erkunden, unter anderem:

• tts.getVoices() – listet die verfügbaren Stimmen für dein Projekt auf