Web-Apps, die miteinander sprechen – Einführung in die Speech Synthesis API

Die Web Speech API fügt JavaScript Spracherkennung (Sprache-zu-Text) und Sprachsynthese (Text-zu-Sprache) hinzu. Letzteres wird im Artikel kurz behandelt, da die API vor Kurzem in Chrome 33 (für Mobilgeräte und Computer) eingeführt wurde. Wenn Sie sich für die Spracherkennung interessieren, hat Glen Shires vor einiger Zeit einen großartigen Artikel über die Spracherkennungsfunktion veröffentlicht: Voice Driven Web Apps: Introduction to the Web Speech API (Sprachgesteuerte Webanwendungen: Einführung in die Web Speech API).

Grundlagen

Die einfachste Verwendung der Synthese-API besteht darin, speechSynthesis.speak() und die Äußerung zu übergeben:

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

Sie können auch Parameter ändern, um die Lautstärke, Sprechgeschwindigkeit, Tonhöhe, Stimme und Sprache zu beeinflussen:

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';

msg.onend = function(e) {
    console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

speechSynthesis.speak(msg);

Stimme festlegen

Über die API können Sie auch eine Liste der von der Engine unterstützten Stimmen abrufen:

speechSynthesis.getVoices().forEach(function(voice) {
    console.log(voice.name, voice.default ? voice.default :'');
});

Legen Sie dann eine andere Stimme fest, indem Sie .voice für das Sprachobjekt festlegen:

var msg = new SpeechSynthesisUtterance('I see dead people!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
speechSynthesis.speak(msg);

Demo

In meinem Vortrag auf der Google I/O 2013 mit dem Titel More Awesome Web: features you've always wanted (www.moreawesomeweb.com) habe ich eine Google Now-/Siri-ähnliche Demo gezeigt, bei der der SpeechRecognition-Dienst der Web Speech API mit der Google Translate API verwendet wurde, um Mikrofoneingaben automatisch in eine andere Sprache zu übersetzen:

DEMO: http://www.moreawesomeweb.com/demos/speech_translate.html

Leider wurde für die Sprachsynthese eine nicht dokumentierte (und inoffizielle) API verwendet. Jetzt haben wir die vollständige Web Speech API, um die Übersetzung vorzulesen. Ich habe die Demo so aktualisiert, dass sie die Synthesis API verwendet.

Unterstützte Browser

Chrome 33 unterstützt die Web Speech API vollständig, während Safari für iOS 7 sie nur teilweise unterstützt.

Funktionserkennung

Da Browser die einzelnen Teile der Web Speech API möglicherweise separat unterstützen (z.B. Chromium), sollten Sie die einzelnen Funktionen separat erkennen:

if ('speechSynthesis' in window) {
    // Synthesis support. Make your web apps talk!
}

if ('SpeechRecognition' in window) {
    // Speech recognition support. Talk to your apps!
}