javascript - 跟踪 SpeechSynthesis API 所说的单词

Question

我正在编写一个软件程序，它使用 Web SpeechSynthesis API 读取文本并显示正在说出的单词。

语音 API 确实有一个onboundary用于执行此操作的事件，但它不适用于大多数语音。因此，唯一的选择是通过计算说出每个字符所需的时间来大致跟踪它，然后像这样使用它来跟踪单词：

function speak(text) {
  return new Promise(resolve => {
    let msg = new SpeechSynthesisUtterance();
    let start = 0;

    msg.text = text;
    msg.onstart = (e) => {
      var evt = new CustomEvent('tts-play');
      window.dispatchEvent(evt);
      start = performance.now();
    };

    msg.onend = (e) => resolve(performance.now() - start);

    speechSynthesis.speak(msg);
  });
}

function go() {
  let calibrate = 'Calibrating speech engine';
  let actualText = 'This is the text for which I want to track which word is spoken. As you can see, the text loses sync – Can you help me fix it?';
  speak(calibrate).then(ms => {
    let msPerChar = ms / calibrate.length;
    console.log("ms per char is ", msPerChar);

    let words = actualText.split(/\s+/);
    let track = () => {
      let delay = 0;
      for (let word of words) {
        setTimeout(() => $('#theWord').text(word), delay);
        delay += msPerChar * word.length;
      }
    };

    window.addEventListener('tts-play', track());
    speak(actualText);
  });
}

body, button {
font-size: 1.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Speech synthesis demo</p>
  <button onclick="go()">Start</button>
  <p>Spoken word: <span id="theWord"></span></p>
</div>

正如你所看到的，文本失去了同步，通过计算来跟踪单词的方法msPerChar需要一些微调。

有什么想法可以改进吗？

谢谢。

PS这是一个jsfiddle，因为它更容易修改：https ://jsfiddle.net/superasn/7oyd0p4f/25/

标签： javascripttext-to-speechhtml5-audiogoogle-speech-apispeech-synthesis