title: Create "Karaoke" Type Functionality in DraftJS
body: <p>I am attempting to implement a DraftJS editor that highlights words in a transcription while its recorded audio is playing (kind of like karaoke).</p>
  
  <p>I receive the data in this format:</p>
  
  <pre><code>[
    {
      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],
    },
    ...
  ]
  </code></pre>
  
  <p>I then map this received data to <code>ContentBlocks</code> and initialize the editor's <code>ContentState</code> with them by using  <code>ContentState.createFromBlockArray(blocks)</code></p>
  
  <p>It seems like the "DraftJS" way of storing the timestamp metadata would be to create an <code>Entity</code> for each word with its respective timestamp, and then scan through the <code>currentContent</code> as the audio plays and highlight entities up until the current elapsed time. But I am not sure if this is the right way to do this, as it doesn't seem performant for large transcriptions.</p>
  
  <p>Note: the transcript needs to remain editable while maintaining this karaoke functionality</p>
  
  <p>Any help or discussion is appreciated!</p>