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

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

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

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

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

 
 
ДжастинЯ пытаюсь сказать, что апелляция и урегулирование являются отдельными.
 
Alistair: Вы имеете в виду, что сообщения и объявления, как внутренние, так и внешние, будут включены в процесс обжалования.
 
ДжастинПравильно, потому что они подключаются к апелляции.
... 
 
 

Далее я хочу, чтобы весь доступный текст был размытым и убрать только диалог, который будет соответствовать текущей речи, воспроизводимой аудиозаписью. Таким образом, чтобы размыть диалоги, я использую CSS-фильтр «размытие».

#transcript> li -webkit-filter: blur (3px) filter: blur (3px); переход: все .8 легкость;…

Для IE 10+ вы можете добавить текст-тень создать размытый эффект. Вы можете использовать этот код для определения того, было ли применено размытие CSS или нет, и для загрузки вашей конкретной таблицы стилей IE. После того, как текст размыт, я добавил стиль в транскрипт.

 if (getComputedStyle (dialogues [0]). webkitFilter === undefined && getComputedStyle (dialogues [0]). filter === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ('ссылка на сайт'); linkEle.type = 'text / css'; linkEle.rel = 'таблица стилей'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle); 

Теперь давайте добавим аудио на страницу, с этим.

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

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; 

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

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

Следовательно, чтобы узнать, когда начался текущий диалог, мы сначала фильтруем все время в dialogueTimings массив, который ниже текущего времени аудио. Если текущее время 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 рассчитывается, мы проверяем, совпадает ли это с previousDialogueTime(то есть, если диалог в аудио изменился или нет), если он не совпадает (то есть, если диалог изменился), то currentDialogueTime назначен на previousDialogueTime.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (function (v) return v) <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;   

Теперь давайте использовать индекс currentDialogueTime в dialogueTimings массив, чтобы узнать, какой диалог в списке диалогов должен быть выделен. Например, если currentDialogueTime 11, то индекс 11 в dialogueTimings массив равен 3, что означает, что мы должны выделить диалог по индексу 3 в диалоги массив.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (function (v) return v) <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];   

Как только мы нашли диалог, чтобы выделить (это currentDialogue) мы прокручиваем transcriptWrapper (если прокручивается) до currentDialogue на 50px ниже вершины оболочки, тогда мы находим ранее выделенный диалог и удаляем класс Говорящий от него и добавить его в currentDialogue.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (function (v) return v) <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)]; transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50; var previousDialogue = document.getElementsByClassName('speaking')[0]; if(previousDialogue !== undefined) previousDialogue.className = previousDialogue.className.replace('speaking',"); currentDialogue.className +=' speaking';   

Элемент с классом Говорящий будет отображать не размытый текст.

.говорящий -webkit-фильтр: размытие (0px); фильтр: размытие (0px); 

И это все, вот полный код HTML и код JS.

 
 
ДжастинЯ пытаюсь сказать, что апелляция и урегулирование являются отдельными.
 
Alistair: Вы имеете в виду, что сообщения и объявления, как внутренние, так и внешние, будут включены в процесс обжалования.
 
ДжастинПравильно, потому что они подключаются к апелляции.
... 
 
 
  
  

демонстрация

Посмотрите демонстрацию ниже, чтобы понять, как она работает, когда все коды собраны вместе..