Wer jetzt an Wiedergabe von MP3 oder Wav Files denkt, ist schon auf der falschen Fährte, denn hier geht es heute wirklich um Webseiten, die Texte vorlesen oder mit dem Benutzer sprechen können.
Kleine Einschränkung
Auch wenn es technisch schon möglich ist, das Webseiten Sprache versehen, geht es hier in dem Artikel nur um die Ausgabe von Sprache mit der „Speech Synthesis API“.
Sprachausgabe von Webseiten
Die Tatsache, dass der Browser mittlerweile über Lautsprecher und Mikrofon (falls vorhanden) mit dem Nutzer interagieren kann. Das bringt viele neue Möglichkeiten mit sich. So können z.B. Suchbegriffe nicht mehr nur eingegeben sondern direkt gesprochen werden.
So gesehen in der aktuellen Suchmaschine „quant“ (http://en.wikipedia.org/wiki/Qwant).
Das ist natürlich besonders interessant für Mobile Endgeräte ohne eine „echte“ Tastatur. Schnell den Suchbegriff sagen statt tippen. Siri kann das schon seit Jahren und nun kommt die Funktion direkt in den Browser.
Auf der anderen Seite gibt es die Möglichkeit, Inhalte auf der Webseite vom Browser vorlesen zu lassen. Heise.de hat z.B. schon 2012 den ReadSpeaker Text-to-Speech-Service integriert, um den Besucher die Möglichkeit zu geben, sich die Webseite vorlesen zu lassen. Allerdings ist dieser Service kostenpflichtig und nicht für jeden Webmaster erschwinglich.
Auf die unterschiedlichen Anwendungsfälle und Motivationen diese API zu nutzen (Analphabeten, Blinde, kleine Kinder, etc.) möchte ich gar nicht eingehen. Was mich viel mehr interessiert ist die Technische Basis. Und los geht’s.
Die Speech Synthesis API
Die W3C Web Speech API Specification vom 19. Oktober 2012 kann detailliert unterhttps://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html nachgelesen werden. Allerdings sind viele der Informationen davon für den „durchschnittlichen Entwickler“ nicht nötig. Was man wirklich braucht, ist eine einfache Möglichkeit, Text abzuspielen. Folgende Funktionen sind für den Anfang sinnvoll:
- Play Text-to-Speech (TTS)
- Stop Text-to-Speech (TTS)
- Pause Text-to-Speech (TTS)
- Resume Text-to-Speech (TTS)
Damit kann man vermutlich 90% der Anwendungsfälle abdecken. Daher hier ein einfaches Beispiel, das genau diese Funktionen abdeckt.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
/* Ein wenig Styling */
.hidden { display: none; }
.button-demo { padding: 0.5em; display: inline-block; margin: 1em auto; }
</style>
</head>
<body>
<!-- Das HTML Formular mit dem Eingabefeld und den 4 Buttons -->
<form action="" method="get">
<textarea id="text" rows="3" cols="30"></textarea>
<div>
<button id="button-speak">Speak</button>
<button id="button-stop">Stop</button>
<button id="button-pause">Pause</button>
<button id="button-resume">Resume</button>
</div>
</form>
<!-- Leider kann das auch passieren. Nich jeder Browser unterstützt die Speech Synthesis API -->
<span id="ss-unsupported">Speech Synthesis API not supported</span>
<!-- Der JavaScript Code für die Text-to-Speech Funktionen -->
<script>
if (window.SpeechSynthesisUtterance === undefined) {
document.getElementById('ss-unsupported').classList.remove('hidden');
[ 'button-speak', 'button-stop', 'button-pause', 'button-resume' ]
.forEach(function(elementId) {
document.getElementById(elementId).setAttribute('disabled', 'disabled');
});
} else {
var text = document.getElementById('text');
document.getElementById('button-speak').addEventListener('click',
function(event) {
event.preventDefault();
var utterance = new SpeechSynthesisUtterance();
utterance.text = text.value;
utterance.lang = "de-DE";
utterance.rate = 1;
utterance.pitch = 1;
utterance.onstart = function() {
// Wird aufgerufen, wenn die Text-To-Speach Ausgabe startet
};
utterance.onend = function() {
// Wird aufgerufen, wenn die Text-To-Speach Ausgabe endet
};
window.speechSynthesis.speak(utterance);
});
document.getElementById('button-stop').addEventListener('click',
function(event) {
event.preventDefault();
window.speechSynthesis.cancel();
});
document.getElementById('button-pause').addEventListener('click',
function(event) {
event.preventDefault();
window.speechSynthesis.pause();
});
document.getElementById('button-resume').addEventListener('click',
function(event) {
event.preventDefault();
if (window.speechSynthesis.paused === true) {
window.speechSynthesis.resume();
} else {
// Hier geht das nicht!
}
});
}
</script>
</body>
</html>
Unterschiedliche Sprachen
Dieses einfache Beispiel ist alles was man braucht, um einen Text von einer Webseite in deutscher Sprache auszugeben. Natürlich sind auch andere Sprachen denkbar. Mit Hilfe einer einfachen Funktion kann man die vom Browser unterstützten Sprachen abfragen.
window.speechSynthesis.getVoices();
Damit lassen sich dann auch noch eine Reihe anderer Sprachen ausgeben. Hier die Liste der verfügbaren Srachen in Google Chrome Version 33.
- en-US Google US English (default)
- en-GB Google UK English Male
- en-GB Google UK English Female
- es-ES Google Español
- fr-FR Google Français
- it-IT Google Italiano
- de-DE Google Deutsch
- ja-JP Google Japanese
- ko-KR Google Korean
- zh-CN Google Chinese
Browser Support
Die Speech Synthesis API wird stand heute (04.03.2014) wohl nur von Chrome 33 und Safari unterstützt. Ich bin mir aber sicher, dass Firefox und Internet Explorer schnell nachziehen und sich hier nicht ins Abseits drängen lassen.
Demo
Hier kann man das obige Beispiel einfach mal selber probieren:
https://text-to-speech.jentsch.io/
Fazit
Die Speech Synthesis API liefert sehr gute Ergebnisse und man kann der deutschen Stimme gut folgen. Allerdings sollte man auf jeden Fall die Umlaute vorher umwandeln, da die Speech Synthesis API mit den Sonderzeichen ä,ö,ü und ß noch erste Probleme hat und man den Browser neu starten muss, bevor er wieder spricht.