Skip to content

Sprachausgabe im Browser: Das Speech Synthesis API

Die neuesten Browser-Versionen von Googles Chrome (seit Version 33) und Apples Safari (seit Version 7, hier eine Übersicht der Browser-Kompatibilität) unterstützen das Speech Synthesis API. Dabei handelt es sich um ein Web API zur Sprachsynthese. Das heißt grob: Der Browser kann Texte mit einer menschlichen Stimme vorlesen.

Google Chrome hat aktuell zehn Sprechstimmen in neun Sprachen integriert: Neben einer britischen Frauen- und einer britischen Männerstimme, jeweils eine Frauenstimme, die amerikanisches Englich, Spanisch, Französisch, Italienisch, Deutsch, Japanisch, Koreanisch und Chinesisch spricht. Eine Liste der angebotenen Stimmen gibt die Methode getVoices() zurück.

window.speechSynthesis.getVoices();

Update: Rene Kriest hat mich darauf hingewiesen, dass die getVoices()-Methode asynchron funktioniert, und auch gleich ein Code-Beispiel geliefert.

Hallo Welt

Soll ein Text als gesprochen Sprache ausgegeben werden, muss zunächst eine "Äußerung" (utterance) erstellt werden. Dieses Objekt kann über weitere Eigenschaften konfiguriert werden, beispielsweise wird hier die Sprache gesetzt:

var hallo = new SpeechSynthesisUtterance("Hallo Welt.");
hallo.lang = "de-DE";
window.speechSynthesis.speak(hallo);

Die Stimmfrequenz lässt sich über die Eigenschaft pitch regeln, die Sprechgeschwindigkeit über rate, und die Lautstärke über volume. Über die Eigenschaft voice kann auch eine andere Stimme festgelegt werden, bei der aktuellen Auswahl reicht in der Regel aber die Festlegung über lang. Bei meinen Versuchen konnte ich (in Chrome 36 unter Linux) allerdings weder die Höhe noch die Geschwindigkeit der Stimme verändern, die Eigenschaften blieben folgenlos:

var hello = new SpeechSynthesisUtterance("Hello world, I am reading an english text.");
hello.lang = "en-US";
hello.volume = 1; // 0 bis 1
hello.pitch = 2; // 0 bis 2
hello.rate = 5; // 0.1  bis 10
window.speechSynthesis.speak(hello);

Play, Pause, Stop

Die Sprachausgabe lässt sich nicht nur mit der Methode speak() starten, sondern auch pausieren (pause()) und wieder fortsetzen (resume()). Entsprechend lässt sich auch der Zustand der Sprachausgabe über die Eigenschaften speaking, paused und pending abfragen. Mehrere Ausgaben werden nicht gleichzeitig, sondern immer nacheinander abgespielt. Komplett abbrechen lässt sich die Ausgabe über cancel(). Hier ist etwas Ausprobieren gefragt, eher unzuverlässig haben bei mir vor allem pause() und resume() funktioniert.

Browsersupport

Bislang unterstützen nur Chrome und Safari die Sprachausgabe im Browser. Mozilla arbeitet aber offenbar daran, das Feature auch im Firefox unterzubringen. Ob ein Browser die Speech Synthesis API unterstützt, lässt sich folgendermaßen feststellen:

if ('speechSynthesis' in window) {
 // Speech Synthesis API supported.
}

Weiterführendes

Eine kurze deutsche Einführung in das Speech Synthesis API hat Denis Potschien für Dr. Web verfasst. Matt West hat zu seiner englischsprachigen Einführung "Getting Started with the Speech Synthesis API" auch eine Demo erstellt, mit der sich die Sprachwiedergabe ausprobieren lässt. Und schließlich weist Eric Bidelman auf HTML5Rocks auf den "hörenden" Teil der Web Speech API hin, das Speech Recognition API. Was sich damit anstellen lässt, nehme ich vielleicht bald auch einmal unter die Lupe.

Und natürlich kam mir auch die Idee, ein Sprach-Plugin für Serendipity zu schreiben, das einzelne Artikel eines Blogs vorlesen kann. Das Ergebnis dürfte bei Blogposts, die viel Quelltext enthalten, wahrscheinlich eher unbefriedigend ausfallen, aber vielleicht kann man Codezeilen auch einfach filtern. Was haltet ihr von einer Vorlese-Option mit synthetischer Stimme im Blog?

Trackbacks

Keine Trackbacks

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

matthias am :

matthias

unter Safari 7.0.6 funktioniert die Geschwindigkeitssteuerung einwandfrei :-)

Liebe Grüße. Matthias

Matthias Gutjahr am :

Auf Twitter lesen: mattsches
Matthias Gutjahr

Danke, gut zu wissen, auch wenn es mir leider nichts bringt ;-) Es scheint an der einen oder anderen Ecke noch zu haken, aber das wird bestimmt noch.

Christian Münch am :

Christian Münch

Sehr lustig. Im Chrome funktioniert das tadellos. Die Qualität ist erstaunlich gut.

Matthias Gutjahr am :

Auf Twitter lesen: mattsches
Matthias Gutjahr

Ich habe es gerade im mobilen Chrome auf dem Android-Tablet ausprobiert, da klappt alles einwandfrei. Keine Ahnung, warum das unter Linux bei mir nicht so gut läuft. Vielleicht liegt es an einer der vielen Extensions, die ich installiert habe.

Kommentar schreiben

Markdown-Formatierung erlaubt
Wenn Du Deinen Twitter Namen eingibst wird Deine Timeline in Deinem Kommentar verlinkt.
Bewirb einen Deiner letzten Artikel
Dieses Blog erlaubt Dir mit Deinem Kommentar einen Deiner letzten Artikel zu bewerben. Bitte gib Deine Blog URL als Homepage ein, dann wird eine Auswahl erscheinen, in der Du einen Artikel auswählen kannst. (Javascript erforderlich)
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Formular-Optionen

Kommentare werden erst nach redaktioneller Prüfung freigeschaltet!