HTML5: Texte vorlesen lassen mit SpeechSynthesis

Was Navigationsgeräte schon lange können, können nun auch die Browser. SpeechSynthesis aus der Web-Speech-API erlaubt es, Texte mit einer menschlichen Sprechstimme auszugeben. Dabei stehen Stimmen für mehrere Sprachen zur Verfügung – teilweise auch mehrere Stimmen pro Sprache. Per Knopfdruck können sich deine Besucher den Text eines HTML-Dokumentes einfach vorlesen lassen.

SpeechSynthesis, also die Sprachsynthese, ist eine Technologie, mit der Anwendungen Text-Inhalte unter Verwendung einer menschlichen Stimme vorlesen können. Ebenfalls Teil der Web-Speech-API ist die SpeechRecognition, die Spracherkennung. Damit ist es möglich, asynchron Spracheingaben aufzunehmen und inhaltlich zu erkennen. So machten es Siri, Cortana, der Google Assistant und einige andere, nur eben nicht via Web, sondern nativ in der App oder dem Betriebssystem.

Ich konzentriere mich im folgenden Text aber auf SpeechSynthesis. Den Grund liest du ganz unten am Ende des Beitrags 😉

Vorleser mit Sprachen- und Stimmenvielfalt

SpeechSynthesis bringt natürlich nur dann etwas, wenn Ausgaben nicht nur in einer Sprache möglich sind. Die Zahl der verfügbaren Stimmen pro Sprache hingegen, ist da schon eher Geschmackssache, oder meinetwegen eine Frage der Gleichberechtigung.

Generell ist die Anzahl der zur Verfügung stehenden Sprachen und Stimmen abhängig vom Browser. Chrome unterstützt derzeit mehr als ein Dutzend Sprachen, darunter britisches und amerikanisches Englisch, Deutsch, Französisch, Spanisch und Italienisch, aber auch Russisch und Chinesisch. Es ist möglich, wenn auch zumeist wenig sinnvoll, beispielsweise einen deutschen Text mit französischer Stimme auszugeben. Dann wird der Text deutsch, mit französischem Akzent wiedergegeben.

So einfach startest du die Wiedergabe

Um einen Text sprechen zu lassen, muss zunächst eine neue Äußerung (utterance) erstellt werden. Damit der Browser weiß, in welcher Sprache die Äußerung wiedergegeben werden soll, kann entweder direkt einer der Stimmen per voice oder per lang-Eigenschaft die Sprache übergeben werden. Anschließend lässt man den Browser die Äußerung sprechen.

var worte = new SpeechSynthesisUtterance("Herzlich willkommen.");worte.lang = "de-DE";window.speechSynthesis.speak(worte);var worte = new SpeechSynthesisUtterance("Herzlich willkommen.");

Im Beispiel wird die Sprache auf Deutsch gesetzt. Da Sprachen teilweise – wie im Englischen – nach Land unterschieden werden, erfordert lang die Angabe einer Sprache einschließlich des Landes. So lässt sich zwischen amerikanischem en-US und britischem Englisch en-UK unterscheiden. Per Methode speak() wird der Text im Beispiel mit einer deutschen Stimme gesprochen.

var worte = new SpeechSynthesisUtterance("Herzlich willkommen.");var stimmen = window.speechSynthesis.getVoices();worte.voice = stimmen[6];window.speechSynthesis.speak(worte);

Im zweiten Beispiel wird statt einer Sprache direkt eine Stimme gewählt. Dazu werden per getVoices() alle zur Verfügung stehenden Stimmen abgerufen. Über die voice-Eigenschaft wird eine der Stimmen der Äußerung hinzugefügt. Stimme 6 entspricht der deutschen Stimme. Im Ergebnis unterscheiden sich die beiden Beispiele nicht voneinander.

So fragst du im Browser verfügbaren Stimmen ab

Sobald du per getVoices() auf die Stimmen des Browsers zugreifst, ist es wichtig, mit Event-Listenern zu arbeiten. Denn der Browser lädt die Stimmen nicht zusammen mit dem Dokument. Das heißt, es ist nicht möglich, getVoices() direkt beim Aufruf der Seite auszuführen. Wichtig ist, dass zunächst über den Event-Listener DOMContentLoaded eine Funktion geladen wird, die über eine if-Abfrage prüft, ob SpeechSynthesis bereits zur Verfügung steht, beziehungsweise ob sie überhaupt vom Browser unterstützt wird. Anschließend sollte die Sprachausgabe per click-Event aufgerufen werden.

