SpeechRecognition: speechstart — Ereignis · JavaScript-Referenz

Signatur

recognition.addEventListener("speechstart", handler)

Beschreibung

Das Ereignis speechstart der Web Speech API wird an einer SpeechRecognition-Instanz ausgelöst, wenn der Erkennungsdienst in einem erkannten Ton tatsächlich Sprache feststellt. Es ist das Gegenstück zu speechend.

In der Ereignisreihenfolge kommt es nach start (Dienst hört zu), audiostart (Audioaufnahme läuft) und soundstart (irgendein Geräusch erkannt). speechstart ist also genauer als soundstart: Husten oder Hintergrundlärm lösen eventuell soundstart aus, aber nicht zwingend speechstart.

Typische Einsatzzwecke sind visuelles Feedback („Sprechen erkannt …“), ein pulsierendes Mikrofon-Symbol, das Stummschalten laufender Audiowiedergabe oder Zeitmessungen. Den Handler registrierst du entweder mit addEventListener("speechstart", handler) oder über die Eigenschaft onspeechstart.

Das übergebene Objekt ist ein gewöhnliches Event ohne zusätzliche Eigenschaften. Es bricht nicht ab und bubbelt nicht.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"speechstart"`.
$handler Pflicht	(event: Event) => void		Callback, der ein generisches `Event` erhält. `event.target` ist die auslösende `SpeechRecognition`-Instanz.
$options	boolean\|AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein Event-Objekt.

Beispiele

Sprachbeginn mit addEventListener anzeigen

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

const status = document.querySelector('#status');

recognition.addEventListener('speechstart', () => {
  console.log('Sprache erkannt');
  status.textContent = 'Ich höre dir zu …';
});

recognition.addEventListener('speechend', () => {
  status.textContent = 'Verarbeite …';
});

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

Sprache erkannt

Variante mit der Eigenschaft onspeechstart

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

recognition.onspeechstart = (event) => {
  console.log(`speechstart bei ${Math.round(event.timeStamp)} ms`);
};

// Handler wieder entfernen
// recognition.onspeechstart = null;

recognition.start();

speechstart bei 1834 ms

Hintergrundmusik beim Sprechen leiser stellen und Listener entfernen

const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SR();
const music = document.querySelector('audio');

const duck = () => { music.volume = 0.2; };
const restore = () => { music.volume = 1; };

recognition.addEventListener('speechstart', duck);
recognition.addEventListener('speechend', restore);

recognition.addEventListener('end', () => {
  // Aufräumen, wenn die Sitzung beendet ist
  recognition.removeEventListener('speechstart', duck);
  recognition.removeEventListener('speechend', restore);
  restore();
}, { once: true });

recognition.start();

Reaktionszeit messen: vom Start bis zum ersten Wort

const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SR();
let startedAt = 0;

recognition.addEventListener('start', () => { startedAt = performance.now(); });
recognition.addEventListener('speechstart', () => {
  const ms = performance.now() - startedAt;
  console.log(`Nutzer begann nach ${(ms / 1000).toFixed(1)} s zu sprechen`);
}, { once: true });

recognition.start();

Nutzer begann nach 2.3 s zu sprechen

// Wichtig · Fallstricke

Browserunterstützung: Chrome und Edge bieten die API oft nur als webkitSpeechRecognition an. Firefox unterstützt SpeechRecognition standardmäßig nicht. Prüfe immer per Feature-Detection: 'SpeechRecognition' in window || 'webkitSpeechRecognition' in window.
Kein Ergebnis im Ereignis: speechstart enthält keinen Text. Erkannte Wörter bekommst du nur über das Ereignis result.
Kein Garant für ein Ergebnis: Auf speechstart kann auch nomatch oder error folgen, etwa bei unverständlicher Sprache.
Serverseitige Erkennung: In Chrome wird das Audio zur Erkennung an Google-Server gesendet. Es braucht daher eine Internetverbindung, und du solltest auf den Datenschutz achten, zum Beispiel bei der DSGVO-Information für Nutzer.
Sicherer Kontext & Berechtigung: Die Erkennung funktioniert nur über HTTPS (oder localhost) und erst nach der Mikrofon-Freigabe. Ohne Freigabe feuert speechstart nie.
Bei continuous = true kann speechstart in einer Sitzung je nach Implementierung nur einmal ausgelöst werden. Verlass dich nicht darauf, dass es für jede Sprechpause neu kommt.

Siehe auch

SpeechRecognition SpeechRecognition: speechend SpeechRecognition: soundstart SpeechRecognition: audiostart SpeechRecognition: result SpeechRecognition.prototype.start()