Sådan vises timetransskription sammen med afspillet lyd

Audio transkription er tekstversionen af tale, hjælpsomme til at levere nyttige materialer som indspillede foredrag, seminarer mv til den hørbart udfordrede. De er også vant til at holde tekster om begivenheder som interviews, retsmøder og møder.

Tale lyd i websider (som i podcasts) er typisk ledsaget af transkripsioner til gavn for dem, der er hæmmede eller slet ikke i stand til at høre. De kan se teksten "spiller" sammen med lyden. Den bedste måde at oprette et lydudskrift på er ved hjælp af manuel fortolkning og optagelse.

I dette indlæg vil vi se hvordan man viser et kørende lydudskrift sammen med lyden. For at komme i gang skal vi have transkriptet klar. For dette indlæg har jeg downloadet en prøve lyd og dens transkription fra voxtab.

Jeg bruger HTML ul liste for at vise dialogerne på en webside som nedenfor:

  Justin: Det jeg forsøger at sige er, at appellen og afviklingen er adskilte.
 Alistair: Du mener, at kommunikation og meddelelser intern og ekstern ville blive bragt ind i klageprocessen.
 Justin: Ret, fordi de forbinder appellen.
...

Dernæst vil jeg have den tilgængelige tekst sløret og til unblur kun den dialog, der svarer til det aktuelle tal, der afspilles af lydoptagelsen. Så for at unblur dialogerne bruger jeg CSS filteret "sløret".

#transcript> li -webkit-filter: sløret (3px) filter: sløret (3px); overgang: alle .8s lethed; ...

For IE 10+ kan du tilføje tekst-skygge for at skabe en sløret effekt. Du kan bruge denne kode til at registrere, om CSS-uskarphed er blevet anvendt eller ej, og at indlæse dit IE-specifikke stilark. Når teksten er sløret, gik jeg videre og tilføjede nogle stil til transkriptet.

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

Lad os nu tilføje lyden til siden med dette.

Det ontimeupdate begivenhed af lyd elementet fyres hver gang dets nuværende tid er opdateret, så vi vil bruge den begivenhed til at kontrollere den aktuelle tid for lyden og markere den tilsvarende dialog i udskrift. Lad os først lave nogle globale variabler, vi vil have brug for.

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

dialogueTimings er en række tal, der repræsenterer de sekunder, hvor hver dialog i transkriptionen begynder. Den første dialog starter på 0s, anden på 4s og så videre. previousDialogueTime vil blive brugt til at spore dialogændringer.

Lad os endelig flytte til funktionen tilsluttet ontimeupdate, som hedder "playTranscript". Siden playTranscript bliver fyret næsten hvert sekund lyden spiller, skal vi først identificere hvilken dialog der aktuelt bliver spillet. Antag lyden kl 0:14, så spiller den dialog, der startede klokken 0:11 (se dialogueTimings array), hvis den aktuelle tid er 0:30 i lyden, så er det dialogen, der startede klokken 0:29.

For at finde ud af, hvornår den aktuelle dialog begynder, filtrerer vi først alle tider i dialogueTimings array, der er under lydens aktuelle tid. Hvis den aktuelle tid er 0:14, filtrerer vi alle de nos. i arrayet, der er under 14 (som er 0, 4, 9 og 11) og finde ud af det maksimale antal. ud af dem, som er 11 (derfor begyndte dialogen klokken 0:11).

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

En gang currentDialogueTime beregnes, kontrollerer vi, om det er det samme som previousDialogueTime(det vil sige hvis dialogen i lyden er ændret eller ej), hvis det ikke er en match (det vil sige hvis dialogen er ændret), så currentDialogueTime er tildelt til previousDialogueTime.

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

Lad os nu bruge indekset for currentDialogueTime i dialogueTimings array for at finde ud af hvilken dialog på listen over transkriptionsdialoger skal fremhæves. For eksempel, hvis currentDialogueTime er 11, derefter indeks på 11 i dialogueTimings array er 3, hvilket betyder at vi skal fremhæve dialogen på indeks 3 i dialoger matrix.

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

Når vi har fundet dialogen til at fremhæve (det er den currentDialogue) vi ruller transcriptWrapper (hvis rulles) indtil currentDialogue er 50px under wrapperens top, så finder vi ud af den tidligere fremhævede dialog og fjerner klassen taler fra det og tilføj det til currentDialogue.

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

Elementet med klassen taler vil vise uklar tekst.

.taler -webkit-filter: sløret (0px) filter: sløret (0px);

Og det er det, her er den fulde kode HTML og JS kode.

  Justin: Det jeg forsøger at sige er, at appellen og afviklingen er adskilte.
 Alistair: Du mener, at kommunikation og meddelelser intern og ekstern ville blive bragt ind i klageprocessen.
 Justin: Ret, fordi de forbinder appellen.
...

Demo

Tjek demo nedenfor for at få en ide om, hvordan det virker, når alle koder er sat sammen.