Kā attēlot laikiestatīto transkriptu kopā ar atskaņoto audio

Audio transkripts ir runas teksta versija, kas palīdz sniegt noderīgus materiālus, piemēram, ierakstītas lekcijas, seminārus utt. Viņi arī izmanto, lai saglabātu teksta ierakstus, piemēram, intervijas, tiesas sēdes un sanāksmes.

Runas audio tīmekļa lapās (piemēram, Podcast epizodēs) parasti ir pievienoti transkripti, kas ir noderīgi tiem, kas ir dzirdes traucējumi vai kuri vispār nespēj dzirdēt. Viņi var skatiet tekstu "spēlē" blakus audio. Labākais veids, kā izveidot audio transkriptu, ir manuāla interpretācija un ierakstīšana.

Šajā ziņojumā mēs redzēsim kā rādīt audio pārraidi kopā ar audio. Lai sāktu darbu, mums ir jābūt gatavam. Šim ziņojumam es esmu lejupielādējis izlases audio un tā transkriptu voxtab.

Es izmantoju HTML ul saraksts, lai parādītu dialogus tīmekļa vietnē, piemēram, tālāk:

  Justins: Es cenšos teikt, ka apelācija un izlīgums ir atsevišķi.
 Alistair: Jūs domājat, ka iekšējie un ārējie paziņojumi un paziņojumi tiks iekļauti apelācijas procesā.
 Justins: Labi, jo viņi pieslēdzas apelācijai.
…

Tālāk es vēlos, lai visi pieejamie teksti būtu neskaidri un atbloķēt tikai dialogu, kas atbilst pašreizējai runai, ko atskaņo audio ieraksts. Tātad, lai atbloķētu dialogu, es izmantoju CSS filtru "blur".

#transcript> li -webkit-filtrs: blur (3px) filtrs: izplūdums (3px); pāreja: visi .8s ir viegli;…

IE 10+ varat pievienot teksta ēna lai izveidotu neskaidru efektu. Jūs varat izmantot šo kodu, lai noteiktu, vai CSS izplūšana ir piemērota vai nav, un ielādēt savu īpašo stila lapu. Kad teksts ir izplūdis, es aizgāju uz priekšu un pievienoju stilu.

 ja (getComputedStyle (dialogi [0]). webkitFilter === undefined && getComputedStyle (dialogi [0]). filtrs === "nav") var headEle = document.querySelector ('head'), linkEle = document.createElement (“saite”); linkEle.type = 'text / css'; linkEle.rel = 'stilu lapa'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Tagad pievienosim audio lapu šai lapai.

The ontimeupdate notikums audio elements tiek atlaists katru reizi pašreizējais laiks tiek atjaunināts, tāpēc mēs izmantosim šo notikumu, lai pārbaudītu pašreizējo audio laiku un iezīmētu atbilstošo dialogu transkripcijā. Vispirms radīsim globālus mainīgos, kas mums būs vajadzīgi.

dialogsTimings = [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;

dialogiTimings ir skaitļu virkne, kas attēlo sekundes, kad sākas katrs dialoga dialogs. Pirmais dialogs sākas 0s, otrais 4s, un tā tālāk. iepriekšējāDialogueTime tiks izmantots, lai izsekotu dialoga izmaiņas.

Visbeidzot, ejam uz funkciju, kas ir savienota ar ontimeupdate, kuru sauc par “playTranscript”. Kopš tā laika playTranscript tiek atlaists gandrīz katru sekundi, kad tiek atskaņots audio, vispirms ir jānosaka, kurš dialogs pašlaik tiek atskaņots. Pieņemsim, ka audio ir 0:14, tad tas atskaņo dialogu, kas sākās 0:11 (skatiet dialogiTimings masīvs), ja pašreizējais laiks ir 0:30, tad dialogs sākās 0:29.

Tāpēc, lai uzzinātu, kad sākās pašreizējais dialogs, mēs vispirms filtrējam visus laikus dialogiTimings masīvs, kas ir mazāks par pašreizējo audio laiku. Ja pašreizējais laiks ir 0:14, mēs izfiltrējam visus nos. masīvā, kas ir mazāks par 14 (kas ir 0, 4, 9 un 11) un noskaidro maksimālo nē. no tiem, kas ir 11 (tādējādi dialogs sākās plkst..

funkcija playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (funkcija (v) return v <= audio.currentTime));

Reiz CurrentDialogueTime tiek aprēķināts, mēs pārbaudām, vai tas ir tāds pats kā iepriekšējāDialogueTime(tas ir, ja audio dialogs ir mainījies vai nav), ja tas nav atbilstība (tas ir, ja dialogs ir mainījies), tad CurrentDialogueTime ir piešķirts iepriekšējāDialogueTime.

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

Tagad izmantosim CurrentDialogueTime iekš dialogiTimings masīvs, lai noskaidrotu, kurš dialogs dialoga dialogu sarakstā ir jāizceļ. Piemēram, ja CurrentDialogueTime ir 11, tad indekss 11 dialogiTimings masīvs ir 3, kas nozīmē, ka mums ir jāuzsver dialogs 3. indeksā dialogiem masīvs.

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

Tiklīdz mēs esam atklājuši dialogu, lai izceltu (tas ir pašreizējais dialogs), mēs ritinām transcriptWrapper (ja ritināms) līdz pašreizējais dialogs ir 50px zem iesaiņojuma virsmas, tad mēs uzzinām iepriekš iezīmēto dialogu un noņemsim klasi runājot no tā un pievienojiet to pašreizējais dialogs.

funkcija playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (funkcija (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';

Elements ar klasi runājot parādīs nesapražotu tekstu.

.runā -webkit-filter: blur (0px) filtrs: izplūdums (0px);

Un tas ir viss, šeit ir pilns kods HTML un JS kods.

  Justins: Es cenšos teikt, ka apelācija un izlīgums ir atsevišķi.
 Alistair: Jūs domājat, ka iekšējie un ārējie paziņojumi un paziņojumi tiks iekļauti apelācijas procesā.
 Justins: Labi, jo viņi pieslēdzas apelācijai.
…

Demo

Pārbaudiet tālāk redzamo demonstrāciju, lai iegūtu priekšstatu par to, kā tā darbojas, kad visi kodi ir salikti kopā.