Cum se afișează transcrierea temporizată alături de Audio redată

Transcrierea audio este versiunea text a discursului, utilă în furnizarea materialelor utile, cum ar fi prelegeri, seminarii etc., la audiența provocată. De asemenea, acestea sunt folosite pentru a păstra înregistrări textuale ale evenimentelor, cum ar fi interviurile, audierile și întâlnirile în instanță.

Difuzarea audio în paginile web (de exemplu, în podcast-uri) este de obicei însoțită de transcrieri, în beneficiul celor care au auzul sau nu pot auzi deloc. Ei pot vizualizați textul "redat" alături de audio. Cea mai bună modalitate de a crea o transcriere audio este prin interpretarea și înregistrarea manuală.

În acest post, vom vedea cum se afișează o transcriere audio în desfășurare alături de audio. Pentru a începe, trebuie să avem pregătită transcrierea. Pentru acest post, am descarcat un eșantion audio și transcrierea lui voxtab.

Eu folosesc HTML ul pentru a afișa dialogurile de pe o pagină web, cum ar fi cele de mai jos:

 
 
Justin: Ceea ce încerc să spun este că apelul și decontarea sunt separate.
 
Alistair: Vrei să spui că comunicările și anunțurile interne și externe vor fi aduse în procesul de apel.
 
Justin: Corect, pentru că se conectează la recurs.
... 
 
 

Apoi, vreau ca tot textul disponibil să fie neclar și să dezactivați numai dialogul care se va potrivi cu discursul curent care este redat de înregistrarea audio. Deci, pentru a debloca dialogurile folosesc filtrul CSS "blur".

#transcript> li -webkit-filter: blur (3px) filtru: estompare (3px); tranziție: toate facilitățile .8s; ...

Pentru IE 10+ puteți adăuga text-shadow pentru a crea un efect neclar. Puteți utiliza acest cod pentru a detecta dacă a fost aplicată sau nu culoarea CSS și pentru a încărca foaia de stil specifică IE. Odată ce textul este neclar, m-am dus înainte și am adăugat un anumit stil transcrierii.

 dacă getComputedStyle (dialoguri [0]) .webkitFilter === undefined && getComputedStyle (dialoguri [0]) filter === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ('legătură'); linkEle.type = 'text / css'; linkEle.rel = 'stylesheet'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle); 

Acum, să adăugăm audio la pagină, cu asta.

ontimeupdate eveniment al audio elementul este concediat de fiecare dată ora curentă este actualizată, deci vom folosi acel eveniment pentru a verifica timpul de funcționare curent al sunetului și a evidenția dialogul corespunzător din transcriere. Să facem mai întâi niște variabile globale pe care le vom avea nevoie.

dialogTimings = [0,4,9,11,18,24,29,31,44,45,47]; dialoguri = document.querySelectorAll ('# transcript> li'); transcriptWrapper = document.querySelector ('#exemplare'); audio = document.querySelector ('# audio'); previousDialogueTime = -1; 

dialogueTimings este o serie de numere reprezentând secundele în care începe fiecare dialog din transcriere. Primul dialog începe la 0s, al doilea la 4s și așa mai departe. previousDialogueTime va fi folosit pentru a urmări schimbările de dialog.

Să mergem în cele din urmă la funcția pe care ne-o acordăm ontimeupdate, care este numit "playTranscript". De cand playTranscript este declanșată aproape în fiecare secundă pe care o redă sunetul, trebuie să identificăm mai întâi ce dialog se află în prezent în joc. Să presupunem că sunetul este la 0:14, apoi se joacă dialogul care a început la ora 0:11 (vezi dialogueTimings array), dacă ora curentă este 0:30 în audio, atunci este dialogul care a început la 0:29.

Prin urmare, pentru a afla când începe dialogul actual, mai întâi filtrăm tot timpul în dialogueTimings care sunt sub ora curentă a sunetului. Dacă ora curentă este de 0:14, filtram totul. în matricele care sunt sub 14 (care sunt 0, 4, 9 și 11) și pentru a afla maximum nr. din cele care sunt 11 (astfel dialogul a început la 0:11).

funcția playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (funcția (v) retur v <= audio.currentTime));  

Odata ce currentDialogueTime se calculează, verificăm dacă este la fel ca și previousDialogueTime(adică dacă dialogul din audio sa schimbat sau nu), dacă nu este o potrivire (adică dacă dialogul sa schimbat), atunci currentDialogueTime este alocat previousDialogueTime.

funcția playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (funcția (v) retur v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;   

Acum, să folosim indexul currentDialogueTime în dialogueTimings pentru a afla care dialog din lista de dialoguri de transcriere trebuie să fie evidențiat. De exemplu, dacă currentDialogueTime este 11, apoi indicele de 11 în dialogueTimings matricea este 3 ceea ce înseamnă că trebuie să evidențiem dialogul la indexul 3 în dialoguri mulțime.

funcția playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (funcția (v) retur v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];   

Odată ce am găsit dialogul pentru a evidenția (adică currentDialogue), ne defilam transcriptWrapper (dacă este scrollabil) până currentDialogue este de 50 de pixeli sub partea de sus a ambalajului, apoi aflăm dialogul evidențiat anterior și eliminăm clasa vorbitor din ea și adăugați-o currentDialogue.

funcția playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (funcția (v) retur 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';   

Elementul cu clasa vorbitor va afișa un text neclar.

.vorbind -webkit-filter: blur (0px) filtru: estompare (0px); 

Și asta este, iată codul HTML complet și codul JS.

 
 
Justin: Ceea ce încerc să spun este că apelul și decontarea sunt separate.
 
Alistair: Vrei să spui că comunicările și anunțurile interne și externe vor fi aduse în procesul de apel.
 
Justin: Corect, pentru că se conectează la recurs.
... 
 
 
  
  

Demo

Consultați demo-ul de mai jos pentru a obține o idee despre cum funcționează atunci când toate codurile sunt puse împreună.