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

Eric Bidelman
Twitter GitHub Startseite

Die Web Speech API ergänzt JavaScript um Spracherkennung (Sprache zu Text) und Sprachsynthese (Spracherkennung). Der Beitrag behandelt Letzteres kurz, da die API vor Kurzem in Chrome 33 (für Mobilgeräte und Desktop-Computer) eingeführt wurde. Falls Sie sich für Spracherkennung interessieren, hat Glen Shires vor einiger Zeit eine interessante Anmerkung zur Spracherkennungsfunktion veröffentlicht: Voice Driven Web Apps: Introduction to the Web Speech API.

Grundlagen

Die grundlegendste 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 jedoch auch Parameter ändern, um Lautstärke, Sprechgeschwindigkeit, Tonlage, 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

Mit der API können Sie auch eine Liste der Stimmen abrufen, die die Engine unterstützt:

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 Äußerungsobjekt 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 bei der Google I/O 2013, More Awesome Web: features you've getting Want (www.moreawesomeweb.com), habe ich in einer Google Now/Siri-ähnlichen Demo gezeigt, wie der SpeechRecognition-Dienst der Web Speech API mit der Google Translate API verwendet werden kann, um Mikrofoneingaben automatisch in eine andere Sprache zu übersetzen:

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

Leider wurde eine nicht dokumentierte (und inoffizielle) API für die Sprachsynthese verwendet. Jetzt haben wir die vollständige Web Speech API, um die Übersetzung per Spracheingabe zu erstellen. Ich habe die Demo so aktualisiert, dass die Synthese API verwendet wird.

Unterstützte Browser

Chrome 33 bietet volle Unterstützung für die Web Speech API, Safari für iOS7 hingegen nur teilweise.

Funktionserkennung

Da Browser jeden Teil der Web Speech API separat unterstützen (z.B. bei Chromium), möchten Sie möglicherweise jede Funktion separat erkennen:

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

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