SpeechRecognition: start — Ereignis · JavaScript-Referenz

Signatur

recognition.addEventListener("start", handler)

Beschreibung

Das start-Ereignis eines SpeechRecognition-Objekts der Web Speech API wird ausgelöst, wenn der Erkennungsdienst nach einem Aufruf von recognition.start() tatsächlich mit dem Abhören begonnen hat. Es ist damit das erste Ereignis im Lebenszyklus einer Erkennungssitzung. Danach folgen typischerweise audiostart, soundstart, speechstart, result und schließlich end.

Du kannst das Ereignis auf zwei Arten abonnieren: mit recognition.addEventListener("start", handler) oder über die Eigenschaft recognition.onstart = handler. Der Handler bekommt ein einfaches Event-Objekt ohne zusätzliche Eigenschaften.

In der Praxis nutzt man start, um die Oberfläche anzupassen, sobald das Mikrofon wirklich aktiv ist. Beispiele sind ein Aufnahme-Indikator, das Sperren des Start-Buttons oder das Starten eines Timeouts. Wichtig: start wird erst nach einer erteilten Mikrofonberechtigung ausgelöst. Verweigert der Nutzer den Zugriff, kommt stattdessen ein error-Ereignis (mit not-allowed) und danach end.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier immer `"start"`.
$handler Pflicht	(event: Event) => void		Callback, der ein generisches `Event`-Objekt ohne spezielle Eigenschaften bekommt. `event.target` verweist auf die `SpeechRecognition`-Instanz.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt undefined zurück. Der Handler bekommt ein Event-Objekt.

Beispiele

Aufnahme-Indikator mit addEventListener

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

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

recognition.addEventListener('start', () => {
  status.textContent = '🎙️ Ich höre zu …';
  button.disabled = true;
  console.log('Spracherkennung gestartet');
});

recognition.addEventListener('end', () => {
  status.textContent = 'Bereit';
  button.disabled = false;
});

button.addEventListener('click', () => recognition.start());

Spracherkennung gestartet

Variante mit der onstart-Eigenschaft

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

recognition.onstart = (event) => {
  console.log('Start-Ereignis:', event.type);
};

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

recognition.start();

Start-Ereignis: start Erkannt: hallo welt

Sicherheits-Timeout und Listener entfernen

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

const onStart = () => {
  // Nach 10 Sekunden automatisch beenden
  timeoutId = setTimeout(() => recognition.stop(), 10_000);
  console.log('Timeout gesetzt');
};

recognition.addEventListener('start', onStart);
recognition.addEventListener('end', () => {
  clearTimeout(timeoutId);
  recognition.removeEventListener('start', onStart);
  console.log('Sitzung beendet, Listener entfernt');
});

recognition.start();

Timeout gesetzt Sitzung beendet, Listener entfernt

Start als Promise abwarten

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

const startRecognition = (recognition) =>
  new Promise((resolve, reject) => {
    recognition.addEventListener('start', resolve, { once: true });
    recognition.addEventListener('error', (e) => reject(e.error), { once: true });
    recognition.start();
  });

const run = async () => {
  const recognition = new SR();
  try {
    await startRecognition(recognition);
    console.log('Mikrofon aktiv');
  } catch (err) {
    console.error('Start fehlgeschlagen:', err);
  }
};

run();

Mikrofon aktiv

// Wichtig · Fallstricke

Browser-Kompatibilität: Chrome und Edge brauchen häufig noch den Präfix webkitSpeechRecognition. Firefox unterstützt SpeechRecognition standardmäßig nicht. Prüfe daher immer vorher, ob die API vorhanden ist.
Sicherer Kontext: Die API funktioniert nur über HTTPS (oder localhost) und braucht eine Mikrofonberechtigung. Wird sie verweigert, feuert kein start, sondern error mit not-allowed.
Doppelter Start: Rufst du start() während einer laufenden Sitzung erneut auf, wirft der Browser einen InvalidStateError. Sperre den Auslöser deshalb im start-Handler und gib ihn erst bei end wieder frei.
Datenschutz: In Chrome werden die Audiodaten zur Erkennung an einen Server geschickt, sofern keine lokale Erkennung aktiv ist. Weise die Nutzer darauf hin.
start heißt nicht, dass schon Ton erkannt wurde. Dafür gibt es audiostart, soundstart und speechstart.

Siehe auch

SpeechRecognition SpeechRecognition.prototype.start() HTMLTextAreaElement: select SpeechRecognition: audiostart SpeechRecognition: end