Kako prikazati časovno transkripcijo ob predvajani avdio

Zvočni zapis je besedilna različica govora, ki je koristna pri zagotavljanju uporabnih materialov, kot so posneta predavanja, seminarji itd. Uporabljajo se tudi za vodenje besedilnih zapisov dogodkov, kot so razgovori, sodne obravnave in sestanki.

Zvočni zapis govora na spletnih straneh (kot v podcastih) je običajno opremljen s prepisi, v korist tistih, ki imajo težave s sluhom ali pa sploh ne morejo slišati. Oni lahko Oglejte si besedilo "predvajanje" ob zvoku. Najboljši način za ustvarjanje zvočnega zapisa je z ročno interpretacijo in snemanjem.

Na tem mestu bomo videli kako prikazati tekoči zvočni zapis skupaj z zvokom. Za začetek moramo pripraviti prepis. Za to objavo sem prenesel vzorčni zvok in njegov prepis voxtab.

Uporabljam HTML ul za prikaz dialogov na spletni strani, kot je spodaj:

  Justin: Želim povedati, da sta pritožba in poravnava ločena.
 Alistair: Mislite, da bodo v pritožbeni postopek vključene komunikacije in obvestila, notranja in zunanja.
 Justin: Prav, ker se povezujejo s pritožbo.
…

Nato želim, da se vse razpoložljivo besedilo zamegli in da Razbremenite samo dialog, ki bo ustrezal trenutnemu govoru, ki ga predvaja zvočni posnetek. Torej, da razveljavim dialoge, uporabljam CSS filter "zamegljenost".

#transcript> li -webkit-filter: zameglitev (3px) filter: zamegljenost (3px); prehod: vse .8s lahek;…

Za IE 10+ lahko dodate text-shadow ustvarite zamegljen učinek. S to kodo lahko odkrijete, ali je bila uporabljena nejasna vsebina CSS ali ne, in naložite svoj slog slogov IE. Ko je besedilo zamegljeno, sem šel naprej in dodal nekaj stila v prepis.

 if (getComputedStyle (dialogi [0]). webkitFilter === undefined && getComputedStyle (dialogi [0]) filter === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement („povezava“); linkEle.type = 'text / css'; linkEle.rel = 'stylesheet'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Sedaj dodamo zvočni zapis na to stran.

The ontimeupdate dogodka zvok element je odpuščen vsakič, ko je Trenutni čas je posodobljen, zato bomo ta dogodek uporabili za preverjanje trenutnega časa delovanja zvoka in označevanje ustreznega dialoga v prepisu. Najprej ustvarimo nekaj globalnih spremenljivk, ki jih bomo potrebovali.

dialogueTimings = [0,4,9,11,18,24,29,31,44,45,47]; dialogues = document.querySelectorAll ('# transkript> li'); transcriptWrapper = document.querySelector ('# transcriptWrapper'); avdio = document.querySelector ("# audio"); previousDialogueTime = -1;

dialogTimings je niz številk, ki predstavljajo sekunde, ko se začne vsak dialog v prepisu. Prvi dialog se začne pri 0s, drugi pri 4s in tako naprej. previousDialogueTime bodo uporabljene za spremljanje sprememb v dialogu.

Končno se premaknimo na funkcijo, ki je priklopljena ontimeupdate, ki se imenuje "playTranscript". Od playTranscript se sproži skoraj vsako sekundo predvajanja zvoka, moramo najprej ugotoviti, kateri dialog se trenutno predvaja. Recimo, da je zvok ob 0:14, potem pa se predvaja dialog, ki se je začel ob 0:11 (glej dialogTimings matrika), če je trenutni čas v avdio 0:30, potem je to dialog, ki se je začel ob 0:29.

Zato, da bi ugotovili, kdaj se je začel trenutni dialog, najprej filtriramo vse čase v dialogTimings niz, ki je pod trenutnim časom zvoka. Če je trenutni čas 0:14, filtriramo vse nos. v matriki, ki so pod 14 (to so 0, 4, 9 in 11) in ugotovite največje število št. od teh, ki je 11 (tako se je dialog začel ob 0:11).

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

Enkrat currentDialogueTime izračunamo, preverjamo, če je enako kot previousDialogueTime(če se je dialog v zvoku spremenil ali ne), če ni ujemanje (če se je dialog spremenil), currentDialogueTime je dodeljen previousDialogueTime.

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

Zdaj pa uporabimo indeks currentDialogueTime v dialogTimings da bi ugotovili, kateri dialog na seznamu prepisov mora biti poudarjen. Na primer, če je currentDialogueTime je 11, nato indeks 11 dialogTimings matrika je 3, kar pomeni, da moramo poudariti dialog v indeksu 3 v dialogi matrika.

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

Ko najdemo dialog, ki ga želite označiti (to je trenutni dialog), se pomikamo transcriptWrapper (če se lahko premaknete) do trenutni dialog pod vrhom ovojnice je 50px, nato pa ugotovimo prej označen dialog in odstranimo razred govoriti iz nje in jo dodajte trenutni dialog.

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

Element z razredom govoriti prikaže nebledano besedilo.

.speaking -webkit-filter: zamegljenost (0px) filter: zamegljenost (0px);

In to je to, tukaj je koda HTML in koda JS.

  Justin: Želim povedati, da sta pritožba in poravnava ločena.
 Alistair: Mislite, da bodo v pritožbeni postopek vključene komunikacije in obvestila, notranja in zunanja.
 Justin: Prav, ker se povezujejo s pritožbo.
…

Demo

Oglejte si predstavitev spodaj, da dobite idejo, kako deluje, ko so vse kode skupaj.