I cannot get the "onmark" event to fire in Chrome or Edge while using SSML. I have tried this in Chrome and Edge and wrote code based on standards at https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/TTS/DMAC.TTS.SSML.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnSpeak" type="button" onclick="Speak(); return false;" value="Speak" />
</div>
<div id="output"></div>
</form>
</body>
<script>
var synth = window.speechSynthesis;
var voices = null;
function Speak() {
var utterance = new SpeechSynthesisUtterance();
utterance.onboundary = function (event) {
document.getElementById('output').innerHTML += 'onboundary Event: ' + event.toString() + "<br/>";
};
utterance.onmark = function (event) {
document.getElementById('output').innerHTML += 'onmark Event: ' + event.toString() + "<br/>";
}
utterance.text = '<mark name="w1"/>Hello <mark name="w2"/>my <mark name="w3"/>name <mark name="w4"/>is <mark name="w5"/>John.';
utterance.lang = 'en-US';
utterance.voice = voices[0];
synth.speak(utterance);
};
window.speechSynthesis.onvoiceschanged = function () {
voices = synth.getVoices();
};
</script>
</html>The onboundary event doesn't seem to be fired correctly on Chrome, for voices based on remote tts services. Check the localService property for voices you intend to use, select localService = true voices only.
On Edge the onboundary event is aways fired correctly for all voices.
Oddly, Chromium team has marked this known issue as "wontfix", https://bugs.chromium.org/p/chromium/issues/detail?id=521666