W3cubDocs

/DOM

SpeechSynthesisUtterance.onmark

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The onmark property of the SpeechSynthesisUtterance interface represents an event handler that will run when the spoken utterance reaches a named SSML mark tag (when the mark event fires.)

Syntax

speechSynthesisUtteranceInstance.onmark = function() { ... };

Examples

var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
var voiceSelect = document.querySelector('select');

var voices = synth.getVoices();

  ...

inputForm.onsubmit = function(event) {
  event.preventDefault();

  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
  for(i = 0; i < voices.length ; i++) {
    if(voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }

  synth.speak(utterThis);

  utterThis.onmark = function(event) {
    console.log('A mark was reached: ' + event.name);
  }

  inputTxt.blur();
}

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 33 Yes 49 No 21 7
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 4.4.3 33 Yes 62
62
61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 7.1 ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onmark