我正在尝试实现一个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.createFromBlockArray(blocks)
初始化编辑器的 ContentState
似乎存储时间戳元数据的方法是为每个单词创建一个 Entity
及其各自的时间戳,然后在音频播放时扫描 currentContent
并突出显示实体直到当前经过的时间 . 但我不确定这是否是正确的方法,因为它似乎不适合大型转录 .
注意:在保持此卡拉OK功能的同时,成绩单需要保持可编辑状态
任何帮助或讨论表示赞赏!
1 回答
我最终完成了我在问题中描述的内容:在DraftJS实体中存储时间戳 . 使用DraftJS几周后,似乎这是正确的方法 .