Mit der neuen JavaScript-Web Speech API können Sie Ihren Webseiten ganz einfach Spracherkennung hinzufügen. Diese API ermöglicht eine detaillierte Steuerung und Flexibilität bei den Spracherkennungsfunktionen in Chrome-Version 25 und höher. Hier ein Beispiel, bei dem der erkannte Text fast sofort während des Sprechens angezeigt wird.
Sehen wir uns das genauer an. Zuerst prüfen wir, ob der Browser die Web Speech API unterstützt, indem wir prüfen, ob das webkitSpeechRecognition-Objekt vorhanden ist. Andernfalls empfehlen wir dem Nutzer, seinen Browser zu aktualisieren. Da sich die API noch in der Testphase befindet, hat sie derzeit ein Anbieterpräfix. Als Letztes erstellen wir das webkitSpeechRecognition-Objekt, das die Sprachschnittstelle bereitstellt, und legen einige seiner Attribute und Ereignishandler fest.
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
...
Der Standardwert für continuous ist „falsch“. Das bedeutet, dass die Spracherkennung beendet wird, wenn der Nutzer aufhört zu sprechen. Dieser Modus eignet sich hervorragend für einfachen Text wie kurze Eingabefelder. In dieser Demo haben wir sie auf „wahr“ gesetzt, damit die Erkennung fortgesetzt wird, auch wenn der Nutzer beim Sprechen innehält.
Der Standardwert für interimResults ist „false“. Das bedeutet, dass die vom Erkennungsmodul zurückgegebenen Ergebnisse endgültig sind und sich nicht ändern. In der Demo ist es auf „wahr“ gesetzt, damit wir frühzeitig Zwischenergebnisse erhalten, die sich noch ändern können. Sehen Sie sich die Demo genau an. Der graue Text ist vorläufig und ändert sich manchmal. Der schwarze Text sind Antworten des Erkennungsprogramms, die als endgültig gekennzeichnet sind und sich nicht ändern.
Zuerst klickt der Nutzer auf die Mikrofonschaltfläche, wodurch dieser Code ausgelöst wird:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Wir legen die gesprochene Sprache für den Spracherkennungsdienst „lang“ auf den BCP-47-Wert fest, den der Nutzer über das Drop-down-Menü ausgewählt hat, z. B. „en-US“ für Englisch (USA). Wenn dies nicht festgelegt ist, wird standardmäßig die Sprache des Stammelements und der Hierarchie des HTML-Dokuments verwendet. Die Spracherkennung in Chrome unterstützt zahlreiche Sprachen (siehe Tabelle „langs“ in der Demoquelle) sowie einige rechtsläufige Sprachen, die in dieser Demo nicht enthalten sind, z. B. he-IL und ar-EG.
Nachdem die Sprache festgelegt wurde, wird recognition.start() aufgerufen, um die Spracherkennung zu aktivieren. Sobald die Audioaufnahme beginnt, wird der Ereignis-Handler onstart aufgerufen. Für jeden neuen Ergebnissatz wird dann der Ereignis-Handler onresult aufgerufen.
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
Dieser Handler verknüpft alle bisher empfangenen Ergebnisse zu zwei Strings: final_transcript und interim_transcript. Die resultierenden Strings können „\n“ enthalten, z. B. wenn der Nutzer „neuer Absatz“ sagt. Daher verwenden wir die Funktion linebreak, um diese in die HTML-Tags <br> oder <p> umzuwandeln. Schließlich werden diese Strings als innerHTML der entsprechenden <span>-Elemente festgelegt: final_span mit schwarzem Text und interim_span mit grauem Text.
interim_transcript ist eine lokale Variable, die jedes Mal vollständig neu erstellt wird, wenn dieses Ereignis aufgerufen wird. Es ist möglich, dass sich alle Zwischenergebnisse seit dem letzten onresult-Ereignis geändert haben. Das Gleiche könnten wir auch für final_transcript tun, indem wir die For-Schleife einfach bei 0 beginnen lassen. Da sich der endgültige Text jedoch nie ändert, haben wir den Code hier etwas effizienter gestaltet, indem wir final_transcript zu einer globalen Variablen gemacht haben. So kann dieses Ereignis die For-Schleife bei event.resultIndex starten und nur neuen endgültigen Text anhängen.
Geschafft! Der Rest des Codes dient nur dazu, dass alles schön aussieht. Es verwaltet den Status, zeigt dem Nutzer einige informative Nachrichten an und wechselt das GIF-Bild auf der Mikrofonschaltfläche zwischen dem statischen Mikrofon, dem Bild mit dem durchgestrichenen Mikrofon und dem animierten Mikrofon mit dem pulsierenden roten Punkt.
Das Mikrofon-Schrägstrich-Bild wird angezeigt, wenn recognition.start() aufgerufen wird, und durch „Mikrofon-animieren“, wenn onstart ausgelöst wird. Normalerweise geschieht dies so schnell, dass der Schrägstrich nicht zu sehen ist. Wenn die Spracherkennung jedoch zum ersten Mal verwendet wird, muss Chrome den Nutzer um Erlaubnis zur Verwendung des Mikrofons bitten. In diesem Fall wird onstart nur ausgelöst, wenn der Nutzer die Erlaubnis erteilt. Bei HTTPS-gehosteten Seiten muss nicht wiederholt um Erlaubnis gebeten werden, bei HTTP-gehosteten Seiten hingegen schon.
Machen Sie Ihre Webseiten lebendig, indem Sie ihnen die Möglichkeit geben, Ihren Nutzern zuzuhören.
Wir freuen uns über dein Feedback…
- Kommentare zur W3C Web Speech API-Spezifikation: E-Mail, Mailingarchiv, Community-Gruppe
- Kommentare zur Implementierung dieser Spezifikation in Chrome: E-Mail, Mailingarchiv
Im Whitepaper zum Datenschutz bei Chrome erfahren Sie, wie Google mit Sprachdaten aus dieser API umgeht.