Ako zobraziť časový prepis vedľa prehrávaného zvuku

Prepis zvuku je textová verzia reči, užitočná pri poskytovaní užitočných materiálov, ako sú nahrané prednášky, semináre atď. Používajú sa aj na uchovávanie textových záznamov o udalostiach, ako sú rozhovory, súdne vypočutia a stretnutia.

Reprodukcia zvuku na webových stránkach (napríklad v podcastoch) je zvyčajne sprevádzaná prepismi, v prospech tých, ktorí majú sluchovo postihnutých alebo nie sú schopní počuť vôbec. Môžu zobrazte text "prehrávanie" vedľa zvuku. Najlepší spôsob, ako vytvoriť prepis zvuku, je manuálna interpretácia a nahrávanie.

V tomto príspevku budeme vidieť ako zobraziť bežný prepis zvuku vedľa zvuku. Na začiatok musíme mať pripravený prepis. Pre tento príspevok som si stiahol ukážkový zvuk a jeho prepis voxtab.

Používam HTML ul zobraziť dialógové okná na webovej stránke, ako je uvedené nižšie:

  Justin: Snažím sa povedať, že odvolanie a vyrovnanie sú oddelené.
 Alistair: Myslíte, že komunikácia a vnútorné a vonkajšie oznámenia by sa dostali do odvolacieho procesu.
 Justin: Správne, pretože sa pripájajú k odvolaniu.
...

Ďalej chcem, aby bol všetok dostupný text rozmazaný a odblokujte iba dialóg, ktorý zodpovedá aktuálnej reči, ktorú prehrá zvukové nahrávanie. Takže, aby sa rozbili dialógy používam filter CSS "rozostrenie".

#transcript> li -webkit-filter: rozostrenie (3px) filter: rozostrenie (3px); prechod: všetko .8s ľahké; ...

Pre IE 10+ môžete pridať text-shadow aby sa vytvoril rozmazaný efekt. Pomocou tohto kódu môžete zistiť, či sa používa rozmazanie CSS alebo nie, a načítať špecifický štýl šablóny IE. Akonáhle je text rozmazaný, išiel som dopredu a pridal nejaký štýl do prepisu.

 if (getComputedStyle (dialogy [0]) webkitFilter === undefined && getComputedStyle (dialógy [0]) filter === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ( 'spojenie'); linkEle.type = 'text / css'; linkEle.rel = 'stylesheet'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Teraz pridajte do stránky zvuk.

ontimeupdate udalosť audio prvok je vypálený vždy, keď je jeho aktuálny čas je aktualizovaná, takže túto udalosť použijeme na kontrolu aktuálneho času prehrávania zvuku a zvýraznenie príslušného dialógu v prepisu. Najprv vytvoríme niektoré globálne premenné, ktoré budeme potrebovať.

dialogueTimings = [0,4,9,11,18,24,29,31,44,45,47]; dialógy = document.querySelectorAll ('# transcript> li'); prepisWrapper = document.querySelector ('# transcriptWrapper'); audio = document.querySelector ('# audio'); previousDialogueTime = -1;

dialogueTimings je pole čísel reprezentujúcich sekundy, kedy začína každý dialóg v prepisoch. Prvý dialóg začína na 0s, druhý na 4s a tak ďalej. previousDialogueTime sa budú používať na sledovanie zmien v dialógu.

Poďme sa napokon presunúť na funkciu, na ktorú sme sa pripojili ontimeupdate, ktorý sa nazýva "playTranscript". od tej doby playTranscript je vypálená takmer každú sekundu, v ktorej sa prehráva zvuk, najprv musíme zistiť, ktorý dialóg sa v súčasnosti prehráva. Predpokladajme, že zvuk je v 0:14, potom prehrá dialóg, ktorý začal v 0:11 (pozrite dialogueTimings array), ak je aktuálny čas 0:30 v audio, potom je to dialóg, ktorý začal v 0:29.

Preto, aby sme zistili, kedy sa začal súčasný dialóg, najskôr sme filtrovali po celý čas dialogueTimings ktoré sú pod aktuálnym časom zvuku. Ak je aktuálny čas 0:14, vyfiltrujeme celý nos. v poli, ktoré sú nižšie ako 14 (ktoré sú 0, 4, 9 a 11) a zistiť maximálnu č. z toho, čo je 11 (teda dialóg začal v 0:11).

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

Raz currentDialogueTime je vypočítané, skontrolujeme, či je to isté ako previousDialogueTime(to je, ak sa dialóg v zvuku zmenil alebo nie), ak to nie je zhoda (to je v prípade zmeny dialógu), potom currentDialogueTime je priradený previousDialogueTime.

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

Teraz použite index currentDialogueTime v dialogueTimings pole, aby ste zistili, ktorý dialóg v dialógovom okne záznamu je potrebné zdôrazniť. Napríklad, ak currentDialogueTime je 11, potom index 11 v dialogueTimings pole je 3, čo znamená, že musíme zdôrazniť dialóg v indexe 3 v dialógy rad.

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

Akonáhle sme našli dialóg zvýrazniť (to je currentDialogue), posúvame sa transcriptWrapper (ak je možné posúvať) currentDialogue je 50 pixelov pod horným okrajom obalu, potom zistíme predchádzajúci zvýraznený dialóg a triedu odstránime rozprávanie z toho a pridajte ho currentDialogue.

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

Prvok s triedou rozprávanie zobrazí nerozložený text.

.hovoriť -webkit-filter: rozostrenie (0px) filter: rozostrenie (0px);

A to je všetko, tu je úplný kód HTML a JS kód.

  Justin: Snažím sa povedať, že odvolanie a vyrovnanie sú oddelené.
 Alistair: Myslíte, že komunikácia a vnútorné a vonkajšie oznámenia by sa dostali do odvolacieho procesu.
 Justin: Správne, pretože sa pripájajú k odvolaniu.
...

demonštrácie

Pozrite sa na demo nižšie a zistite, ako to funguje, ak sú všetky kódy dohromady.