Signatur
Beschreibung
Das Interface SpeechRecognition ist der Einstiegspunkt der Web Speech API, wenn gesprochene Sprache in Text umgewandelt werden soll. Mit einer Instanz legen Sie die Sprache (lang), den Dauermodus (continuous), Zwischenergebnisse (interimResults) und die Anzahl der Alternativen (maxAlternatives) fest. Danach steuern Sie den Ablauf mit start(), stop() und abort().
Die Ergebnisse kommen asynchron als SpeechRecognitionEvent über das result-Event. Die Eigenschaft event.results ist eine SpeechRecognitionResultList. Jedes SpeechRecognitionResult darin enthält eine oder mehrere SpeechRecognitionAlternative-Objekte mit transcript und confidence. Über isFinal erkennen Sie, ob ein Ergebnis endgültig ist oder nur ein vorläufiges Zwischenergebnis.
Typische Einsatzfälle sind Diktierfunktionen, Sprachbefehle, Sprachsuche und barrierefreie Eingabehilfen. Beim ersten start() fragt der Browser nach der Erlaubnis für das Mikrofon. Die Seite muss in einem sicheren Kontext (HTTPS) laufen. In Chrome wird der Ton zur Erkennung meist an einen Server geschickt. Neuere Versionen bieten auch eine Erkennung direkt auf dem Gerät an.
Wichtige Events sind start, audiostart, soundstart, speechstart, speechend, soundend, audioend, result, nomatch, error und end. Sie lassen sich sowohl mit addEventListener() als auch über die passenden on…-Eigenschaften abonnieren (z. B. onresult).
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $lang | string | Sprache des Dokuments (<html lang>) | BCP-47-Sprachcode für die Erkennung, z. B. "de-DE". |
| $continuous | boolean | false | Bei true läuft die Erkennung nach dem ersten Ergebnis weiter und liefert mehrere Ergebnisse, bis Sie stop() aufrufen. |
| $interimResults | boolean | false | Bei true werden auch vorläufige Ergebnisse gemeldet (isFinal === false). |
| $maxAlternatives | number | 1 | Höchstzahl an SpeechRecognitionAlternative-Objekten pro Ergebnis. |
| $grammars | SpeechGrammarList | Veraltet: Grammatiken zur Einschränkung der Erkennung. Wird von den Browsern weitgehend ignoriert. |
Rückgabewert
new SpeechRecognition() erzeugt eine neue Instanz, die noch nicht gestartet ist. Die Methoden start(), stop() und abort() geben undefined zurück. Ergebnisse kommen über Events.Beispiele
Instanz mit Feature-Erkennung erzeugen und einmalig erkennen
const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!Recognition) {
console.warn('Spracherkennung wird von diesem Browser nicht unterstützt.');
} else {
const recognition = new Recognition();
recognition.lang = 'de-DE';
recognition.interimResults = false;
recognition.maxAlternatives = 3;
recognition.addEventListener('result', (event) => {
const result = event.results[0];
for (const alt of result) {
console.log(`${alt.transcript} (${(alt.confidence * 100).toFixed(0)} %)`);
}
});
recognition.addEventListener('error', (event) => {
console.error('Fehler:', event.error);
});
// Muss aus einer Nutzeraktion heraus gestartet werden
document.querySelector('#mic').addEventListener('click', () => recognition.start());
}Diktierfunktion mit Zwischenergebnissen
const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new Recognition();
recognition.lang = 'de-DE';
recognition.continuous = true;
recognition.interimResults = true;
const output = document.querySelector('#text');
let finalText = '';
recognition.onresult = (event) => {
let interim = '';
for (let i = event.resultIndex; i < event.results.length; i++) {
const { transcript } = event.results[i][0];
if (event.results[i].isFinal) {
finalText += transcript + ' ';
} else {
interim += transcript;
}
}
output.textContent = finalText + interim;
};
document.querySelector('#start').onclick = () => recognition.start();
document.querySelector('#stop').onclick = () => recognition.stop();Sprachbefehle mit automatischem Neustart und Abbruch
const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new Recognition();
recognition.lang = 'de-DE';
let listening = false;
const commands = {
'dunkel': () => document.body.classList.add('dark'),
'hell': () => document.body.classList.remove('dark'),
'nach oben': () => window.scrollTo({ top: 0, behavior: 'smooth' })
};
const onResult = (event) => {
const said = event.results[0][0].transcript.trim().toLowerCase();
console.log('Befehl:', said);
commands[said]?.();
};
recognition.addEventListener('result', onResult);
recognition.addEventListener('nomatch', () => console.log('Nicht verstanden.'));
// Nach jedem Ergebnis endet die Sitzung – bei Bedarf neu starten
recognition.addEventListener('end', () => {
if (listening) recognition.start();
});
const enable = () => { listening = true; recognition.start(); };
const disable = () => {
listening = false;
recognition.abort(); // sofort beenden, ohne weiteres Ergebnis
recognition.removeEventListener('result', onResult);
};
document.querySelector('#on').onclick = enable;
document.querySelector('#off').onclick = disable;// Wichtig · Fallstricke
- Browser-Unterstützung: Chrome, Edge und Safari bieten das Interface meist nur unter dem Namen
webkitSpeechRecognitionan. Firefox unterstützt es nicht. Prüfen Sie deshalb immer mitwindow.SpeechRecognition || window.webkitSpeechRecognition, ob es vorhanden ist. - Datenschutz: In Chrome wird der Ton standardmäßig an Google-Server geschickt und dort ausgewertet. Die Erkennung funktioniert dann nicht ohne Internet, und für sensible Daten brauchen Sie einen Hinweis zum Datenschutz.
- Voraussetzungen: Die Seite braucht HTTPS und die Erlaubnis für das Mikrofon. Wird die Erlaubnis verweigert, kommt ein
error-Event mitevent.error === \"not-allowed\". Weitere Fehlercodes sindno-speech,audio-capture,networkundaborted. - Nur eine Sitzung gleichzeitig: Rufen Sie
start()auf, während die Erkennung schon läuft, wirft der Browser eineInvalidStateError-DOMException. Starten Sie erst nach demend-Event neu. stop()undabort():stop()wertet den bereits aufgenommenen Ton noch aus und liefert ein letztes Ergebnis.abort()bricht sofort ab, ohne Ergebnis.- Auch mit
continuous = truebeenden manche Browser die Sitzung nach einer längeren Pause. Starten Sie sie gegebenenfalls imend-Handler neu. grammarsundSpeechGrammarListgelten praktisch als veraltet und wirken sich in aktuellen Browsern kaum aus.