SpeechSynthesisUtterance: mark event
{{APIRef("Web Speech API")}}
The mark
event of the Web Speech API {{domxref("SpeechSynthesisUtterance")}}
object is fired when the spoken utterance reaches a named SSML “mark” tag.
Syntax
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}
, or set an event handler property.
addEventListener("mark", (event) => {});
onmark = (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 amark
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 mark
event in an addEventListener
method:
utterThis.addEventListener("mark", (event) => {
console.log(`A mark was reached: ${event.name}`);
});
Or use the onmark
event handler property:
utterThis.onmark = (event) => {
console.log(`A mark was reached: ${event.name}`);
};
Specifications
{{Specifications}}
Browser compatibility
{{Compat}}