SpeechRecognition: end — Ereignis · JavaScript-Referenz

Signatur

recognition.addEventListener("end", handler)

Beschreibung

Das end-Ereignis eines SpeechRecognition-Objekts wird immer als letztes Ereignis einer Erkennungssitzung ausgelöst. Das passiert, sobald der Dienst die Verbindung beendet hat. Dabei ist egal, warum: weil stop() oder abort() aufgerufen wurde, weil der Nutzer nicht mehr spricht (bei continuous = false), weil eine Zeitüberschreitung eintrat oder weil ein Fehler (error-Ereignis) vorausging.

Du kannst den Handler per recognition.addEventListener("end", handler) registrieren oder über die Eigenschaft recognition.onend = handler setzen. Das Ereignis ist ein einfaches Event ohne zusätzliche Daten. Es bricht keine Standardaktion ab und steigt nicht im DOM auf (kein Bubbling).

Typische Einsätze sind: die Oberfläche zurücksetzen (Mikrofon-Symbol ausschalten, Button wieder freigeben), Ressourcen aufräumen oder eine Dauererkennung umsetzen, indem man in end erneut start() aufruft. Browser beenden nämlich auch bei continuous = true die Sitzung nach einer Weile von selbst.

Die Reihenfolge der Ereignisse ist grob: start → audiostart → soundstart → speechstart → result … → speechend → soundend → audioend → end.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"end"`.
$handler Pflicht	(event: Event) => void		Callback, der mit einem einfachen `Event`-Objekt aufgerufen wird. `event.target` ist die `SpeechRecognition`-Instanz.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen, z. B. `{ once: true }`, damit der Handler nur einmal läuft.

Rückgabewert

Typ

void

Beschreibung

addEventListener hat keinen Rückgabewert. Der Handler erhält ein Event ohne zusätzliche Eigenschaften.

Beispiele

UI nach Ende der Erkennung zurücksetzen (addEventListener)

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

const button = document.querySelector('#mic');

button.addEventListener('click', () => {
  recognition.start();
  button.disabled = true;
  button.textContent = '🎙️ Höre zu …';
});

recognition.addEventListener('result', (event) => {
  console.log('Erkannt:', event.results[0][0].transcript);
});

recognition.addEventListener('end', () => {
  console.log('Spracherkennung beendet');
  button.disabled = false;
  button.textContent = '🎤 Sprechen';
});

Erkannt: hallo welt Spracherkennung beendet

Dieselbe Logik über die onend-Eigenschaft

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

recognition.onend = (event) => {
  console.log('Sitzung vorbei, Ziel:', event.target === recognition);
};

recognition.start();
// Nach 3 Sekunden manuell beenden — end folgt asynchron
setTimeout(() => recognition.stop(), 3000);

Sitzung vorbei, Ziel: true

Dauererkennung mit automatischem Neustart

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

let active = false;

const restartOnEnd = () => {
  if (active) {
    console.log('Dienst hat getrennt – starte neu');
    recognition.start();
  }
};

recognition.addEventListener('end', restartOnEnd);
recognition.addEventListener('error', (e) => {
  // Bei verweigerter Berechtigung nicht endlos neu starten
  if (e.error === 'not-allowed') active = false;
});

const startListening = () => { active = true; recognition.start(); };
const stopListening = () => {
  active = false;
  recognition.removeEventListener('end', restartOnEnd);
  recognition.stop();
};

startListening();

Dienst hat getrennt – starte neu

// Wichtig · Fallstricke

Browser-Unterstützung: Chromium-Browser stellen die API nur als webkitSpeechRecognition bereit. Safari unterstützt sie ab 14.1, Firefox gar nicht. Prüfe deshalb immer mit 'SpeechRecognition' in window || 'webkitSpeechRecognition' in window, ob die API vorhanden ist.
Kommt auch nach Fehlern: Auch nach einem error-Ereignis (z. B. no-speech, network, not-allowed) folgt end. Wer in end automatisch start() aufruft, sollte vorher den Fehlergrund prüfen. Sonst entsteht bei verweigerter Mikrofon-Berechtigung eine Endlosschleife.
start() zu früh aufrufen: Wenn du start() aufrufst, bevor end eingetroffen ist, wirft der Browser einen InvalidStateError. Den Neustart deshalb erst im end-Handler auslösen.
Kein Dauerbetrieb: Auch mit continuous = true beenden Browser die Sitzung nach Stille oder nach einer festen Zeit. Das end-Ereignis ist der richtige Ort, um darauf zu reagieren.
Datenschutz: In Chrome wird das Audio zur Erkennung an Server von Google geschickt. Die API funktioniert nur in sicheren Kontexten (HTTPS) und braucht die Mikrofon-Freigabe des Nutzers.

Siehe auch

SpeechRecognition SpeechRecognition.prototype.stop() SpeechRecognition.prototype.abort() SpeechRecognition: error SpeechRecognition: audioend