HTML5 Аудио трек на скорости смены скорости слишком медленный - PullRequest
0 голосов
/ 27 сентября 2018

У меня есть страница, которая встраивает аудиофайл 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

Так что пока нет прогресса - или, по крайней мере, недостаточно, чтобы рассмотреть возможность реализацииэто другой метод.Любые другие предложения?

Заранее спасибо

...