window.addEventListener("DOMContentLoaded", function() {  if (window.speechSynthesis != undefined) {    document.getElementById("wiedergabe").addEventListener("click", function() {      var stimmen = window.speechSynthesis.getVoices();      for(var i = 0; i < stimmen.length; i++ ) {        console.log("Stimme " + i.toString() + " " + stimmen[i].name);      }    }, false)  }}, false)

Im Beispiel wird beim Klick auf das Element mit der ID wiedergabe eine Funktion ausgeführt, die alle Stimmen mit der internen Nummer und ihrem Namen in die Konsole schreibt. Die deutsche Stimme trägt im Chrome den Namen „Google Deutsch“.

Dieses nützliche Script, das ich auf Stack Overflow fand, listet dir die im jeweiligen Browser enthaltenen Stimmen, allerdings nur für den Browser, mit dem es aufgerufen wird.

So regelst du Stimmfrequenz und Geschwindigkeit

Neben den Stimmen für die einzelnen Sprachen gibt es auch eine Standardstimme, die für alle Sprachen funktioniert. Um das bestmöglich anzupassen, hat man die Möglichkeit, die Frequenz der verwendeten Stimme sowie die Sprechgeschwindigkeit zu definieren.

var worte = new SpeechSynthesisUtterance("Das geht schneller und höher.");var stimmen = window.speechSynthesis.getVoices();worte.voice = stimmen[10];worte.pitch = 4;worte.rate = 10;window.speechSynthesis.speak(worte);

Die Eigenschaft pitch bestimmt die Stimmfrequenz. Erlaubt ist ein Wert zwischen 0 und 2, wobei der Wert 1 der normalen Frequenz der Stimme entspricht. Alles unterhalb von 1 führt zu einer niedrigeren Frequenz, alles darüber zu einer höheren.

Mit rate wird die Sprechgeschwindigkeit geregelt. Erlaubt sind hierbei Werte zwischen 0.1 und 10, wobei der Wert 1 für die normale Sprechgeschwindigkeit steht. Werte darunter sorgen dafür, dass sehr langsam gesprochen wird. Werte über 1 sorgen für eine entsprechend schnellere Sprachwiedergabe.

Der Nachteil dieser Standardstimme ist, dass sie im Vergleich zu den anderen Stimmen wesentlich synthetischer klingt. Die eigens für die einzelnen Sprachen verfügbaren Stimmen wirken deutlich natürlicher.

Sprachausgabe steuern

Neben der Methode speak(), welche die Sprachausgabe beginnt, lässt sich mit pause() die Wiedergabe anhalten. Mit der Methode resume() wird eine zuvor angehaltene Wiedergabe fortgesetzt.

document.getElementById("pause").addEventListener("click", function() {  window.speechSynthesis.pause();}, false);

Über volume wird die Lautstärke der Wiedergabe gesteuert. Erlaubt sind Werte zwischen 0 und 1. Außerdem gibt es mehrere Event-Listener, mit denen Funktionen beispielsweise beim Start und beim Beenden der Sprachausgabe ausgeführt werden können.

worte.addEventListener("start", function() {  document.title = "Hören Sie zu …";}, false);worte.addEventListener("end", function() {  document.title = "… vorbei.";}, false);

Startet man mehrere Sprachausgaben gleichzeitig oder beginnt eine Ausgabe, während eine andere noch in der Wiedergabe ist, werden die einzelnen per speak() initiierten Sprachausgaben nacheinander abgearbeitet. Über die Eigenschaft pending fragst du ab, ob noch Instanzen von speechSynthesis in der Warteschlange sind. Die Eigenschaft gibt entweder true oder false aus. Mit speaking kann zudem festgestellt werden, ob aktuell eine Sprachwiedergabe stattfindet.

Browserunterstützung

Obschon es sich bei SpeechSynthesis immer noch um ein als experimentell gekennzeichnetes Feature handelt, ist die Browserunterstützung durchaus gut. Einschränkungen gibt es lediglich hinsichtlich einiger Funktionen im Opera und Safari für den Desktop. Opera für Android unterstützt die API gar nicht, ist allerdings auch ein eher unbedeutenderer Vertreter im Browser-Game. SpeechRecognition wird derzeit nur von Chrome voll unterstützt und ist damit derzeit noch nicht ernsthaft für den Einsatz zu erwägen.

Beitragsbild: Depositphotos

(Der Beitrag erschien erstmals im Juli 2014 und wird seitdem aktuell gehalten. Das letzte Update erfolgte im April 2019.)