Sprachgesteuerte Webanwendungen – Einführung in die Web Speech API

Mit der neuen JavaScript Web Speech API können Sie Ihren Webseiten ganz einfach Spracherkennung hinzufügen. Mit dieser API können Sie die Spracherkennungsfunktionen ab Chrome-Version 25 flexibel und präzise steuern. Hier ist ein Beispiel, bei dem der erkannte Text fast unmittelbar während des Sprechens angezeigt wird.

Web Speech API-Demo

DEMO / QUELLE

Werfen wir einen Blick hinter die Kulissen. Zuerst prüfen wir, ob der Browser die Web Speech API unterstützt. Dazu prüfen wir, ob das webkitSpeechRecognition-Objekt vorhanden ist. Falls nicht, empfehlen wir den Nutzern, ihren Browser zu aktualisieren. Da sich die API noch in der Testphase befindet, ist sie derzeit mit einem Anbieterpräfix versehen. Zuletzt erstellen wir das webkitSpeechRecognition-Objekt, das die Sprachschnittstelle bereitstellt, und legen einige Attribute und Event-Handler 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 „false“. Das bedeutet, dass die Spracherkennung beendet wird, wenn der Nutzer nicht mehr spricht. Dieser Modus eignet sich hervorragend für einfachen Text wie kurze Eingabefelder. In dieser Demo setzen wir den Wert auf „true“, damit die Erkennung auch dann fortgesetzt wird, wenn der Nutzer beim Sprechen eine Pause macht.

Der Standardwert für interimResults ist „false“. Das bedeutet, dass die einzigen Ergebnisse, die von der Erkennung zurückgegeben werden, endgültig sind und sich nicht ändern. In der Demo wird er auf „true“ gesetzt, sodass wir frühzeitige Zwischenergebnisse erhalten, die sich ändern können. Sehen Sie sich die Demo genau an. Der graue Text ist der vorläufige Text, der sich gelegentlich ändert, während der schwarze Text Antworten der Erkennung sind, die als endgültig markiert sind und sich nicht ändern.

Der Nutzer klickt zuerst 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 die Spracherkennung auf den BCP-47-Wert fest, den der Nutzer über die Drop-down-Liste ausgewählt hat, z. B. „en-US“ für Englisch (USA). Wenn dies nicht festgelegt ist, werden 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 von rechts nach links verlaufende Sprachen, die in dieser Demo nicht enthalten sind, z. B. he-IL und ar-EG.

Nachdem Sie die Sprache festgelegt haben, rufen wir recognition.start() auf, um die Spracherkennung zu aktivieren. Sobald mit der Audioaufzeichnung begonnen wird, wird der Event-Handler onstart und dann für jeden neuen Satz von Ergebnissen der Event-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 verkettet alle bisher erhaltenen Ergebnisse zu zwei Strings: final_transcript und interim_transcript. Die resultierenden Strings können „\n“ enthalten, z. B. wenn der Nutzer „neuer Absatz“ spricht. Daher verwenden wir die Funktion linebreak, um sie in die HTML-Tags <br> oder <p> zu konvertieren. 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 und wird bei jedem Aufruf dieses Ereignisses vollständig neu erstellt. Grund dafür ist, dass sich alle Zwischenergebnisse seit dem letzten onresult-Ereignis geändert haben. Wir könnten dasselbe für final_transcript machen, indem wir einfach die For-Schleife bei 0 starten. Da sich der endgültige Text jedoch nie ändert, haben wir den Code hier etwas effizienter gestaltet. final_transcript wurde global festgelegt, sodass dieses Ereignis die For-Schleife bei event.resultIndex starten und nur den neuen endgültigen Text anhängen kann.

Geschafft! Der Rest des Codes soll alles schön aussehen lassen. Er behält seinen Zustand bei, zeigt dem Nutzer einige informative Botschaften und tauscht das GIF-Bild auf der Mikrofonschaltfläche zwischen dem statischen Mikrofon, dem Mikrofon-Schrägstrich-Bild und dem pulsierenden roten Punkt aus.

Das Bild mit dem Mikrofon-Schrägstrich wird angezeigt, wenn recognition.start() aufgerufen wird, und durch „mic-animate“ ersetzt, wenn onstart ausgelöst wird. Normalerweise geschieht dies so schnell, dass der Schrägstrich nicht erkennbar ist. Bei der ersten Verwendung der Spracherkennung muss der Nutzer jedoch von Chrome um Erlaubnis zur Verwendung des Mikrofons gebeten werden. In diesem Fall wird onstart nur ausgelöst, wenn der Nutzer die Berechtigung erteilt hat. Bei Seiten, die über HTTPS gehostet werden, müssen im Gegensatz zu HTTP-gehosteten Seiten nicht wiederholt um Erlaubnis gefragt werden.

Gestalten Sie Ihre Webseiten lebendiger, indem Sie ihnen ermöglichen, auf Ihre Nutzer zu hören!

Wir freuen uns auf dein Feedback...

Weitere Informationen dazu, wie Google Sprachdaten aus dieser API verarbeitet, finden Sie im Whitepaper zum Datenschutz bei Chrome.