Kaip rodyti laiko nustatytą scenarijų kartu su grotuvu

Garso transkriptas yra kalbos tekstinė versija, naudinga teikiant naudingas medžiagas, pvz., Įrašytas paskaitas, seminarus ir pan. Jie taip pat naudojami tekstiniams įrašams apie įvykius, tokius kaip interviu, teismo posėdžiai ir susitikimai.

Kalbos garsas tinklalapiuose (pvz., Podcast'uose) paprastai būna kartu su transkriptais, kurie yra naudingi tiems, kurie yra klausos sutrikimai arba kurie visai negali išgirsti. Jie gali peržiūrėkite tekstą „žaisti“ šalia garso. Geriausias būdas sukurti garso transkriptą yra rankiniu būdu interpretuojant ir įrašant.

Šiame pranešime matysime kaip rodyti garsinį transkriptą šalia garso. Norėdami pradėti, turime paruošti scenarijų. Šiam įrašui atsisiunčiau pavyzdinį garso įrašą ir jo transkriptą iš voxtab.

Naudoju HTML ul sąrašas, kuriame bus rodomi tokie dialogo puslapiai kaip

 
 
Justinas: Aš bandau pasakyti, kad apeliacinis skundas ir sprendimas yra atskiri.
 
Alistair: Jūs turėtumėte omenyje, kad komunikacijos ir pranešimai vidaus ir išorės srityje bus įtraukti į apeliacijos procesą.
 
Justinas: Teisė, nes jie prisijungia prie apeliacinio skundo.
… 
 
 

Toliau noriu, kad visas turimas tekstas būtų neryškus ir Atblokuokite tik dialogą, kuris atitiks dabartinę kalbą, kurią atkuria garso įrašymas. Taigi, norėdami panaikinti dialogus, naudoju CSS filtrą „blur“.

#transcript> li -webkit-filter: blur (3px) filtras: blur (3px); perėjimas: visi .8s lengvai;…

IE 10+ galite pridėti teksto šešėlis sukurti neryškų efektą. Šį kodą galite naudoti norėdami nustatyti, ar buvo taikytas „CSS“ neryškumas, ir įkelti savo specifinį „IE“ stilių lapą. Kai tekstas neryškus, aš eidavau į priekį ir pridėjau tam tikrą stilių.

 jei (getComputedStyle (dialogai [0]). webkitFilter === undefined && getComputedStyle (dialogai [0]), filtras === "nėra") var headEle = document.querySelector ('head'), linkEle = document.createElement („nuoroda“); linkEle.type = 'text / css'; linkEle.rel = 'stilių lentelė'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle); 

Dabar pridėkime garso įrašą į šį puslapį.

The ontimeupdate įvykis garso elementas yra atleistas kiekvieną kartą jo Dabartinis laikas atnaujinamas, todėl naudosime šį įvykį, kad patikrintume esamą garso įrašymo laiką ir pažymėtume atitinkamą dialogą. Pirmiausia sukurkite kai kuriuos pasaulinius kintamuosius, kurių mums reikės.

dialogasTimings = [0,4,9,11,18,24,29,31,44,45,47]; dialogues = document.querySelectorAll ('# transcript> li'); transcriptWrapper = document.querySelector ('# transcriptWrapper'); audio = document.querySelector („# audio“); ankstesnisDialogueTime = -1; 

dialogaiTerminai yra skaičių masyvas, parodantis sekundes, kai prasideda kiekvienas transkripto dialogas. Pirmasis dialogas prasideda nuo 0s, antras - 4s ir pan. ankstesnisDialogueTime bus naudojamas stebėti dialogo pokyčius.

Galiausiai pereikime prie funkcijos, sujungtos su ontimeupdate, kuris vadinamas „playTranscript“. Nuo playTranscript išjungiamas beveik kiekvieną sekundę, kai garsas groja, pirmiausia reikia nustatyti, kuris dialogas šiuo metu yra grojamas. Tarkime, kad garsas yra 0:14, tada jis žaidžia dialogą, kuris prasidėjo 0:11 (žr dialogaiTerminai masyvas), jei dabartinis laikas yra 0:30, tada dialogas prasidėjo 0:29.

Taigi, norėdami sužinoti, kada prasidėjo dabartinis dialogas, mes pirmą kartą filtruojame visus laikus dialogaiTerminai masyvas, kuris yra mažesnis nei dabartinis garso laikas. Jei dabartinis laikas yra 0:14, filtruojame visus nos. masyve, kuris yra mažesnis nei 14 (kurie yra 0, 4, 9 ir 11) ir išsiaiškina maks. iš jų - 11 (taigi dialogas prasidėjo 0:11).

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

Kartą currentDialogueTime apskaičiuojama, mes patikriname, ar tai yra tokia pati kaip ir ankstesnisDialogueTime(t. y. jei pokalbis garso įraše pasikeitė ar ne), jei jis nėra atitikimas (ty jei dialogas pasikeitė), tada currentDialogueTime priskiriamas ankstesnisDialogueTime.

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

Dabar leiskite naudoti currentDialogueTime viduje konors dialogaiTerminai masyvas, kad sužinotumėte, kuris dialogo dialogo dialogo dialogas turi būti pabrėžtas. Pavyzdžiui, jei currentDialogueTime yra 11, tada indeksas 11 dialogaiTerminai masyvas yra 3, o tai reiškia, kad turime pabrėžti dialogą 3 rodyklėje dialogus masyvas.

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

Kai surasime dialogą, kurį norite pabrėžti (tai yra dabartinisDialogas), mes slinkite transcriptWrapper (jei slenkamas) iki dabartinisDialogas yra 50 pikselių žemiau apvalkalo viršaus, tada išsiaiškiname anksčiau paryškintą dialogą ir pašaliname klasę kalbėti iš jos ir pridėkite jį prie dabartinisDialogas.

funkcija playTranscript () var currentDialogueTime = Math.max.apply (matematika, dialogTimings.filter (funkcija (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';   

Elementas su klasė kalbėti bus rodomas neaiškus tekstas.

.kalbantis -webkit-filter: blur (0px) filtras: blur (0px); 

Ir būtent čia yra visas kodas HTML ir JS kodas.

 
 
Justinas: Aš bandau pasakyti, kad apeliacinis skundas ir sprendimas yra atskiri.
 
Alistair: Jūs turėtumėte omenyje, kad komunikacijos ir pranešimai vidaus ir išorės srityje bus įtraukti į apeliacijos procesą.
 
Justinas: Teisė, nes jie prisijungia prie apeliacinio skundo.
… 
 
 
  
  

Demo

Apsilankykite žemiau esančioje demonstracijoje, kad gautumėte idėją, kaip jis veikia, kai visi kodai yra sujungti.