在DraftJS中创建"卡拉OK"类型功能

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 几周后，这似乎是正确的方法。