音频和字幕的时间安排

Question

我有一个对象

read={
    0:{
        all: 5880,
        from: 10680,
        to: 16560,
        text: "<div class='lrc'>It's been a long day without you my friend</div> "
    },
    1:{
        all: 5260,
        from: 17560,
        to: 22820,
        text: "<div class='lrc'>And I'll tell you all about it when I see you again  </div>"
    },
    2:{
        all: 5340,
        from: 23370,
        to: 28710,
        text: "<div class='lrc'>We've come a long way from where we began</div> "
    },
};

我想对字幕和音频进行计时，我在这里做了一些事情：jsFiddle。

当播放音频时，如果读取变量中的时间和时间相同，则将文本的颜色更改为红色并显示下一行（看起来像卡拉OK动画）。现在我陷入了计时步骤。有人可以帮忙吗？