Einführung in die SpeechSynthesis Web API

In diesem Tutorial zeige ich dir, wie du die SpeechSynthesis Web API in eine Website mit JavaScript einbinden kannst, um eine Text-to-Speech-Funktion zu realisieren. Du wirst staunen, wie einfach das ist!

You like what you find here? A donation helps to keep this project running.

Was ist die SpeechSynthesis Web API?

Die SpeechSynthesis Web API, auch als Web Speech API bezeichnet, ist eine browserbasierte API, die Text-zu-Sprache- (Text-to-Speech, TTS) Funktionen ermöglicht. Mit dieser API können Entwickler*innen Text in gesprochene Sprache umwandeln und diese direkt im Browser abspielen, ohne auf externe TTS-Dienste oder Plug-ins angewiesen zu sein.

Die API ist Teil der Web Speech API-Spezifikation und wird von den meisten modernen Browsern wie Google Chrome, Mozilla Firefox, Apple Safari und Microsoft Edge unterstützt.

Die SpeechSynthesis Web API bietet verschiedene Funktionen, wie zum Beispiel:

Auswahl der Stimme und Sprache: Die API ermöglicht die Auswahl aus verschiedenen verfügbaren Stimmen und Sprachen, um die Sprachausgabe an die Bedürfnisse der Benutzer*innen anzupassen.
Anpassung von Lautstärke, Geschwindigkeit und Tonhöhe: Entwickler*innen können die Lautstärke, Geschwindigkeit und Tonhöhe der Sprachausgabe anpassen, um eine bessere Benutzererfahrung zu bieten.
Kontrolle über den Sprachausgabe-Fluss: Die API bietet Funktionen zum Starten, Pausieren, Fortsetzen und Stoppen der Sprachausgabe, sodass Benutzer*innen die volle Kontrolle über die Wiedergabe haben.
Mit der SpeechSynthesis Web API können Entwickler*innen innovative und interaktive Anwendungen erstellen, die die Benutzerfreundlichkeit und Zugänglichkeit von Webseiten verbessern.

Aber genug von der Theorie. Ab zum ersten Skript.

Schritt 1: HTML-Struktur erstellen

Zunächst müssen wir eine einfache HTML-Struktur für unsere Webseite erstellen. Hier ein Beispiel dafür:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;de&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;Text-to-Speech mit SpeechSynthesis Web API&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Text-to-Speech mit SpeechSynthesis Web API&lt;/h1&gt;
  &lt;textarea id=&quot;text-to-speak&quot; rows=&quot;4&quot; cols=&quot;50&quot; placeholder=&quot;Gib hier deinen Text ein...&quot;&gt;&lt;/textarea&gt;
  &lt;button id=&quot;speak-btn&quot;&gt;Sprich den Text&lt;/button&gt;
  &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Schritt 2: JavaScript-Datei erstellen

Erstelle eine JavaScript-Datei mit dem Namen app.js. Diese Datei wird später unseren Code für die Text-to-Speech-Funktion enthalten. Natürlich kannst du das JavaScript auch in der HTML-Datei eintragen. Aber lieber schon etwas früher beides trennen. Das macht es später einfacher.

Schritt 3: SpeechSynthesis API initialisieren

Öffne die app.js-Datei und füge den folgenden Code ein:

// DOM-Elemente auswählen
const textToSpeak = document.getElementById(&#039;text-to-speak&#039;);
const speakBtn = document.getElementById(&#039;speak-btn&#039;);

// SpeechSynthesis-Objekt erstellen
const synth = window.speechSynthesis;

// Funktion zum Vorlesen des Textes
function speakText() {
  // Neues SpeechSynthesisUtterance-Objekt erstellen
  const utterance = new SpeechSynthesisUtterance(textToSpeak.value);

  // Sprache festlegen (optional)
  utterance.lang = &#039;de-DE&#039;;

  // Text vorlesen
  synth.speak(utterance);
}

// Event Listener hinzufügen
speakBtn.addEventListener(&#039;click&#039;, speakText);

In diesem Codeabschnitt haben wir einige grundlegende Schritte unternommen:

Wir haben die DOM-Elemente text-to-speak und speak-btn ausgewählt.
Wir haben das speechSynthesis-Objekt aus dem globalen window-Objekt erstellt.
Wir haben eine speakText-Funktion definiert, die den eingegebenen Text vorliest.
Wir haben der Schaltfläche speak-btn einen Event Listener hinzugefügt, der die speakText-Funktion aufruft, wenn die Schaltfläche angeklickt wird.

Schritt 4: Testen der Text-to-Speech-Funktion

Jetzt ist es an der Zeit, unsere Text-to-Speech-Funktion zu testen. Öffne die HTML-Datei in einem Browser und gib einen Text in das Textfeld ein. Klicke auf die Schaltfläche "Sprich den Text", um die Text-to-Speech-Funktion zu testen. Du solltest hören, wie der eingegebene Text vorgelesen wird.

Fazit

Herzlichen Glückwunsch! Du hast erfolgreich eine Text-to-Speech-Funktion mit der SpeechSynthesis Web API in deine Website integriert. Diese API bietet viele weitere Möglichkeiten zur Anpassung der Sprachausgabe, wie z. B. die Auswahl verschiedener Stimmen oder die Anpassung der Geschwindigkeit und Tonhöhe. Du kannst damit experimentieren und die Funktion weiter an deine Bedürfnisse anpassen.

In diesem Tutorial haben wir die grundlegenden Schritte zum Einbinden der SpeechSynthesis Web API in eine Website mit JavaScript durchgeführt. Wir haben eine einfache Benutzeroberfläche erstellt, die es ermöglicht, einen Text einzugeben und diesen per Text-to-Speech-Funktion vorzulesen. Du kannst nun diese Basis nutzen, um weitere Anwendungen zu erkunden und deine Fähigkeiten in der Webentwicklung weiter zu verbessern.

Viel Spaß beim Experimentieren und Erweitern deiner Text-to-Speech-Funktion!