时间戳

首页 > 解决方案 > Web Speech API - SpeechSynthesisUtterance onmark 事件不会触发

javascript - Web Speech API - SpeechSynthesisUtterance onmark 事件不会触发

问题描述

使用 SSML 时，我无法在 Chrome 或 Edge 中触发“onmark”事件。我已经在 Chrome 和 Edge 中尝试过，并根据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>

标签： javascripttext-to-speech

解决方案

对于基于远程 tts 服务的语音，onboundary 事件似乎没有在 Chrome 上正确触发。检查您打算使用的语音的 localService 属性，选择 localService = true voices only。

在 Edge 上，所有声音的 onboundary 事件都被正确触发。

奇怪的是，Chromium 团队已将此已知问题标记为“wontfix”， https: //bugs.chromium.org/p/chromium/issues/detail?id=521666

推荐阅读