У меня есть страница, которая встраивает аудиофайл mp3 вместе со связанным <track kind="subtitles">
.vtt файлом, содержащим субтитры, которые я перебираю и загружаю в div для страницы.
У меня есть простая функция fsчтобы изменить форматирование соответствующих субтитров при воспроизведении звука, подумайте, что это караоке-плеер, выделяя каждую строку так, как ее нужно петь:
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 / с), чтобы уменьшить непредсказуемость, то это было бы здорово!
Итак, на вопрос: Есть ли способ А. Увеличить частоту проверок событий?Или B. Сделайте это по-другому, чтобы время проведения мероприятия было более точным?
Заранее благодарим за любые советы или предложения.
Отредактировано: 01/10/2018 - Дополнительная информация и добавление тегов html5 / jQuery
Вдохновлен этой темой Я попытался таймер страницы, который проверен наизменение идентификатора активной метки и внесение результатов в консоль:
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
Так что пока нет прогресса - или, по крайней мере, недостаточно, чтобы рассмотреть возможность реализацииэто другой метод.Любые другие предложения?
Заранее спасибо