SpeechSynthesisUtterance: start — Ereignis · JavaScript-Referenz

Signatur

utterance.addEventListener("start", handler)

Beschreibung

Das start-Ereignis gehört zu SpeechSynthesisUtterance aus der Web Speech API. Es wird ausgelöst, wenn die Sprachsynthese mit dem Sprechen der Äußerung wirklich anfängt. Der Aufruf von speechSynthesis.speak() allein reicht dafür nicht. Befinden sich schon andere Äußerungen in der Warteschlange, kommt das Ereignis erst, wenn diese Äußerung an der Reihe ist.

Einen Handler registriert man entweder mit utterance.addEventListener("start", handler) oder über die Eigenschaft utterance.onstart = handler. Der Handler bekommt ein SpeechSynthesisEvent. Nützliche Eigenschaften sind utterance, elapsedTime, charIndex und name.

Typische Einsatzzwecke:

Oberflächenzustand setzen, z. B. einen „Wird vorgelesen…“-Hinweis zeigen oder einen Stopp-Knopf aktivieren
Die Wartezeit zwischen speak() und dem Beginn der Ausgabe messen
Hervorhebungen im Text starten, die dann mit boundary weiterlaufen

Das Gegenstück ist das Ereignis end. Tritt ein Fehler auf, wird stattdessen error ausgelöst.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier `"start"`.
$handler Pflicht	(event: SpeechSynthesisEvent) => void		Callback-Funktion. Sie bekommt ein `SpeechSynthesisEvent` mit `utterance`, `charIndex`, `elapsedTime` und `name`.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein SpeechSynthesisEvent.

Beispiele

Beginn der Sprachausgabe mit addEventListener erkennen

const utterance = new SpeechSynthesisUtterance('Willkommen bei programmierung.net!');
utterance.lang = 'de-DE';

utterance.addEventListener('start', (event) => {
  console.log(`Sprachausgabe gestartet nach ${event.elapsedTime} ms`);
});

speechSynthesis.speak(utterance);

Sprachausgabe gestartet nach 0 ms

Oberflächenzustand über onstart und onend steuern

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

const vorlesen = (text) => {
  const u = new SpeechSynthesisUtterance(text);
  u.lang = 'de-DE';
  u.onstart = () => {
    status.textContent = 'Wird vorgelesen…';
    stopBtn.disabled = false;
  };
  u.onend = () => {
    status.textContent = 'Fertig';
    stopBtn.disabled = true;
  };
  speechSynthesis.speak(u);
};

stopBtn.addEventListener('click', () => speechSynthesis.cancel());
document.querySelector('#lesen').addEventListener('click', () => {
  vorlesen(document.querySelector('article').textContent);
});

Start als Promise abwarten und Listener wieder entfernen

const warteAufStart = (utterance, timeoutMs = 3000) =>
  new Promise((resolve, reject) => {
    const onStart = (e) => {
      clearTimeout(timer);
      resolve(e);
    };
    const timer = setTimeout(() => {
      utterance.removeEventListener('start', onStart);
      reject(new Error('Sprachausgabe hat nicht begonnen'));
    }, timeoutMs);
    utterance.addEventListener('start', onStart, { once: true });
  });

const u = new SpeechSynthesisUtterance('Test');
speechSynthesis.speak(u);
try {
  await warteAufStart(u);
  console.log('Läuft');
} catch (err) {
  console.warn(err.message);
}

Läuft

// Wichtig · Fallstricke

Autoplay-Sperre: Viele Browser, vor allem Chrome und Safari auf iOS, erlauben speak() nur nach einer Nutzerinteraktion. Fehlt sie, wird start nie ausgelöst. Oft kommt dann stattdessen ein error mit not-allowed.
Warteschlange: start kommt erst, wenn die Äußerung an der Reihe ist. Wenn man das Ereignis direkt nach speak() erwartet, kann das die Oberfläche durcheinanderbringen.
elapsedTime: Die Einheit war in älteren Browsern uneinheitlich (Sekunden oder Millisekunden). Bei start ist der Wert meist 0.
Garbage Collection: In Chrome können Utterance-Objekte ohne Referenz vorzeitig eingesammelt werden. Dann feuern die Ereignisse nicht. Deshalb eine Referenz behalten, z. B. in einer Variable im äußeren Gültigkeitsbereich.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Stimmen und Zeitverhalten hängen aber stark von Betriebssystem und Sprach-Engine ab. Vorher prüfen: 'speechSynthesis' in window.

Siehe auch

MediaStream: removetrack SpeechSynthesisUtterance: mark SpeechSynthesisUtterance: end SpeechSynthesisUtterance: error SpeechSynthesisUtterance: pause