javascript - 在DraftJS中创建 "Karaoke"类型功能

我正在尝试实现一个DraftJS编辑器，该编辑器在播放录制的音频时会突出显示转录中的单词(有点像卡拉OK)。

我收到以下格式的数据:

[
  {
    transcript: "This is the first block",
    timestamps: [0, 1, 2.5, 3.2, 4.1, 5],
  },
  {
    transcript: "This is the second block. Let's sync the audio with the words",
    timestamps: [6, 7, 8.2, 9, 10, 11.3, 12, 13, 14, 15, 16, 17.2],
  },
  ...
]

然后，我将接收到的数据映射到ContentBlocks并通过使用ContentState初始化编辑器的ContentState.createFromBlockArray(blocks)
似乎存储时间戳元数据的“DraftJS”方法是为每个带有相应时间戳的单词创建一个Entity，然后在音频播放过程中扫描currentContent并突出显示实体，直到当前耗时为止。但是我不确定这是否是正确的方法，因为它似乎不适合大型抄录。

注意:在保持此卡拉OK功能的同时，成绩单需要保持可编辑状态

任何帮助或讨论表示赞赏!

最佳答案

我最终完全按照问题中的描述进行操作:将时间戳存储在DraftJS实体中。在使用DraftJS几周后，看来这是正确的方法。

关于javascript - 在DraftJS中创建 "Karaoke"类型功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45763458/