new SpeechRecognition() — Methode · JavaScript-Referenz

Signatur

new SpeechRecognition()

Beschreibung

Der Konstruktor SpeechRecognition() erzeugt ein neues Spracherkennungs-Objekt der Web Speech API. Über die Instanz legt man Sprache (lang), Dauerbetrieb (continuous), Zwischenergebnisse (interimResults) und die Anzahl der Alternativen (maxAlternatives) fest. Anschließend startet man die Erkennung mit start().

Die Ergebnisse kommen asynchron über Events an, vor allem über result, end, error und nomatch. Das Objekt erbt von EventTarget. Sie können also sowohl addEventListener() als auch die Eigenschaften onresult, onerror usw. verwenden.

Typische Einsatzfälle sind Sprachsteuerung, Diktierfunktionen in Formularen, Barrierefreiheit und Sprachsuche. In Chromium-Browsern gibt es den Konstruktor nur mit Präfix als webkitSpeechRecognition. Prüfen Sie deshalb immer, ob er vorhanden ist, bevor Sie ihn verwenden.

Rückgabewert

Typ

SpeechRecognition

Beschreibung

Eine neue, noch nicht gestartete SpeechRecognition-Instanz mit Standardwerten: continuous = false, interimResults = false, maxAlternatives = 1, lang = Sprache des Dokuments.

Beispiele

Instanz mit Präfix-Fallback erzeugen und einmalig erkennen

const SpeechRecognitionImpl = window.SpeechRecognition || window.webkitSpeechRecognition;

if (!SpeechRecognitionImpl) {
  console.warn('Spracherkennung wird von diesem Browser nicht unterstützt.');
} else {
  const recognition = new SpeechRecognitionImpl();
  recognition.lang = 'de-DE';
  recognition.maxAlternatives = 1;

  recognition.onresult = (event) => {
    const { transcript, confidence } = event.results[0][0];
    console.log(`Erkannt: "${transcript}" (${(confidence * 100).toFixed(0)} %)`);
  };
  recognition.onerror = (event) => console.error('Fehler:', event.error);

  // Muss durch eine Nutzeraktion ausgelöst werden
  document.querySelector('#mic').addEventListener('click', () => recognition.start());
}

Erkannt: "hallo welt" (92 %)

Diktierfunktion mit Zwischenergebnissen in ein Textfeld

const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SR();
recognition.lang = 'de-DE';
recognition.continuous = true;
recognition.interimResults = true;

const textarea = document.querySelector('#diktat');
let finalText = '';

recognition.addEventListener('result', (event) => {
  let interim = '';
  for (let i = event.resultIndex; i < event.results.length; i++) {
    const result = event.results[i];
    if (result.isFinal) {
      finalText += result[0].transcript + ' ';
    } else {
      interim += result[0].transcript;
    }
  }
  textarea.value = finalText + interim;
});

document.querySelector('#start').addEventListener('click', () => recognition.start());
document.querySelector('#stop').addEventListener('click', () => recognition.stop());

Erkennung als Promise kapseln (async/await)

const listenOnce = (lang = 'de-DE') => new Promise((resolve, reject) => {
  const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (!SR) return reject(new Error('Nicht unterstützt'));

  const recognition = new SR();
  recognition.lang = lang;
  recognition.onresult = (e) => resolve(e.results[0][0].transcript);
  recognition.onnomatch = () => reject(new Error('Nichts erkannt'));
  recognition.onerror = (e) => reject(new Error(e.error));
  recognition.start();
});

document.querySelector('#suche').addEventListener('click', async () => {
  try {
    const query = await listenOnce();
    console.log('Suche nach:', query);
  } catch (err) {
    console.error('Spracheingabe fehlgeschlagen:', err.message);
  }
});

Suche nach: wetter in berlin

// Wichtig · Fallstricke

Browserunterstützung: Chrome und Edge bieten den Konstruktor nur als webkitSpeechRecognition an, Safari ab 14.1. Firefox unterstützt die Spracherkennung standardmäßig nicht. Prüfen Sie deshalb immer mit window.SpeechRecognition || window.webkitSpeechRecognition, ob sie vorhanden ist.
Datenschutz: In Chrome wird das Audiosignal zur Erkennung an Google-Server geschickt. Die Erkennung braucht dann eine Internetverbindung, und sensible Inhalte verlassen das Gerät. Weisen Sie die Nutzer darauf hin.
Berechtigung und sicherer Kontext: Die Erkennung funktioniert nur über HTTPS oder auf localhost und nur mit Mikrofonfreigabe. Wird die Freigabe verweigert, kommt ein error-Event mit event.error === 'not-allowed'. Starten Sie start() am besten aus einer Nutzeraktion heraus, zum Beispiel einem Klick.
Rufen Sie start() auf einer Instanz auf, die schon läuft, wirft der Browser einen InvalidStateError. Warten Sie auf das end-Event, bevor Sie erneut starten.
Auch mit continuous = true beenden Browser die Sitzung nach längerer Stille oder nach einer bestimmten Zeit. Für Dauerbetrieb starten Sie im end-Handler bei Bedarf neu.
Wird lang nicht gesetzt, gilt das lang-Attribut des Dokuments. Setzen Sie die Sprache ausdrücklich, zum Beispiel 'de-DE', sonst leidet die Erkennungsqualität.

Siehe auch

new DOMRect() new SpeechRecognitionEvent() new SpeechRecognitionPhrase() new RTCPeerConnection() new SpeechGrammar()