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

Аудио транскрипт је текстуална верзија говора, корисна у пружању корисних материјала као што су снимљена предавања, семинари, итд. Користе се и за вођење текстуалних записа о догађајима као што су разговори, судска саслушања и састанци.

Звук говора на веб страницама (као у подцастима) обично се прати транскриптима, у корист оних који су оштећени слуха или уопште нису у стању да их чују. Могу погледати текст "играње" уз звук. Најбољи начин за креирање аудио транскрипта је ручно тумачење и снимање.

У овом посту, видећемо како приказати аудио транскрипт који се изводи уз аудио. Да бисмо почели, морамо да припремимо транскрипт. За овај пост сам преузела узорак звука и његов транскрипт воктаб.

Користим ХТМЛ ул на листи за приказ дијалога на веб страници као у наставку:

 
 
Јустин: Оно што покушавам да кажем је да су жалба и нагодба одвојени.
 
Алистаир: Мислите да ће комуникација и најаве интерне и екстерне бити уведене у жалбени процес.
 
Јустин: Да, јер се повезују са жалбом.
… 
 
 

Следеће, желим да се сав расположиви текст замути и да разбистри само дијалог који ће одговарати тренутном говору који се репродукује аудио снимком. Дакле, да разбистрим дијалоге, користим ЦСС филтер "блур".

#трансцрипт> ли -вебкит-филтер: блур (3пк) филтер: блур (3пк); транзиција: све .8с лакоћа;…

За ИЕ 10+ можете додати тект-схадов да бисте створили замућени ефекат. Овај код можете користити да бисте открили да ли је примењена замагљеност ЦСС-а или не, и да бисте учитали свој стил слога ИЕ. Када се текст замути, отишао сам напријед и додао неки стил у транскрипт.

 иф (гетЦомпутедСтиле (диалогуес [0]) вебкитФилтер === ундефинед && гетЦомпутедСтиле (диалогуес [0]) филтер === "ноне") ('линк'); линкЕле.типе = 'текст / цсс'; линкЕле.рел = 'стилова'; линкЕле.хреф = 'ие.цсс'; хеадЕле.аппендЦхилд (линкЕле); 

Сада, хајде да додамо звук на страницу, са овим.

Тхе онтимеупдате догађај аудио Елемент се испаљује сваки пут када је његов тренутно време се ажурира, тако да ћемо искористити тај догађај да проверимо тренутно време рада звука и истакнемо одговарајући дијалог у транскрипту. Хајде да прво креирамо неке глобалне променљиве које ће нам требати.

диалогуеТимингс = [0,4,9,11,18,24,29,31,44,45,47]; диалогуес = доцумент.куериСелецторАлл ('# транскрипт> ли'); трансцриптВраппер = доцумент.куериСелецтор ('# трансцриптВраппер'); аудио = доцумент.куериСелецтор ('# аудио'); превиоусДиалогуеТиме = -1; 

диалогуеТимингс је низ бројева који представљају секунде када почиње сваки дијалог у транскрипту. Први дијалог почиње у 0с, други у 4с, и тако даље. превиоусДиалогуеТиме ће се користити за праћење промена дијалога.

Хајде да се коначно пребацимо на функцију закачену онтимеупдате, која се зове "плаиТрансцрипт". Од плаиТрансцрипт Снимање је готово сваке секунде када се аудио репродукује, прво морамо да идентификујемо који се дијалог тренутно репродукује. Претпоставимо да је звук у 0:14, а затим да покрене дијалог који је започео у 0:11 (погледати диалогуеТимингс арраи), ако је тренутно време 0:30 у звуку, онда је то дијалог који је започео у 0:29.

Дакле, да бисмо сазнали када је тренутни дијалог почео, прво филтрирамо сва времена у диалогуеТимингс низ који је испод тренутног времена звука. Ако је тренутно време 0:14, филтрирамо све бројеве. у низу који је испод 14 (који су 0, 4, 9 и 11) и сазнај максимум бр. од њих, што је 11 (дијалог је започео у 0:11).

фунцтион плаиТрансцрипт () вар цуррентДиалогуеТиме = Матх.мак.аппли (Математика, диалогТимингс.филтер (фунцтион (в) ретурн в <= audio.currentTime));  

Када се цуррентДиалогуеТиме израчунава се, проверавамо да ли је иста као и превиоусДиалогуеТиме(то јест, ако се дијалог у звуку промијенио или не), ако се не подудара (то јест ако се дијалог промијенио), онда цуррентДиалогуеТиме је додељен превиоусДиалогуеТиме.

фунцтион плаиТрансцрипт () вар цуррентДиалогуеТиме = Матх.мак.аппли (Математика, диалогТимингс.филтер (фунцтион (в) ретурн в <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;   

Сада ћемо користити индекс цуррентДиалогуеТиме у диалогуеТимингс да бисте сазнали који дијалог у листи дијалога треба да буде истакнут. На пример, ако је цуррентДиалогуеТиме је 11, затим индекс 11 диалогуеТимингс арраи је 3, што значи да морамо означити дијалог у индексу 3 у дијалозима арраи.

фунцтион плаиТрансцрипт () вар цуррентДиалогуеТиме = Матх.мак.аппли (Математика, диалогТимингс.филтер (фунцтион (в) ретурн в <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];   

Када пронађемо дијалог да истакнемо (то је цуррентДиалогуе), померамо се трансцриптВраппер (ако се помера) до цуррентДиалогуе је 50пк испод врха омотача, онда ћемо сазнати претходно истакнути дијалог и уклонити класу говорим и додајте га цуррентДиалогуе.

фунцтион плаиТрансцрипт () вар цуррентДиалогуеТиме = Матх.мак.аппли (Математика, диалогТимингс.филтер (фунцтион (в) ретурн в <= 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';   

Елемент са класом говорим ће приказати нејасан текст.

.спеакинг -вебкит-филтер: блур (0пк) филтер: блур (0пк); 

И то је то, ево пуног кода ХТМЛ и ЈС кода.

 
 
Јустин: Оно што покушавам да кажем је да су жалба и нагодба одвојени.
 
Алистаир: Мислите да ће комуникација и најаве интерне и екстерне бити уведене у жалбени процес.
 
Јустин: Да, јер се повезују са жалбом.
… 
 
 
  
  

Демо

Погледајте демо испод да бисте добили идеју како функционише када се сви кодови саставе.