Trying to implement some basic music player.
I have an array of Words objects, each one represent a word and build with the next structure:
{
text: "Hello"
time: 2.24
duration: 0.32
}
Trying to figure what is the right way to display the current word on the screen while the music plays. That means, when the audio file will speak the "hello" text after playing for 2.24 seconds, I want to display it on the screen. same for the word after, etc.
- Setting a setInterval of 10ms will apply some checks on the array is a super heavy task for the JS thread. not sounds like a good idea.
e.g thought about creating some Map object, when the time is the key, to try to catch the Map[time] with the setInterval..
Maybe iterate over the array of words and create a VTT file inside the browser to send it to the tag? will it even possible to display the subtitles properly that way?
Any ideas? Suggestions?? maybe some general direction?? a bit stuck with it.
Thanks!!