Как отображать синхронизированную транскрипцию вместе с воспроизводимым аудио

Аудио транскрипт – это текстовая версия речи, полезная для предоставления полезных материалов, таких как записанные лекции, семинары и т. Д. Для людей с ограниченными возможностями. Они также используются для ведения текстовых записей таких событий, как интервью, судебные заседания и встречи.

Речевой звук на веб-страницах (например, в подкастах) обычно сопровождается стенограммой для тех, кто плохо слышит или вообще не может слышать. Они могут просматривать текст «игра» вместе с аудио. Лучший способ создать аудио стенограмму – это ручная интерпретация и запись.

В этом посте мы увидим, как отображать текущую аудиозапись вместе со звуком. Для начала нам нужно подготовить стенограмму. Для этого поста я скачал образец аудио и его расшифровку voxtab,

Подробнее: Руководство для начинающих по настройке собственных подкастов

Я использую HTML ul list для отображения диалогов на веб-странице, как показано ниже:

Далее, я хочу, чтобы весь доступный текст был размытым и чтобы не размыть только диалог, который будет соответствовать текущей речи, воспроизводимой аудиозаписью. Таким образом, чтобы размыть диалоги, я использую CSS-фильтр «размытие».
#transcript> li {
     -webkit-filter: blur (3px)
    фильтр: размытие (3 пикселя);
    переход: все .8 легкость;
    …
}
Для IE 10+ вы можете добавить текстовую тень, чтобы создать размытый эффект. Вы можете использовать этот код для определения того, было ли применено размытие CSS или нет, и для загрузки вашей конкретной таблицы стилей IE. После того, как текст размыт, я добавил немного стиля в стенограмму.

if (getComputedStyle (диалоги[0]) .webkitFilter === undefined && getComputedStyle (диалоги[0]) .filter === “нет”) {
    var headEle = document.querySelector (‘head’),
      linkEle = document.createElement (‘ссылка’);
      linkEle.type = ‘text / css’;
      linkEle.rel = ‘таблица стилей’;
      linkEle.href = “https://www.hongkiat.com/ie.css”;
      headEle.appendChild (linkEle);
}
Теперь давайте добавим аудио на страницу с этим.

Событие ontimeupdate элемента audio запускается каждый раз, когда его currentTime обновляется, поэтому мы будем использовать это событие, чтобы проверить текущее время воспроизведения аудио и выделить соответствующий диалог в стенограмме. Давайте сначала создадим некоторые глобальные переменные, которые нам понадобятся.
dialogTimings = [0,4,9,11,18,24,29,31,44,45,47];
dialogues = document.querySelectorAll (‘# transcript> li’);
transcriptWrapper = document.querySelector (‘# transcriptWrapper’);
audio = document.querySelector (‘# audio’);
previousDialogueTime = -1;

dialogTimings – это массив чисел, представляющих секунды, когда начинается каждый диалог в стенограмме. Первый диалог начинается с 0, второй – с 4, и так далее. previousDialogueTime будет использоваться для отслеживания изменений в диалоге.

Давайте наконец перейдем к функции, подключенной к ontimeupdate, которая называется playTranscript. Поскольку playTranscript запускается почти каждую секунду, когда воспроизводится звук, нам сначала нужно определить, какой диалог воспроизводится в данный момент. Предположим, что звук находится в 0:14, затем он воспроизводит диалог, который начался в 0:11 (см. Массив dialogTimings), если текущее время в аудио составляет 0:30, то это диалог, который начался в 0:29.

Следовательно, чтобы узнать, когда начался текущий диалог, мы сначала фильтруем все время в массиве dialogTimings, которые находятся ниже текущего времени аудио. Если текущее время 0:14, мы отфильтровываем все номера. в массиве ниже 14 (которые равны 0, 4, 9 и 11) и найдите максимальное число нет. из тех, что 11 (таким образом, диалог начался в 0:11).
function playTranscript () {
    var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (function (v) {return v <= audio.currentTime}));
}

После того, как currentDialogueTime рассчитан, мы проверяем, совпадает ли он с предыдущимDialogueTime (то есть, если диалог в аудио изменился или нет), если он не совпадает (то есть, если диалог изменился), то currentDialogueTime назначается previousDialogueTime.
function playTranscript () {
    var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (function (v) {return v <= audio.currentTime}));

    if (previousDialogueTime! == currentDialogueTime) {
        previousDialogueTime = currentDialogueTime;
    }
}

Теперь давайте воспользуемся индексом currentDialogueTime в массиве dialogTimings, чтобы выяснить, какой диалог в списке диалогов расшифровки должен быть выделен. Например, если currentDialogueTime равен 11, то индекс 11 в массиве dialogTimings равен 3, что означает, что мы должны выделить диалог с индексом 3 в массиве dialogues.
function playTranscript () {
    var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (function (v) {return v <= audio.currentTime}));

    if (previousDialogueTime! == currentDialogueTime) {
        previousDialogueTime = currentDialogueTime;
        var currentDialogue = диалоги[dialogueTimings.indexOf(currentDialogueTime)];
    }
}

Как только мы нашли диалог для выделения (то есть currentDialogue), мы прокручиваем transcriptWrapper (если прокручиваем) до тех пор, пока currentDialogue не окажется на 50 пикселей ниже вершины оболочки, затем мы находим ранее выделенный диалог, удаляем из него говорящий класс и добавляем его. к текущему диалогу.
function playTranscript () {
    var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (function (v) {return v <= audio.currentTime}));

    if (previousDialogueTime! == currentDialogueTime) {
        previousDialogueTime = currentDialogueTime;
        var currentDialogue = диалоги[dialogueTimings.indexOf(currentDialogueTime)];
        transcriptWrapper.scrollTop = currentDialogue.offsetTop – 50;
        var previousDialogue = document.getElementsByClassName (‘говорящий’)[0];
        if (previousDialogue! == undefined)
            previousDialogue.className = previousDialogue.className.replace (‘говорящий’, ”);
        currentDialogue.className + = ‘говорящий’;
    }
}

Элемент с выступлением класса будет отображать не размытый текст.
.Говорящий{
  -webkit-filter: blur (0px)
  Фильтр: размытие (0px);
}
И это все, вот полный код HTML и код JS.