Kako prikazati vremenski transkript uz igrao audio

Audio zapis je tekstualna verzija govora, korisna u pružanju korisnih materijala kao što su snimljena predavanja, seminari, itd. Uz zvučno izazvan. Također se koriste za vođenje tekstualnih zapisa o događajima kao što su razgovori, sudska saslušanja i sastanci.

Zvuk govora na web-stranicama (kao u podcastima) obično je popraćen transkriptima, u korist onih koji su oštećeni sluha ili uopće ne mogu čuti. Oni mogu pogledati tekst "svira" uz zvuk. Najbolji način za stvaranje audio zapisa je ručno tumačenje i snimanje.

U ovom postu, vidjet ćemo kako prikazati zvučni zapis uz zvuk. Za početak trebamo pripremiti transkript. Za ovaj je post preuzet uzorak zvuka i njegov transkript voxtab.

Koristim HTML ul popisa za prikaz dijaloga na web-stranici:

  Justin: Ono što pokušavam reći jest da su žalba i nagodba odvojeni.
 Alistair: Mislite na to da će komunikacija i najave unutar i izvan sustava biti uvršteni u žalbeni postupak.
 Justin: Da, jer se povezuju s žalbom.
...

Sljedeće, želim da se sav raspoloživi tekst zamuti i da poništite samo dijalog koji će odgovarati trenutnom govoru koji se reproducira audio zapisom. Dakle, za rasplinjavanje dijaloga koristim CSS filtar "blur".

#transcript> li -webkit-filter: zamućenje (3px) filter: zamućenje (3px); tranzicija: sve .8s lakoća;…

Za IE 10+ možete dodati text-shadow za stvaranje zamagljenog efekta. Ovaj kôd možete upotrijebiti da biste otkrili je li zamućenje CSS-a primijenjeno ili ne, te da biste učitali svoj stilski obrazac specifičan za IE. Kad je tekst nejasan, otišao sam naprijed i dodao neki stil u transkript.

 if (getComputedStyle (dijalozi [0]) webkitFilter === undefined && getComputedStyle (dijalozi [0]) filter === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ('veza'); linkEle.type = 'tekst / css'; linkEle.rel = 'stilova'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Sada dodajte zvuk na stranicu, s ovim.

ontimeupdate događaj zvučni Element se ispaljuje svaki put kad se pojavi Trenutno vrijeme ažurira se, pa ćemo taj događaj upotrijebiti za provjeru trenutačnog trajanja zvuka i označiti odgovarajući dijalog u transkriptu. Prvo ćemo stvoriti neke globalne varijable koje će nam trebati.

dijalogTimings = [0,4,9,11,18,24,29,31,44,45,47]; dijalozi = document.querySelectorAll ('# transkript> li'); transcriptWrapper = document.querySelector ('# transcriptWrapper'); audio = document.querySelector ('# audio'); previousDialogueTime = -1;

dialogueTimings je niz brojeva koji predstavljaju sekunde nakon početka svakog dijaloga u prijepisu. Prvi dijalog počinje u 0s, drugi u 4s, i tako dalje. previousDialogueTime će se koristiti za praćenje promjena u dijalogu.

Idemo napokon na funkciju zakačenu ontimeupdate, koji se zove "playTranscript". Od playTranscript je ispaljen gotovo svake sekunde kada se reproducira zvuk, najprije moramo odrediti koji se dijalog trenutno reproducira. Pretpostavimo da je zvuk u 0:14, a zatim reproducira dijalog koji je započeo u 0:11 dialogueTimings ako je trenutno vrijeme 0:30 u zvuku, onda je to dijalog koji je započeo u 0:29.

Stoga, da bismo saznali kada je započet trenutni dijalog, najprije filtriramo sva vremena u dialogueTimings niz koji je ispod trenutnog vremena zvuka. Ako je trenutno vrijeme 0:14, filtriramo sve brojeve. u nizu koji su ispod 14 (koji su 0, 4, 9 i 11) i saznajte maksimalnu br. od njih, što je 11 (dijalog je započeo u 0:11).

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

Jednom currentDialogueTime izračunava se, provjeravamo je li isti kao previousDialogueTime(to jest ako se dijalog u zvuku promijenio ili ne), ako se ne podudara (to jest ako se dijalog promijenio), currentDialogueTime je dodijeljen previousDialogueTime.

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

Sada upotrijebimo indeks currentDialogueTime u dialogueTimings da biste saznali koji dijalog u popisu dijaloga s transkriptima treba istaknuti. Na primjer, ako je currentDialogueTime je 11, zatim indeks od 11 u dialogueTimings niz je 3 što znači da moramo označiti dijalog na indeksu 3 u dijalozi red.

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

Nakon što pronađemo dijalog koji označava (to je currentDialogue), pomičemo se transcriptWrapper (ako se može pomicati) do currentDialogue je 50px ispod vrha omotača, zatim otkrijemo prethodno istaknuti dijalog i uklonimo klasu govor iz njega i dodajte currentDialogue.

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

Element s klasom govor će prikazati nebrižan tekst.

.govoreći -webkit-filter: zamućenje (0px) filtar: zamućenje (0px);

I to je to, ovdje je puni kôd HTML i JS kod.

  Justin: Ono što pokušavam reći jest da su žalba i nagodba odvojeni.
 Alistair: Mislite na to da će komunikacija i najave unutar i izvan sustava biti uvršteni u žalbeni postupak.
 Justin: Da, jer se povezuju s žalbom.
...

Demo

Provjerite demo ispod da biste dobili ideju kako funkcionira kada se svi kodovi sastave.