Every word in a different span

Hey everyone, I’m am working on making an editor where each word should be in a span with some meta data this is because I’m making the editor for viewing the editing transcript. I have a json file containing each word in the transcript and the timestamp of that word. As the audio plays I want to highlight the currently spoken word for which I need access to that word’s timestamp (e.g. where the word started and where it ended <span data-time-start="32.12" data-time-end="32.9">test</span>)

I can simply use the json data to create html and insert it into the editor but I can’t do that because I have a text file of the transcript which contains the correctly formatted transcript with all the right linebreaks and speaker tracking. So I want to use that text file to render the text with correct formatting and I also want to keep each word in a span and each paragraph in a p tag.

Please guide me towards the right answer Thank you