Question

我正在尝试使用语音合成API：

https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis

我想做的是突出显示一个给定的单词，因为它正在被大声读出。请注意，我不希望它仅突出显示单个字符，而是突出显示整个单词-本质上是.char选择器。

问题在于我的用例非常复杂。

我需要一个能够处理CJK字符（特别是中文），能够处理传统和简化字符以及散布未翻译的英语单词的系统。所有中文单词都需要具有拼音（罗马化）以及与之相关的结构化翻译。

目前，我具有以下结构-警告，它很大，因为必须添加大量的标记才能实现我想要的功能（我非常希望简化方法）-包括每个字符的跨度（这是为了允许字符索引）：

<div class="block-rawhtml normal-font"><ruby class="pinyined-char"><span class="char traditional speak selected-text" style=""><span class="ind-char">新</span><span class="ind-char">年</span><span class="ind-char">快</span><span class="ind-char">樂</span></span><span class="char simplified"><span class="ind-char">新</span><span class="ind-char">年</span><span class="ind-char">快</span><span class="ind-char">乐</span></span><rp>(</rp><rt>xīn nián kuài lè</rt><rp>)</rp><span class="translation">Happy New Year!</span></ruby> </div>

现在，上面的标记生成这样的句子：

新年快樂

问题是，当我使用语音合成API时，在读取单词后会触发边界事件（导致在突出显示高亮度项时出现滞后），并且不会像我那样打到每个字符索引期望（它仅在单词边界上运行，对于CJK字符来说似乎有点模糊）。

语音合成只能接收文本-所以我目前正在做的只是在标记内部抓取文本，然后将语音合成的索引映射到我的混蛋索引字符跨度索引（然后抓取单个字符的父对象） -理论上应该是整个中文单词）-映射工作正常-如果，如果边界字符索引击中了所有字符，但不是。

我想知道是否有一种方法可以扩展语音合成，以便我可以抓住正确的字符进行阅读，或者可以使用SSML-据说支持SSML文档，并且可以添加标记标签（因此从理论上讲，不仅仅是一个跨度，我可以为每个字符添加一个标记标签）

https://developer.mozilla.org/en-US/docs/Web/Events/mark

我对此颇为失落，即使增加了很多额外的复杂性，似乎我想做的事情也遥不可及。

我想做的就是读取单个字符时突出显示整个中文单词，并让所有字符都击中边界（或另一个）事件。

 msg.onboundary = function (event) {
       $('.selected-text').removeAttr('style');
       highlight(event.charIndex);
            };

 function highlight(index) {
       $('.traditional .ind-char, .all .ind-char').eq(index).parent().css('color', '#FFF').css('background-color', '#337ab7').addClass('selected-text');
        }

如果这有点令人困惑，我深表歉意-我很高兴阐述不清楚的任何事情-这是一个相当复杂的问题，我可能不会（也许不是）正确地解决问题。

使用语音合成跟踪字符边界

0 个答案: