Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 8. April 2019

HTML5: Texte vorlesen lassen mit SpeechSynthesis

Was Navigationsgeräte schon lan­ge kön­nen, kön­nen nun auch die Browser. SpeechSynthesis aus der Web-Speech-API erlaubt es, Texte mit einer mensch­li­chen Sprechstimme aus­zu­ge­ben. Dabei ste­hen Stimmen für meh­re­re Sprachen zur Verfügung – teil­wei­se auch meh­re­re Stimmen pro Sprache. Per Knopfdruck kön­nen sich dei­ne Besucher den Text eines HTML-Dokumentes ein­fach vor­le­sen las­sen.

SpeechSynthesis, also die Sprachsynthese, ist eine Technologie, mit der Anwendungen Text-Inhalte unter Verwendung einer mensch­li­chen Stimme vor­le­sen kön­nen. Ebenfalls Teil der Web-Speech-API ist die SpeechRecognition, die Spracherkennung. Damit ist es mög­lich, asyn­chron Spracheingaben auf­zu­neh­men und inhalt­lich zu erken­nen. So mach­ten es Siri, Cortana, der Google Assistant und eini­ge ande­re, nur eben nicht via Web, son­dern nativ in der App oder dem Betriebssystem.

Ich kon­zen­trie­re mich im fol­gen­den Text aber auf SpeechSynthesis. Den Grund liest du ganz unten am Ende des Beitrags ;)

speechsynthesis

Vorleser mit Sprachen- und Stimmenvielfalt

SpeechSynthesis bringt natür­lich nur dann etwas, wenn Ausgaben nicht nur in einer Sprache mög­lich sind. Die Zahl der ver­füg­ba­ren Stimmen pro Sprache hin­ge­gen, ist da schon eher Geschmackssache, oder mei­net­we­gen eine Frage der Gleichberechtigung.

Generell ist die Anzahl der zur Verfügung ste­hen­den Sprachen und Stimmen abhän­gig vom Browser. Chrome unter­stützt der­zeit mehr als ein Dutzend Sprachen, dar­un­ter bri­ti­sches und ame­ri­ka­ni­sches Englisch, Deutsch, Französisch, Spanisch und Italienisch, aber auch Russisch und Chinesisch. Es ist mög­lich, wenn auch zumeist wenig sinn­voll, bei­spiels­wei­se einen deut­schen Text mit fran­zö­si­scher Stimme aus­zu­ge­ben. Dann wird der Text deutsch, mit fran­zö­si­schem Akzent wie­der­ge­ge­ben.

So einfach startest du die Wiedergabe

Um einen Text spre­chen zu las­sen, muss zunächst eine neue Äußerung (utter­an­ce) erstellt wer­den. Damit der Browser weiß, in wel­cher Sprache die Äußerung wie­der­ge­ge­ben wer­den soll, kann ent­we­der direkt einer der Stimmen per voice oder per lang-Eigenschaft die Sprache über­ge­ben wer­den. Anschließend lässt man den Browser die Äußerung spre­chen.

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 teil­wei­se – wie im Englischen – nach Land unter­schie­den wer­den, erfor­dert lang die Angabe einer Sprache ein­schließ­lich des Landes. So lässt sich zwi­schen ame­ri­ka­ni­schem en-US und bri­ti­schem Englisch en-UK unter­schei­den. Per Methode speak() wird der Text im Beispiel mit einer deut­schen Stimme gespro­chen.

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

Im zwei­ten Beispiel wird statt einer Sprache direkt eine Stimme gewählt. Dazu wer­den per getVoices() alle zur Verfügung ste­hen­den Stimmen abge­ru­fen. Über die voice-Eigenschaft wird eine der Stimmen der Äußerung hin­zu­ge­fügt. Stimme 6 ent­spricht der deut­schen Stimme. Im Ergebnis unter­schei­den sich die bei­den Beispiele nicht von­ein­an­der.

So fragst du im Browser verfügbaren Stimmen ab

Sobald du per getVoices() auf die Stimmen des Browsers zugreifst, ist es wich­tig, mit Event-Listenern zu arbei­ten. Denn der Browser lädt die Stimmen nicht zusam­men mit dem Dokument. Das heißt, es ist nicht mög­lich, getVoices() direkt beim Aufruf der Seite aus­zu­füh­ren. Wichtig ist, dass zunächst über den Event-Listener DOMContentLoaded eine Funktion gela­den wird, die über eine if-Abfrage prüft, ob SpeechSynthesis bereits zur Verfügung steht, bezie­hungs­wei­se ob sie über­haupt vom Browser unter­stützt wird. Anschließend soll­te die Sprachausgabe per click-Event auf­ge­ru­fen wer­den.

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 wie­der­ga­be eine Funktion aus­ge­führt, die alle Stimmen mit der inter­nen Nummer und ihrem Namen in die Konsole schreibt. Die deut­sche Stimme trägt im Chrome den Namen „Google Deutsch“.

Dieses nütz­li­che Script, das ich auf Stack Overflow fand, lis­tet dir die im jewei­li­gen Browser ent­hal­te­nen Stimmen, aller­dings nur für den Browser, mit dem es auf­ge­ru­fen wird.

So regelst du Stimmfrequenz und Geschwindigkeit

Neben den Stimmen für die ein­zel­nen Sprachen gibt es auch eine Standardstimme, die für alle Sprachen funk­tio­niert. Um das best­mög­lich anzu­pas­sen, hat man die Möglichkeit, die Frequenz der ver­wen­de­ten Stimme sowie die Sprechgeschwindigkeit zu defi­nie­ren.

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 zwi­schen 0 und 2, wobei der Wert 1 der nor­ma­len Frequenz der Stimme ent­spricht. Alles unter­halb von 1 führt zu einer nied­ri­ge­ren Frequenz, alles dar­über zu einer höhe­ren.

Mit rate wird die Sprechgeschwindigkeit gere­gelt. Erlaubt sind hier­bei Werte zwi­schen 0.1 und 10, wobei der Wert 1 für die nor­ma­le Sprechgeschwindigkeit steht. Werte dar­un­ter sor­gen dafür, dass sehr lang­sam gespro­chen wird. Werte über 1 sor­gen für eine ent­spre­chend schnel­le­re Sprachwiedergabe.

Der Nachteil die­ser Standardstimme ist, dass sie im Vergleich zu den ande­ren Stimmen wesent­lich syn­the­ti­scher klingt. Die eigens für die ein­zel­nen Sprachen ver­füg­ba­ren Stimmen wir­ken deut­lich natür­li­cher.

Sprachausgabe steuern

Neben der Methode speak(), wel­che die Sprachausgabe beginnt, lässt sich mit pau­se() die Wiedergabe anhal­ten. Mit der Methode resu­me() wird eine zuvor ange­hal­te­ne Wiedergabe fort­ge­setzt.

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

Über volu­me wird die Lautstärke der Wiedergabe gesteu­ert. Erlaubt sind Werte zwi­schen 0 und 1. Außerdem gibt es meh­re­re Event-Listener, mit denen Funktionen bei­spiels­wei­se beim Start und beim Beenden der Sprachausgabe aus­ge­führt wer­den kön­nen.

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

worte.addEventListener("end", function() {
  document.title = "… vorbei.";
}, false);

Startet man meh­re­re Sprachausgaben gleich­zei­tig oder beginnt eine Ausgabe, wäh­rend eine ande­re noch in der Wiedergabe ist, wer­den die ein­zel­nen per speak() initi­ier­ten Sprachausgaben nach­ein­an­der abge­ar­bei­tet. Über die Eigenschaft pen­ding fragst du ab, ob noch Instanzen von speechSynthesis in der Warteschlange sind. Die Eigenschaft gibt ent­we­der true oder fal­se aus. Mit speaking kann zudem fest­ge­stellt wer­den, ob aktu­ell eine Sprachwiedergabe statt­fin­det.

Browserunterstützung

Obschon es sich bei SpeechSynthesis immer noch um ein als expe­ri­men­tell gekenn­zeich­ne­tes Feature han­delt, ist die Browserunterstützung durch­aus gut. Einschränkungen gibt es ledig­lich hin­sicht­lich eini­ger Funktionen im Opera und Safari für den Desktop. Opera für Android unter­stützt die API gar nicht, ist aller­dings auch ein eher unbe­deu­ten­de­rer Vertreter im Browser-Game. SpeechRecognition wird der­zeit nur von Chrome voll unter­stützt und ist damit der­zeit noch nicht ernst­haft für den Einsatz zu erwä­gen.

Beitragsbild: Depositphotos

(Der Beitrag erschien erst­mals im Juli 2014 und wird seit­dem aktu­ell gehal­ten. Das letz­te Update erfolg­te im April 2019.)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

6 Kommentare

  1. … so lang­sam wird es doch. Eine Frage: Wie kann man “Atempausen” oder Betonung am Satzende direkt im vor­zu­le­sen­den Text beein­flus­sen?

  2. Hallo Felix, hier gibt es eine ziem­lich aus­ge­reif­te Demo auf codepen.io
    http://codepen.io/matt-west/full/wGzuJ

    Liebe Grüße
    Jens

  3. Klingt ziem­lich inter­es­sant. Wenn die Speech-Synthesis-API von allen gän­gi­gen Browsern unter­stützt wird, wäre ja die Grundlage für einen JavaScript-basier­ten Text-Reader geschaf­fen, der dann Artikel, Blog-Beiträge und alle ande­ren Webinhalte vor­le­sen könn­te.

    So etwas gibt es von der Funktionalität her zwar brei­tes schon, z.B. mit dem Voice Reader Web von Linguatec. Allerdings basiert die­se Anwendung auf Flash, berech­net die Stimme nicht im Browser son­dern sen­det eine Audio-Datei die vor­her auf dem Server berech­net wur­de, und zudem kos­tet das Programm auch noch Geld für den Webseiten-Betreiber .

    Hierzu könn­te die Speech-Synthesis-API eine super Alternative bie­ten, die völ­lig kos­ten­frei ist, kein Flash-Player benö­tigt, und zudem auch kei­ne Audio-Dateien vom Server anfor­dern, berech­nen las­sen und her­un­ter­la­den muss.

  4. Ziemlich inter­es­sant! Gibt es irgend­wo eine online-Demo?

Schreibe einen Kommentar zu holger Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.