Odtnhj

I have a page that embeds a mp3 audio file along with associated <track kind="subtitles"> .vtt file containing the subtitles which I loop through and load in to divs on the page.

I have a simple fs function to change the formatting of the relevant subtitle as the audio plays - think of it is a karaoke player, highlighting each line as it needs to be sung:

trackData.oncuechange = function(e) 
 var cue = this.activeCues[0];
 if(cue)
 updateSubs(cue); // Loops cues, lowlights old cues, highlights current cue
 

I have noticed occasional and inconsistent delays on the formatting updates which is not desirable for my purpose. In posting audio player timings to to the console trying to figure out what might be causing it I get the following example:

Subtitle1 > Cue Time: 13.000 | Event fired @: 13.213424 | Diff: +0.213424 | Noticable
Subtitle2 > Cue Time: 17.109 | Event fired @: 17.209143 | Diff: +0.100143 | Okay
Subtitle3 > Cue Time: 27.004 | Event fired @: 27.215233 | Diff: +0.211233 | Noticable
Subtitle4 > Cue Time: 30.477 | Event fired @: 30.479385 | Diff: +0.002385 | Great
Subtitle5 > Cue Time: 34.151 | Event fired @: 34.217562 | Diff: +0.066562 | Good
Subtitle6 > Cue Time: 39.748 | Event fired @: 39.966155 | Diff: +0.218155 | Noticable
Subtitle7 > Cue Time: 41.601 | Event fired @: 41.714627 | Diff: +0.113627 | Okay

Hunting around online I have found a couple of references to oncuechange being checked only a few times per second - If this is the case then presumably the longer delays I am seeing are a case of bad timing in conjunction with a system clock and explains the inconsistency.

While I don't need absolutely perfect timings for the event being actioned, if I could get the event being checked more frequently (say every 0.1/s) to reduce the unpredictability then that would be great!

So to the question: Is there a way to A. Increase the frequency of event checks? Or B. Do this differently so that the event timings are more accurate?

Thanks in advance for any advice or suggestions.

Edited: 01/10/2018 - Additional info and adding html5 / jQuery tags

Inspired by this SO thread I tried a page timer that checked for the active cue ID changing and posting the results into the console:

var cueTick = window.setInterval(function() cueTest() , 1);
var currentCue = '';
var trackData = null;
var media = document.getElementById('media');

function cueTest() 
 if(tD == null) 
 trackData = document.getElementById('lyrics').track;
 else 
 if(!media.paused) 
 var cue = trackData.activeCues[0];

 if(cue) 
 if(cue.id != currentCue) 
 console.log('Cue change: ' + cue.id + ' @' + media.currentTime);
 
 currentCue = cue.id;
 
 
 

In this test a majority of the new test logs occurred immediately after the oncuechange events. Occasionally it would beat the oncuechange but only by a fraction and not enough to make a difference (see last subtitle timing). I initially has the cueTick delay set to 100, then dropped it to 50, 10 and finally 1 without any noticeable difference in the results:

Subtitle1 > Cue Time: 13.000 | Event fired @: 13.210600 | CueTick @: +13.212663
Subtitle2 > Cue Time: 17.109 | Event fired @: 17.203449 | CueTick @: +17.207203
Subtitle3 > Cue Time: 27.004 | Event fired @: 27.211385 | CueTick @: +27.213652
Subtitle4 > Cue Time: 30.477 | Event fired @: 30.706449 | CueTick @: +30.708527
Subtitle5 > Cue Time: 34.151 | Event fired @: 34.211961 | CueTick @: +34.214185
Subtitle6 > Cue Time: 39.748 | Event fired @: 39.956704 | CueTick @: +39.958703
Subtitle7 > Cue Time: 41.601 | Event fired @: 41.712700 | CueTick @: +41.714778
Subtitle8 > Cue Time: 43.944 | Event fired @: 43.963283 | CueTick @: +43.962736

So still no progress - or at least not enough to consider implementing this different method. Any other suggestions?

Thanks in advance