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. Diese API ermöglicht eine präzise Steuerung und Flexibilität der Spracherkennungsfunktionen in Chrome-Version 25 und höher. In diesem Beispiel erscheint der erkannte Text fast sofort beim Sprechen.

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 Objekt webkitSpeechRecognition vorhanden ist. Ist dies nicht der Fall, empfehlen wir dem Nutzer, seinen Browser zu aktualisieren. Da sich die API noch in der Testphase befindet, wird sie derzeit mit dem Anbieterpräfix versehen. Zum Schluss erstellen wir das webkitSpeechRecognition-Objekt, das die Sprachschnittstelle bereitstellt, und legen einige seiner 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 aufhört zu sprechen. Dieser Modus eignet sich hervorragend für einfachen Text wie kurze Eingabefelder. In dieser Demo haben wir die Einstellung auf „true“ gesetzt, 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 vom Erkennungsfunktionen zurückgegebenen Ergebnisse endgültig sind und sich nicht ändern. In der Demo wird sie auf „true“ gesetzt, sodass wir frühzeitige Zwischenergebnisse erhalten, die sich ändern können. Sehen Sie sich die Demo sorgfältig an. Der graue Text ist der vorläufige Text, der sich manchmal ändert, während der schwarze Text Antworten des Erkennungsmoduls sind, 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 haben die gesprochene Sprache für die Spracherkennung auf „lang“ festgelegt. auf den BCP-47-Wert, den der Nutzer über die Auswahl-Drop-down-Liste ausgewählt hat, z. B. „en-US“ für Englisch-USA. Wird kein Wert festgelegt, wird standardmäßig die Länge des Stammelements und der Hierarchie des HTML-Dokuments verwendet. Die Chrome-Spracherkennung unterstützt zahlreiche Sprachen (siehe Tabelle „langs“ in der Demoquelle) sowie einige linksläufige Sprachen, die in dieser Demo nicht enthalten sind, z. B. he-IL und ar-EG.

Nach der Spracheinstellung wird recognition.start() aufgerufen, um die Spracherkennung zu aktivieren. Sobald die Audioaufnahme beginnt, wird der onstart-Event-Handler aufgerufen. Anschließend wird für jede neue Ergebnisgruppe der onresult-Event-Handler 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 in 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 linebreak-Funktion, 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, das mit schwarzem Text formatiert ist, und interim_span, das mit grauem Text formatiert ist.

interim_transcript ist eine lokale Variable und wird bei jedem Aufruf dieses Ereignisses vollständig neu erstellt, weil es möglich ist, dass sich alle Zwischenergebnisse seit dem letzten onresult-Ereignis geändert haben. Wir könnten das Gleiche für final_transcript tun, indem wir die For-Schleife bei 0 starten. Da sich der endgültige Text jedoch nicht ändert, haben wir den Code hier etwas effizienter gemacht, indem wir final_transcript als global festgelegt haben, sodass dieses Ereignis die For-Schleife bei event.resultIndex starten und nur neuen endgültigen Text anhängen kann.

Geschafft! Der Rest des Codes ist nur vorhanden, damit alles schön aussieht. Sie behält den Zustand bei, zeigt dem Nutzer einige informative Nachrichten an und tauscht das GIF-Bild auf der Mikrofonschaltfläche zwischen dem statischen Mikrofon, dem Bild mit dem Mikrofon-Schrägstrich und dem pulsierenden roten Punkt aus.

Das Bild mit dem Mikrofon-Schrägstrich wird angezeigt, wenn recognition.start() aufgerufen wird, und wird dann durch „mic-animate“ ersetzt, wenn onstart ausgelöst wird. In der Regel geschieht das so schnell, dass der Schrägstrich nicht mehr zu sehen ist. Wenn die Spracherkennung zum ersten Mal verwendet wird, muss Chrome den Nutzer aber um die Berechtigung zur Verwendung des Mikrofons bitten. In diesem Fall wird onstart nur ausgelöst, wenn der Nutzer die Berechtigung erteilt hat. Bei Seiten, die auf HTTPS gehostet werden, muss im Gegensatz zu HTTP-gehosteten Seiten nicht wiederholt nach Berechtigungen gefragt werden.

Gestalten Sie Ihre Webseiten lebendig, indem Sie ihnen die Möglichkeit geben, den Nutzern zuhören!

Wir freuen uns auf dein Feedback...

Im Whitepaper zum Datenschutz in Chrome erfahren Sie, wie Google mit Sprachdaten aus dieser API umgeht.