SpeechSynthesisUtterance: boundary event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The boundary event of the Web Speech API is fired when the spoken utterance reaches a word or sentence boundary.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js
addEventListener("boundary", (event) => { })

onboundary = (event) => { }

Event type

A SpeechSynthesisEvent. Inherits from Event.

Event SpeechSynthesisEvent

Event properties

In addition to the properties listed below, properties from the parent interface, Event, are available.

charIndex Read only

Returns the index position of the character in the SpeechSynthesisUtterance.text that was being spoken when the event was triggered.

elapsedTime Read only

Returns the elapsed time in seconds after the SpeechSynthesisUtterance.text started being spoken that the event was triggered at.

name Read only

Returns the name associated with certain types of events occurring as the SpeechSynthesisUtterance.text is being spoken: the name of the SSML marker reached in the case of a mark event, or the type of boundary reached in the case of a boundary event.

utterance Read only

Returns the SpeechSynthesisUtterance instance that the event was triggered on.

Examples

You can use the boundary event in an addEventListener method:

js
utterThis.addEventListener("boundary", (event) => {
  console.log(
    `${event.name} boundary reached after ${event.elapsedTime} seconds.`,
  );
});

Or use the onboundary event handler property:

js
utterThis.onboundary = (event) => {
  console.log(
    `${event.name} boundary reached after ${event.elapsedTime} seconds.`,
  );
};

Specifications

Specification
Web Speech API
# eventdef-speechsynthesisutterance-boundary
Web Speech API
# dom-speechsynthesisutterance-onboundary

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
boundary event
Chrome – Partial support
Chrome 33 (Release date: 2014-02-20)
footnote Partial support
footnote The boundary event does not fire as expected. See bug 40715888.
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 49 (Release date: 2016-09-20)
footnote Full support
Opera – Full support
Opera 21 (Release date: 2014-05-06)
footnote Full support
Safari – Full support
Safari 7 (Release date: 2013-10-22)
footnote Full support
Chrome Android – Partial support
Chrome Android 33 (Release date: 2014-02-26)
footnote Partial support
footnote The boundary event does not fire as expected. See bug 40715888.
Firefox for Android – Full support
Firefox for Android 62 (Release date: 2018-09-05)
footnote Full support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 3 (Release date: 2015-04-10)
footnote Full support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support

See also