Как да се покаже Времевият транскрипт заедно с аудио

Звуковата транскрипция е текстовата версия на речта, която е полезна за предоставяне на полезни материали като записани лекции, семинари и т.н. Те също така се използват за съхраняване на текстови записи на събития като интервюта, съдебни заседания и срещи.

Аудиото на речта в уеб страници (като в подкасти) обикновено се придружава с преписи, в полза на хората с увреден слух или изобщо не могат да чуят. Те могат да видите текста "играе" заедно с аудиото. Най-добрият начин за създаване на аудиозапис е чрез ръчна интерпретация и запис.

В този пост ще видим как да показвате работещ аудиозапис заедно с аудиото. За да започнем, трябва да подготвим транскрипта. За тази публикация изтеглих пробен звук и препис от него voxtab.

Използвам HTML ул списък за показване на диалози на уеб страница, както е показано по-долу:

  Джъстин: Опитвам се да кажа, че жалбата и споразумението са отделни.
 Алистър: Искаш да кажеш, че вътрешните и външните комуникации и съобщения ще бъдат включени в процеса на обжалване.
 Джъстин: Точно така, защото се свързват с жалбата.
...

След това искам всички налични текстове да бъдат размазани и на размазвайте само диалога, който съответства на текущата реч, която се възпроизвежда от аудиозаписа. Така че, за да размазвам диалозите, използвам CSS филтъра "blur".

#transcript> li -webkit-filter: филтър за размазване (3px): размазване (3px); преход: всички .8s лекота;…

За IE 10+ можете да добавите текстови сянка за да създадете размазан ефект. Можете да използвате този код, за да откриете дали е приложено размазване на CSS или не, и да заредите вашата специална таблица за стилове в IE. След като текстът е размазан, аз продължих и добавих стил към преписа.

 if (getComputedStyle (диалози [0]). webkitFilter === undefined && getComputedStyle (диалози [0]). ( "връзка"); linkEle.type = 'текст / css'; linkEle.rel = 'stylesheet'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Сега, нека добавим аудиото към страницата, с това.

Най- ontimeupdate събитие звуков елементът се изстрелва всеки път, когато се текущо време се актуализира, така че ще използваме това събитие, за да проверим текущото време на работа на аудиото и да подчертаем съответния диалог в преписа. Нека първо създадем някои глобални променливи, които ще са ни необходими.

dialogueTimings = [0,4,9,11,18,24,29,31,44,45,47]; диалози = document.querySelectorAll ('# transcript> li'); transcriptWrapper = document.querySelector ('# transcriptWrapper'); audio = document.querySelector ('# audio'); previousDialogueTime = -1;

dialogueTimings е масив от числа, представляващи секундите, когато започва всеки диалог в транскрипта. Първият диалог започва от 0s, втори в 4s, и така нататък. previousDialogueTime ще се използва за проследяване на промените в диалога.

Нека най-накрая да преминем към функцията, прикачена към ontimeupdate, което се нарича "playTranscript". От playTranscript изстрелва се почти всяка секунда, когато звукът се възпроизвежда, трябва първо да определим кой диалог се изпълнява в момента. Да предположим, че аудиото е в 0:14, след това възпроизвежда диалога, който започна в 0:11 (препратете dialogueTimings масив), ако текущото време е 0:30 в аудиото, тогава е диалогът, който започна в 0:29.

Следователно, за да разберем кога е започнал текущият диалог, първо филтрираме всички времена в dialogueTimings масив, които са под текущото време на звука. Ако текущото време е 0:14, филтрираме всички номера. в масива, който е под 14 (които са 0, 4, 9 и 11) и разберете максимума не. от тези, които са 11 (така диалогът започна в 0:11).

функция playTranscript () var currentDialogueTime = Math.max.apply (Математика, dialogTimings.filter (функция (v) връщане v <= audio.currentTime));

Веднъж currentDialogueTime се изчислява, проверяваме дали е същата като previousDialogueTime(ако диалогът в аудиото се е променил или не), ако не е съвпадение (ако диалогът се е променил), то currentDialogueTime е присвоено previousDialogueTime.

функция playTranscript () var currentDialogueTime = Math.max.apply (Математика, dialogTimings.filter (функция (v) връщане v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;

Сега да използваме индекса на currentDialogueTime в dialogueTimings масив, за да разберете кой диалог в списъка с диалози трябва да бъде подчертан. Например, ако currentDialogueTime е 11, след това индекс от 11 в dialogueTimings масив е 3, което означава, че трябва да подчертаем диалога в индекс 3 в диалози масив.

функция playTranscript () var currentDialogueTime = Math.max.apply (Математика, dialogTimings.filter (функция (v) връщане v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];

След като намерим диалога, който да подчертае (това е currentDialogue), превъртаме transcriptWrapper (при превъртане) до currentDialogue е 50px под горната част на опаковката, след което откриваме предварително подчертания диалог и премахваме класа говорещ от него и го добавете currentDialogue.

функция playTranscript () var currentDialogueTime = Math.max.apply (Математика, dialogTimings.filter (функция (v) връщане 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 кода.

  Джъстин: Опитвам се да кажа, че жалбата и споразумението са отделни.
 Алистър: Искаш да кажеш, че вътрешните и външните комуникации и съобщения ще бъдат включени в процеса на обжалване.
 Джъстин: Точно така, защото се свързват с жалбата.
...

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

Вижте демото по-долу, за да получите представа как работи, когато всички кодове са събрани.