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.

Utforme prototyper: 5 Apps som gjør det bedre enn Photoshop

Photoshop er et populært verktøy med designere og dets utvidelser som CSS3Ps og FontAwesomePS gjør det til et godt verktøy for å lage webdesign prototyper også. Ikke desto mindre ble det ikke virkelig opprettet for dette formålet, og som dagens trender presser frem med responsiv design, CSS-forprosessorer, CSS-rammer og oppløsningsuavhengig grafikk (SVG), blir Photoshop mindre relevant for webdesign.Ikke be

(Tekniske og design tips)

10 Nyttige Firefox Utviklerverktøy du bør vite

Firefox som "utviklerens nettleser" har mange gode verktøy for å gjøre arbeidet enklere. Du kan finne mer på verktøysamlingen på Firefox-utviklerverktøyets nettside, og kan også prøve utviklerutgave-nettleseren som har flere funksjoner og verktøy som blir testet.For dette innlegget har jeg listet 10 nyttige verktøy du kanskje vil ha fra samlingen av utviklerverktøy. Jeg har og

(Tekniske og design tips)