SpeechSynthesisUtterance: end event
{{APIRef("Web Speech API")}}
The end
event of the Web Speech API {{domxref("SpeechSynthesisUtterance")}}
object is fired when the utterance has finished being spoken.
Syntax
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}
, or set an event handler property.
addEventListener("end", (event) => {});
onend = (event) => {};
Event type
A {{domxref("SpeechSynthesisEvent")}}
. Inherits from {{domxref("Event")}}
.
{{InheritanceDiagram("SpeechSynthesisEvent")}}
Event properties
In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}
, are available.
{{domxref("SpeechSynthesisEvent.charIndex", "charIndex")}}
{{ReadOnlyInline}}
- : Returns the index position of the character in the
{{domxref("SpeechSynthesisUtterance.text")}}
that was being spoken when the event was triggered.
- : Returns the index position of the character in the
{{domxref("SpeechSynthesisEvent.elapsedTime", "elapsedTime")}}
{{ReadOnlyInline}}
- : Returns the elapsed time in seconds after the
{{domxref("SpeechSynthesisUtterance.text")}}
started being spoken that the event was triggered at.
- : Returns the elapsed time in seconds after the
{{domxref("SpeechSynthesisEvent.name", "name")}}
{{ReadOnlyInline}}
- : Returns the name associated with certain types of events occurring as the
{{domxref("SpeechSynthesisUtterance.text")}}
is being spoken: the name of the SSML marker reached in the case of a{{domxref("SpeechSynthesisUtterance.mark_event", "mark")}}
event, or the type of boundary reached in the case of a{{domxref("SpeechSynthesisUtterance.boundary_event", "boundary")}}
event.
- : Returns the name associated with certain types of events occurring as the
{{domxref("SpeechSynthesisEvent.utterance", "utterance")}}
{{ReadOnlyInline}}
- : Returns the
{{domxref("SpeechSynthesisUtterance")}}
instance that the event was triggered on.
- : Returns the
Examples
You can use the end
event in an addEventListener
method:
utterThis.addEventListener("end", (event) => {
console.log(
`Utterance has finished being spoken after ${event.elapsedTime} seconds.`,
);
});
Or use the onend
event handler property:
utterThis.onend = (event) => {
console.log(
`Utterance has finished being spoken after ${event.elapsedTime} seconds.`,
);
};
Specifications
{{Specifications}}
Browser compatibility
{{Compat}}