Search code examples
javascriptspeech-synthesis

SpeechSynthesisUtterance not triggering "mark" events

I can't get the mark event of a SpeechSynthesisUtterance instance to trigger.

As far as I can tell, this should work. I expect to see 

Started
Reached mark
Done

Instead, I get

Started
Done


document.querySelector('#play').addEventListener('click', function speak() {
  const utterance = new SpeechSynthesisUtterance(
    `<?xml version="1.0"?>
    <speak version="1.1">Foo <mark name="bar" /> baz.</speak>`
  )
  
  const log = document.getElementById('log')

  utterance.addEventListener('start', () => {log.value = 'Started\n'})
  utterance.addEventListener('mark', () => {log.value += 'Reached mark\n'})
  utterance.addEventListener('end', () => {log.value += 'Done\n'})

  log.value = 'Waiting…'
  speechSynthesis.cancel()

  speechSynthesis.speak(utterance)
})
<textarea id="log" disabled rows="3">Waiting…</textarea>
<hr>
<button id="play">Speak</button>

Solution

  • Sorry to let you know that it's a bug and that SSML isn't yet implemented.

    https://github.com/WICG/speech-api/issues/10
    https://bugs.chromium.org/p/chromium/issues/detail?id=88072

    You'll see that the chronium issue is 9 years old so I doubt it'll be fixed anytime soon.