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>Advertisement
Answer
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