Sprachausgabe im Browser (TTS)

 10.07.2020 -  Sebastian Pech -  ~2 Minuten

Mit dem experimentiellen Modul SpeechSynthesis der Web Speech API lässt sich eine Sprachausgabe in modernen Browsern erzeugen. Bis auf den Internet Explorer unterstützen dabei alle Browser diese Funktion. Google Chrome bietet jedoch die besten künstlichen Stimmen. Diese Technik nutze ich auf meiner Webseite FitTeller zum Vorlesen eines Trainingsplans.

Sprachen ermitteln

Auf dem window Objekt lässt sich das speechSynthesis Modul nutzen. Die Methode getVoices() gibt eine Liste aller unterstützen Sprachausgaben bzw. Stimmen aus. Mit dem folgenden Code können in Debugger des Browsers (Strg + Shift + i oder Weitere Tools -> Entwicklertools) beispielsweise alle Stimmen analysiert werden.

synth = window.speechSynthesis;
voices = synth.getVoices();
voices;

Die Ausgabe von voices sieht beispielsweise wie folgt aus. Die Eigenschaft default: true definiert die Sprachausgabe die standardmäßig aktiv ist.

0: SpeechSynthesisVoice {voiceURI: "Microsoft Hedda Desktop - German", name: "Microsoft Hedda Desktop - German", lang: "de-DE", localService: true, default: true}
1: SpeechSynthesisVoice {voiceURI: "Microsoft Zira Desktop - English (United States)", name: "Microsoft Zira Desktop - English (United States)", lang: "en-US", localService: true, default: false}
2: SpeechSynthesisVoice {voiceURI: "Google Deutsch", name: "Google Deutsch", lang: "de-DE", localService: false, default: false}
3: SpeechSynthesisVoice {voiceURI: "Google US English", name: "Google US English", lang: "en-US", localService: false, default: false}

Sprachausgabe setzen und anpassen

Nun muss eine Instanz von SpeechSynthesisUtterance zur Sprachausgabe erstellt werden. Als Parameter an den Konstruktor zum Erstellen der Klasse ist der Text der gesprochen werden soll mitzugeben. Das Setzen des Property voice auf einen Eintrag aus der Stimmenliste ändert die Sprachausgabe.

utterance = new SpeechSynthesisUtterance('Hallo Du. Viele Grüße von Sebastian.');
// Optional die Stimme ändern
utterance.voice = voices[2]; // Google Deutsch
synth.speak(utterance);

Die Eigenschaften pitch und rate geben die Tonhöhe und die Geschwindigkeit an. Pitch umfasst den Bereich von 0 bis 2.0 mit einem Startwert von 1.0. Die Geschwindigkeit liegt zwischen 0.1 und 10. Nicht alle Stimmen unterstützen jedoch in beiden Eigenschaften die höheren Werte. Es kann also passieren das keine Sprachausgabe zu hören ist.

utterance = new SpeechSynthesisUtterance('Hallo Du. Viele Grüße von Sebastian.');
// Optional die Stimme ändern
utterance.voice = voices[2]; // Google Deutsch
utterance.pitch = 1.1;
utterance.rate = 1.5;
synth.speak(utterance);

Eine vollständige Demo zur Sprachausgabe gibt es im MDN .

Bildquelle: Gerd Altmann auf Pixabay .