Issue
Better a good example than a long talk, right?
class="snippet-code-js lang-js prettyprint-override">utter = new SpeechSynthesisUtterance()
utter.onboundary = console.log
utter.lang = 'en-US'
utter.text = 'This is a sentence'
window.speechSynthesis.speak(utter)
On Chrome build Version 109.0.5414.74 (Build officiel) (64 bits), on Ubuntu 22.04, the boundary event is never fired.
Warning: For some reason, the above snippet doesn't run at all for me on Chrome, but it works if I copy it to the console in the dev tools. The boundary event is still not triggered, though.
Is it working for you?
Edit: After investigating on different browser and OS, this seems like a bug that happens only on Chrome/Chromium, and only under Linux.
Solution
The boundary
event does not fire in Chrome on Ubuntu because all of the provided SpeechSynthesisVoice
's on the platform are network based. You can see this be running a quick filter on the returned array:
speechSynthesis.getVoices().filter(({ localService }) => localService)
Which will return an empty array []
because all voices are supplied by a remote speech synthesizer.
This is a known issue and the associated bug has been marked as WontFix. I quote the remarks from comment 7 (emphasis mine):
The boundary event is not supported for all speech engines.
Native speech synthesis on Mac OS X, Windows, and Chrome OS all support boundary events at the word level.
Network-based speech synthesis, and Android speech synthesis don't currently support these. There's no immediate plans to fix those as the upstream APIs literally don't expose them at all.
Unfortunately there is not much you can do as the platforms simply don't support boundary events at the word level.
Answered By - morganney Answer Checked By - Terry (WPSolving Volunteer)