Slik viser du timetrykk ved siden av spilt lyd

Lydutskrift er tekstversjonen av tale, nyttig i å gi nyttige materialer som innspilt forelesning, 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 på 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 du skal 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 oppgjøret er skilt.
Alistair : Du mener at kommunikasjon og kunngjøringer internt og eksternt ville bli brakt inn i klageprosessen.
Justin : Høyre, fordi de knytter seg til klagen.
...

Deretter vil jeg at all tilgjengelig tekst skal være uklart, og for å bare fjerne dialogen som stemmer overens med gjeldende tale 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 å 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.

ontimeupdate hendelsen av audio avfyres hver gang den currentTime 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.

 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 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 til 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 (referer 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 arrayet som er under gjeldende tid for lyden. Hvis den nåværende tiden er 0:14, filtrerer vi ut alle nosene. i matrisen som er under 14 (som er 0, 4, 9 og 11) og finn 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})); } 

Når currentDialogueTime er beregnet, kontrollerer vi om det er det samme som currentDialogueTime (det vil si hvis dialogen i lyden er endret eller ikke), hvis det ikke er en kamp (det vil si hvis dialogen er forandret), blir currentDialogueTime tilordnet previousDialogueTime .

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

La oss nå bruke indeksen for currentDialogueTime i currentDialogueTime array for å finne ut hvilken dialog i listen over transkriptdialoger som skal utheves. Hvis for eksempel currentDialogueTime er 11, er indeksen 11 i currentDialogueTime gruppen 3, noe som betyr at vi må markere dialogen på indeks 3 i dialogues .

 funksjon playTranscript () {var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (funksjon (v) {return v <= audio.currentTime})); hvis (previousDialogueTime! == currentDialogueTime) {previousDialogueTime = currentDialogueTime; var currentDialogue = dialoger [dialogTimings.indexOf (currentDialogueTime)]; }} 

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

 funksjon playTranscript () {var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (funksjon (v) {return v <= audio.currentTime})); hvis (previousDialogueTime! == currentDialogueTime) {previousDialogueTime = currentDialogueTime; var currentDialogue = dialoger [dialogTimings.indexOf (currentDialogueTime)]; transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50; var tidligereDialogue = document.getElementsByClassName ('speaking') [0]; if (previousDialogue! == undefined) previousDialogue.className = previousDialogue.className.replace ('speaking', ''); currentDialogue.className + = 'speaking'; }} 

Elementet med klassespråket vil vise uklar tekst.

 .speaking {-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 oppgjøret er skilt.
Alistair : Du mener at kommunikasjon og kunngjøringer internt og eksternt ville bli brakt 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.

10 grunner til at du trenger kodeoptimalisering

Mens vi skriver kode, tar vi kontinuerlig avgjørelser og velger mellom løsninger som kan virke likeverdige i begynnelsen. Senere viser det seg som regel at noen valg gir et mer effektivt program enn andre, så det oppstår naturlig søken etter beste kodingspraksis og optimaliseringsteknikker, og vi begynner å se hele utviklingsprosessen som et optimeringsproblem som skal løses .Selv o

(Tekniske og design tips)

Frisk ressurs for webutviklere - januar 2018

Det nye året 2018 er her. Hvis vi ser på fremdriften i webutvikling for fem år siden, er det helt annerledes enn det vi har i dag. I dag er det nye metoder, verktøy og til og med et helt nytt paradigme som forandrer måten vi bygger nettsteder i dag på - og VirtualDOM er en av dem.DOM (Document Object Model) er en tremodell som definerer hvordan et nettsted er strukturert . Velg

(Tekniske og design tips)