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.

Tips og verktøy for å forbedre designlagets produktivitet

Et produktivt lag er også vanligvis godt administrert. De to søkeordene du ser her er "produktive" og "administrerte", så det er ingen overraskelse at designteamene alltid er på utkikk etter bedre produktivitetstips og styringsprinsipper de komfortabelt kan følge med.Vi skal se på noen produktivitetstips for webdesignere og designteam samt teamledelsesprinsipper som kan hjelpe dem med å kaste opp vårt mer høye kvalitetsarbeid på en hyppigere basis. La oss t

(Tekniske og design tips)

20 + ideelle gaver til fotografer

I denne generasjonen foretrekker vi å fortelle våre historier gjennom objektivet til et kamera enn gjennom skriftlighetens kompleksitet. Det er enten det eller vi bare glemte hvordan å stave ord ordentlig. Deretter igjen, ingenting forklarer stillheten til en blå himmel eller nåden til en galoppende hest, ganske som å ha det øyeblikket låst i tid - det være seg med en DSLR eller et punkt og skyte.Den slag

(Tekniske og design tips)