Timestamps and subtitles

JavaScript
1

I’m trying to build a player that will display subtitles that will work in all browsers, since support for html5 video subtitles is still in alpha/beta phase and it doesn’t or works faulty in different browsers. I got start and beginning for each subtitle line and also know currentTime. My question is what my approach sholud be?

Here is what i tried:

        /*Stuck here*/
        let currTime = (this.state.currentTime*1000);//In ms.

        let subLine = (currTime<904) ? "blah" : "trt";
        //console.log(currTime);
        //console.log(this.state.subs);
        
        let inc = 0;

        if(this.state.subs){

            let subDur = 0;
    
            setInterval(()=>{
    
                while(inc<this.state.subs.length){
                    subDur = this.state.subs[inc].end-this.state.subs[inc].start;
                    if(currTime<=this.state.subs[inc].end && currTime>=this.state.subs[inc].start){
                        console.log(this.state.subs[inc].text);
                    }
    
                    if(currTime===this.state.subs[inc].end){
                        inc++;
                    }

                }
                

            }, subDur);
            console.log(currTime);
            console.log(inc);
        }

this.state.subs contain a array of subtitles with their accompanying starts and ends:

[
  {
    start: 20000, // time in ms
    end: 24400,
    text: 'Bla Bla Bla Bla'
  },
  {
    start: 24600,
    end: 27800,
    text: 'Bla Bla Bla Bla',
    settings: 'align:middle line:90%' // WebVTT only
  }
]

I’ve used this library for getting info from .srt files.

Sorted. Here’s a working code:

        let currTime = (this.state.currentTime*1000);//In ms.
        let inc = 0;

        if(this.state.subs){

            let subDur = 0;
    
            while(inc<this.state.subs.length){
                subDur = this.state.subs[inc].end-this.state.subs[inc].start;
                
                let start = this.state.subs[inc].start;
                let end = this.state.subs[inc].end;

                if(currTime<=end && currTime>=start){
                    
                    this.setState({
                        line: this.state.subs[inc].text,
                    });

                }

                if(currTime>=end){

                    this.setState({
                        line: "",
                    });

                }

                inc++;
            }
                
        }