Question

期望的行为

我想发言几个div，因此我遍历了它们，抓取了他们的文本，并在每个div上调用了.speak(text)。

我追加并传递了一个自定义的utterance属性，该属性表示每个类实例的索引，以便我可以定位在utterance.onboundary处理程序中说的相关div。

环境：

在Chrome 68.0.3440.106版（官方内部版本）（64位）中进行本地开发

设置

var synth = window.speechSynthesis;
// declare so that these values are accessible globally
var voices = [];

正在播放

// the select element that contains voice options
var selected_voice_index = $("#available_voices").prop('selectedIndex');

// iterate over divs, get their text and index, and speak them
$(".my_text").each(function(index) {
    var text = $(this).text();
    var utterance = new SpeechSynthesisUtterance(text);

    // NOTE: I add property to pass through a class instance index  
    utterance.MY_UTTERANCE_INSTANCE = index;

    // define the voice to use  
    utterance.voice = voices[selected_voice_index];
    utterance.onboundary = onboundaryHandler;
    utterance.onend = onendHandler;
    synth.speak(utterance);
});

处理事件

function onendHandler(event) {
    console.log("=============UTTERANCE ENDED=============");
    // check values of event.utterance properties here
}

function onboundaryHandler(event) {
    var char_index = event.charIndex;
    var utterance_instance = event.utterance.MY_UTTERANCE_INSTANCE;
    var utterance_text = event.utterance.text;
    console.log("onboundaryHandler - char_index: " + char_index);
    console.log("onboundaryHandler - utterance_instance: " + utterance_instance);
    console.log("onboundaryHandler - utterance_text: " + utterance_text);

    // apply markup to word being spoken here  

}

问题

它可以在各种时间段内“正常”运行，然后只是“停止工作”，即我传递给MY_UTTERANCE_INSTANCE的自定义onboundary属性值停止传递（它记录为{ {1}}）。

（此外，我在undefined上有synth.cancel()来确保在页面加载/重新加载时从发音队列中删除所有发音，但这似乎没有什么不同-有时语音会开始从顶部开始几个div）。

SpeechSynthesisUtterance.onboundary停止工作

0 个答案: