javascript - 如何突出显示 Amazon Polly 中的音频播放词

Question

我正在尝试在应用程序中实现 amazon Polly。它是一个 MVC 应用程序。我能够从文本中检索音频并且工作正常。并试图在播放该音频时突出显示网页中的相应文本。就像后置扬声器一样。我的目标是在没有第三方应用程序的情况下实现它。我浏览了文档，但找不到任何有用的东西。我没有在 amazon Polly 中找到任何自动突出显示文本的选项。

我们可以为此对语音标记做些什么吗？有什么办法吗？

提前致谢:)

编辑

我有语音标记 JSON 结果。现在我陷入了如何将此结果与 HTML 音频标签同步的问题。

{"time":6,"type":"word","start":0,"end":2,"value":"Hi"}
{"time":587,"type":"word","start":4,"end":6,"value":"my"}
{"time":754,"type":"word","start":7,"end":11,"value":"name"}
{"time":1147,"type":"word","start":12,"end":14,"value":"is"}
{"time":1305,"type":"word","start":15,"end":19,"value":"John"}

Answer 1

I have the speech mark JSON result. Now am stuck on how to sync this result with an HTML audio tag.

您可以使用 timeupdate事件和audio元素并同步 audio.currentTime最匹配的属性speech mark from Polly .

这假设 audio 引用 HTML 音频元素的 JavaScript 变量，该元素的 src 设置为从 Polly 返回的与文本语音标记相对应的音频文件:

function getSpeechMarkAtTime(speechMarks, time) {
  const length = speechMarks.length
  let match = speechMarks[0]
  let found = false
  let i = 1

  while (i < length && !found) {
    if (speechMarks[i].time <= time) {
      match = speechMarks[i]
    } else {
      found = true
    }

    i++
  }

  return match
}

function onTimeUpdate(speechMark) {
  /**
   * Update your HTML and CSS based on the attributes
   * of the speech mark at the audio's current time.
   */
}

audio.addEventListener('timeupdate', () => {
  // Polly Speech Marks use milliseconds
  const currentTime = audio.currentTime * 1000
  const speechMark = getSpeechMarkAtTime(speechMarksJSONResult, currentTime)

  // Some custom callback
  onTimeUpdate(speechMark)
})