Question

我有一个页面嵌入mp3音频文件以及相关的<track kind="subtitles"> .vtt文件，该文件包含我循环浏览并加载到页面div上的字幕。

我有一个简单的fs函数，可以在播放音频时更改相关字幕的格式-想想它是卡拉OK播放器，在需要演唱时突出显示每一行：

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

我已经注意到格式更新的偶尔和不一致的延迟，这对于我的目的而言并不理想。在将音频播放器时序发布到控制台以试图弄清楚可能是什么原因时，我得到以下示例：

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

我在网上闲逛，我发现每秒仅检查几次oncuechange引用-如果是这种情况，那么我看到的延迟较长可能是由于定时不佳和系统时钟以及解释不一致之处。

虽然我不需要绝对完美的时间来执行事件，但如果我可以更频繁地检查事件（例如每0.1 / s）以减少不可预测性，那就太好了！

这个问题：有没有办法解决A.增加事件检查的频率？或者B.这样做是否有所不同，以使事件计时更准确？

预先感谢您的任何意见或建议。

编辑日期：2018年1月10日-其他信息并添加html5 / jQuery标记

受this SO thread的启发，我尝试了一个页面计时器，该计时器检查活动提示ID的更改并将结果发布到控制台：

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;
            }   
        }
    }
}

在此测试中，大多数新测试日志在oncuechange事件之后立即发生。有时，它会击败oncuechange，但仅能打败一小部分，不足以发挥作用（请参阅上一字幕时间）。我最初将cueTick延迟设置为100，然后将其设置为50、10，最后是1，结果没有任何明显的差异：

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

因此仍然没有进展-或至少不足以考虑实现这种不同的方法。还有其他建议吗？

预先感谢

HTML5音轨oncuechange速度太慢

0 个答案: