在DraftJS

Question

我正在尝试实现一个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功能的同时，成绩单需要保持可编辑状态

感谢任何帮助或讨论！

Answer 1

我最终完成了我在问题中描述的内容：在DraftJS实体中存储时间戳。使用DraftJS几周后，似乎这是正确的方法。