Slik viser du timetrykk ved siden av spilt lyd

Lydutskrift er tekstversjonen av tale, nyttig i å gi nyttige materialer som innspillte forelesninger, seminarer etc. til den hørbare utfordringen. De er også vant til å holde tekster av hendelser som intervjuer, høringer og møter.

Tale lyd i nettsider (som i podcaster) er vanligvis ledsaget av transkripsjoner, til fordel for de som er hørselshemmede eller ikke i stand til å høre i det hele tatt. De kan se teksten "spiller" sammen med lyden. Den beste måten å lage lydutskrift på er ved hjelp av manuell tolkning og opptak.

I dette innlegget skal vi se hvordan å vise et løpende lydutskrift ved siden av lyden. For å komme i gang må vi ha transkripsjonen klar. For dette innlegget har jeg lastet ned en prøve lyd og dens transkripsjon fra voxtab.

Jeg bruker HTML ul liste for å vise dialogene på en nettside som nedenfor:

  Justin: Det jeg prøver å si er at klagen og avgjørelsen er separate.
 Alistair: Du mener at kommunikasjon og kunngjøringer intern og ekstern ville bli tatt inn i klageprosessen.
 Justin: Høyre, fordi de knytter seg til klagen.
...

Deretter vil jeg at all tilgjengelig tekst skal være sløret og til unblur bare dialogen som vil matche det nåværende talen som spilles av lydopptaket. Så, for å unblur dialogene bruker jeg CSS-filteret "uskarphet".

#transcript> li -webkit-filter: uskarphet (3px) filter: uskarphet (3px); overgang: alle .8s enkelhet; ...

For IE 10+ kan du legge til text-shadow for å skape en sløret effekt. Du kan bruke denne koden til å oppdage om CSS-uskarphet er blitt brukt eller ikke, og å laste inn IE-spesifikke stilark. Når teksten er sløret, gikk jeg videre og la litt stil til transkripsjonen.

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

La oss nå legge til lyden på siden, med dette.

De ontimeupdate hendelse av lyd elementet avfyres hver gang det er nåværende tid er oppdatert, så vi bruker den hendelsen for å sjekke gjeldende klokkeslett for lyden og markere den tilsvarende dialogen i transkripsjonen. La oss først lage noen globale variabler vi trenger.

dialogueTimings = [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 rekke tall som representerer sekunder når hver dialog i transkripsjonen begynner. Den første dialogen starter på 0s, andre på 4s, og så videre. previousDialogueTime vil bli brukt til å spore dialogendringer.

La oss endelig flytte til funksjonen hekta på ontimeupdate, som heter "playTranscript". Siden playTranscript blir sparket nesten hvert sekund lyden spiller, må vi først identifisere hvilken dialog som nå spilles. Anta at lyden er klokka 0:14, så spiller den dialogen som startet klokka 0:11 (se dialogueTimings array), hvis den nåværende tiden er 0:30 i lyden, så er det dialogen som startet klokka 0:29.

Derfor, for å finne ut når den nåværende dialogen begynte, filtrerer vi først alle tider i dialogueTimings array som er under gjeldende tid for lyden. Hvis den nåværende tiden er 0:14, filtrerer vi ut alle nosene. i gruppen som er under 14 (som er 0, 4, 9 og 11) og finne ut det maksimale nr. ut av dem, som er 11 (derfor begynte dialogen klokken 0:11).

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

Først når currentDialogueTime Beregnes, vi sjekker om det er det samme som previousDialogueTime(det vil si hvis dialogen i lyden har endret seg eller ikke), hvis det ikke er en kamp (det vil si hvis dialogen har endret seg), da currentDialogueTime er tildelt til previousDialogueTime.

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

La oss nå bruke indeksen til currentDialogueTime i dialogueTimings array for å finne ut hvilken dialog i listen over transkripsialdialoger må utheves. For eksempel, hvis currentDialogueTime er 11, deretter en indeks på 11 i dialogueTimings array er 3 som betyr at vi må markere dialogen på indeks 3 i dialoger matrise.

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

Når vi har funnet dialog for å markere (det er currentDialogue), vi ruller transcriptWrapper (hvis rullbar) til currentDialogue er 50px under wrapperens topp, så finner vi ut den tidligere uthevede dialogen og fjerner klassen snakker fra den og legg den til currentDialogue.

funksjon playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (funksjon (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 snakker vil vise uklar tekst.

.snakker -webkit-filter: uskarphet (0px) filter: uskarphet (0px);

Og det er det, her er full kode HTML og JS kode.

  Justin: Det jeg prøver å si er at klagen og avgjørelsen er separate.
 Alistair: Du mener at kommunikasjon og kunngjøringer intern og ekstern ville bli tatt inn i klageprosessen.
 Justin: Høyre, fordi de knytter seg til klagen.
...

Demo

Ta en titt på demoen nedenfor for å få en ide om hvordan det fungerer når alle koder blir satt sammen.