Is it possible to highlight the currently playing word

[Bodawen]

The current highlighting feature of the editor is based on the paragraph, i.e., highlighting previously played paragraphs. However, highlighting words in long paragraphs can improve the user experience. Some other projects, such as BBC-react-transcript-editor provide this feature. As shown in the figure, the previous words are black. The current word has a green background. The words after that are gray.

Therefore, I have three questions.

1. from your point of view, is this feature necessary?
2. why does this editor not support this feature? Is it because it will degrade performance?
3. I observe that I can't get the timestamp of each word directly from the HTML file directly, which makes it difficult to implement this feature. Do you have any suggestions for implementing this feature?

[pietrop]

Hi @Bodawen
For background, I was one of the initial creator of BBC React Transcript Editor with @jamesdools .

1. from your point of view, is this feature necessary?

When I removed it, my users did not complain that it was gone, so I took that as a sign that it was a nice to have. And altho it might be important for some users, for the majority they seem to be able to successfully correct and navigate a transcript without.

2. why does this editor not support this feature? Is it because it will degrade performance?

Correct, I think there's some more details in one of the issues. from my perspective, It came to a point where I had to choose between performance, keeping the editor snappy, and responsive when handling transcripts over an hour vs having word level highlight, and I chose performance (for slate-transcript-editor).

3. I observe that I can't get the timestamp of each word directly from the HTML file directly, which makes it difficult to implement this feature. Do you have any suggestions for implementing this feature?

Ah, yes the time stamps are stored in the paragraph as a list of word objects. Eg see src/util/dpe-to-slate/index.js#L71.

At the moment I am not sure how this could be done, without wrapping the words into span tags, which would decrease performance. Perhaps there's a way with CSS injection? using nth selector, eg if there's a way to have current time, use it calculate the position of the word in the paragraph, and then the nth selector to select that word. Altho not sure if you can use nth selector (or something equivalent) to select text? probl not, not sure.

[Bodawen]

Thank you for your quick reply. Great advice! So have you tested how much the performance of the editor would be reduced if our highlighting feature was implemented by wrapping the words with timestamps into span tags?

[pietrop]

Yeah, it tends to get sluggish and unresponsive, and it becomes harder to edit the text for transcripts over one hour.