Sprachgesteuerte Webanwendungen – Einführung in die Web Speech API

Mit der neuen JavaScript-Web Speech API lässt sich die Spracherkennung ganz einfach in Webseiten einfügen. Diese API ermöglicht eine präzise Steuerung und Flexibilität der Spracherkennungsfunktionen in Chrome 25 und höher. Hier ist ein Beispiel, bei dem der erkannte Text fast sofort während des Sprechens angezeigt wird.

Web Speech API – Demo

DEMO / SOURCE

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. Wenn nicht, empfehlen wir dem Nutzer, seinen Browser zu aktualisieren. Da sich die API noch in der Testphase befindet, hat sie derzeit ein Anbieterpräfix. Schließlich 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 ist sie auf „true“ gesetzt, sodass die Spracherkennung auch dann fortgesetzt wird, wenn der Nutzer beim Sprechen eine Pause einlegt.

Der Standardwert für interimResults ist „false“. Das bedeutet, dass vom Erkennungsmodul nur endgültige Ergebnisse zurückgegeben werden, die sich nicht ändern. In der Demo ist der Wert auf „true“ gesetzt, damit wir frühzeitig Zwischenergebnisse erhalten, die sich noch ändern können. Sehen Sie sich die Demo genau an. Der graue Text ist der vorläufige Text, der sich manchmal ändert. Der schwarze Text sind Antworten des Spracherkenners, die als endgültig markiert sind und sich nicht ändern.

Um zu beginnen, 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 die Spracherkennung „lang“ 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 nichts festgelegt ist, wird standardmäßig die Sprache des HTML-Dokument-Rootelements und der Hierarchie verwendet. Die Chrome-Spracherkennung unterstützt zahlreiche Sprachen (siehe die Tabelle „langs“ im Demoquellcode) sowie einige rechtsläufige Sprachen, die in dieser Demo nicht enthalten sind, z. B. he-IL und ar-EG.

Nachdem wir die Sprache festgelegt haben, rufen wir recognition.start() auf, um die Spracherkennung zu aktivieren. Sobald die Audioaufnahme beginnt, wird der onstart-Ereignis-Handler aufgerufen. Für jeden neuen Satz von Ergebnissen wird dann der onresult-Ereignis-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 empfangenen 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 Funktion linebreak, um diese 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, die bei jedem Aufruf dieses Ereignisses vollständig neu erstellt wird, da sich alle Zwischenergebnisse seit dem letzten onresult-Ereignis geändert haben können. Dasselbe könnten wir für final_transcript tun, indem wir die FOR-Schleife einfach bei 0 beginnen. Da sich der endgültige Text jedoch nie ändert, haben wir den Code hier etwas effizienter gestaltet, indem wir final_transcript global gemacht haben, sodass mit diesem Ereignis die For-Schleife bei event.resultIndex beginnen und nur neuer endgültiger Text angehängt werden kann.

Geschafft! Der Rest des Codes dient nur dazu, alles schön aussehen zu lassen. Es behält den Status bei, zeigt dem Nutzer informative Meldungen an und tauscht das GIF-Bild auf der Mikrofontaste zwischen dem statischen Mikrofon, dem Bild mit dem durchgestrichenen Mikrofon und dem animierten Mikrofon mit dem pulsierenden roten Punkt aus.

Das Bild mit dem durchgestrichenen Mikrofon wird angezeigt, wenn recognition.start() aufgerufen wird. Es wird durch das animierte Mikrofonsymbol ersetzt, wenn onstart ausgelöst wird. Normalerweise geschieht dies so schnell, dass der Schrägstrich nicht sichtbar ist. Wenn die Spracherkennung jedoch zum ersten Mal verwendet wird, muss Chrome den Nutzer um die Erlaubnis bitten, das Mikrofon zu verwenden. In diesem Fall wird onstart nur ausgelöst, wenn der Nutzer die Berechtigung erteilt. Bei Seiten, die auf HTTPS gehostet werden, muss nicht wiederholt um Erlaubnis gebeten werden, bei Seiten, die auf HTTP gehostet werden, schon.

Aktivieren Sie die Sprachsteuerung, damit Ihre Webseiten auf Ihre Nutzer reagieren können.

Wir freuen uns über Ihr Feedback…

Unsere Datenschutzerklärung finden Sie unter Datenschutz in Chrome (aktualisiert am 16. Juni 2026).