no.hideout-lastation.com
Paradis For Designere Og Utviklere


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.

Bttn.css - Awesome CSS-knapper under 4Kb

Bttn.css - Awesome CSS-knapper under 4Kb

Med så mange gratis CSS-utdrag og kodegeneratorer er det ikke nødvendig å gjenoppfinne hjulet. Smarte utviklere stole på eksisterende biblioteker for å lage enkle sideelementer som navigasjonsmenyer og knapper.Et slikt bibliotek er Bttn.css, skapt av utvikler Ganapati V S. Hans arbeid er utsøkt, og dette knappebiblioteket er et av de beste for moderne frontendutvikling.På kn

(Tekniske og design tips)

45 kreative bryllupskaker

45 kreative bryllupskaker

Vi er fans av geeky kaker. Det er en fin måte for bursdagsgutten eller jenta å vise verden hva de bor for, hvor deres kilde til lidenskap i livet er. Ting er ikke mye annerledes når det gjelder bryllupskaker. Når et par velger en Super Mario eller Star-Wars-tema bryllupskake i motsetning til en tradisjonell på deres store dag, viser det sant engasjement til deres lidenskap og til hverandre.De n

(Tekniske og design tips)