Kuidas näidata ajastatud transkriptsiooni mängitud audio kõrval

Audio transkript on kõne tekstiversioon, mis on kasulik andes kasulikke materjale nagu salvestatud loengud, seminarid jne. Neid kasutatakse ka sündmuste, näiteks intervjuude, kohtuistungite ja koosolekute tekstiandmete säilitamiseks.

Kõneheli veebilehtedel (nagu podcastides) on tavaliselt kaasas ärakirju, mis on kasulik nende inimeste jaoks, kes on kuulmispuudega või ei suuda üldse kuulda. Nad saavad vaadake heli kõrvale teksti "mängimine". Parim viis audioprotokolli loomiseks on käsitsi tõlgendamise ja salvestamise abil.

Selles postituses näeme kuidas näidata heli kõrvale jooksvat audioprotokolli. Alustamiseks peame olema ärakirja valmis. Selle postituse jaoks olen alla laadinud näidisheli ja selle ärakirja voxtab.

Ma kasutan HTML-i ul loend, et kuvada dialooge alloleval veebilehel:

  Justin: Ma üritan öelda, et kaebus ja lahendus on eraldi.
 Alistair: Te peate silmas, et sisemised ja välised kommunikatsioonid ja teated viiakse apellatsioonimenetlusse.
 Justin: Õige, sest nad ühenduvad kaebusega.
…

Seejärel tahan, et kõik olemasolevad tekstid oleksid hägused tühistage ainult dialoog, mis sobib helisalvestise praeguse kõnega. Niisiis, dialoogide blokeerimiseks kasutan CSS-filtrit „blur”.

#transcript> li -webkit-filter: blur (3px) filter: hägusus (3px); üleminek: kõik .8s lihtne;…

IE 10+ jaoks saate lisada teksti vari hägususe saavutamiseks. Selle koodi abil saate tuvastada, kas CSS-i hägusust on rakendatud või mitte. Kui tekst on hägune, läksin edasi ja lisasin stiili teatele.

 kui (getComputedStyle (dialoogid [0]). webkitFilter === undefined && getComputedStyle (dialoogid [0]). filter === "none") var headEle = document.querySelector ('pea'), linkEle = document.createElement ('link'); linkEle.type = 'text / css'; linkEle.rel = 'stiilileht'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Nüüd lisame sellele lehele selle heli.

The ontimeupdate sündmus heli elementi põletatakse iga kord currentTime värskendatakse, nii et me kasutame seda sündmust, et kontrollida heli jooksvat aega ja rõhutada vastavat dialoogi ärakirjast. Esmalt loome mõned globaalsed muutujad, mida me vajame.

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

dialoog on arvude arv, mis esindab sekundeid, kui iga dialoog transkriptsioonis algab. Esimene dialoog algab 0s, teine 4-ndatel jne. eelmineDialogueTime kasutatakse dialoogi muutuste jälgimiseks.

Lõpuks läheme üles funktsioonile, millega konks on ühendatud ontimeupdate, mida nimetatakse "playTranscript". Alates sellest ajast playTranscript käivitatakse peaaegu iga sekund, kui heli mängib, peame kõigepealt kindlaks tegema, millist dialoogi praegu mängitakse. Oletame, et heli on 0:14, siis mängib dialoogi, mis algas kell 0:11 (vt dialoog massiivi), kui hetkel on kellaaeg 0:30, siis dialoog, mis algas kell 0:29.

Seega, et teada saada, millal praegune dialoog algas, filtreerime kõigepealt kogu aeg dialoog massiivi, mis on alla heli praeguse aja. Kui praegune aeg on 0:14, filtreerime välja kõik noodid. massiivis, mis on alla 14 (mis on 0, 4, 9 ja 11) ja teada saada maksimaalne nr. nendest, mis on 11 (seega algas dialoog kell 0:11).

function playTranscript () var currentDialogueTime = Math.max.apply (matemaatika, dialoogTimings.filter (funktsioon (v) tagasi v <= audio.currentTime));

Kui currentDialogueTime arvutatakse, kontrollime, kas see on sama mis eelmineDialogueTime(st kui heli dialoog on muutunud või mitte), kui see pole vaste (st kui dialoog on muutunud), siis currentDialogueTime on määratud eelmineDialogueTime.

function playTranscript () var currentDialogueTime = Math.max.apply (matemaatika, dialoogTimings.filter (funktsioon (v) tagasi v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;

Nüüd kasutame indeksit currentDialogueTime Euroopa dialoog massiiv, et teada saada, millist dialoogi dialoogikirjelduste dialoogis tuleb esile tõsta. Näiteks, kui currentDialogueTime on 11, siis indeks 11 on dialoog massiiv on 3, mis tähendab, et peame rõhutama dialoogi indeksis 3 dialooge massiivi.

function playTranscript () var currentDialogueTime = Math.max.apply (matemaatika, dialoogTimings.filter (funktsioon (v) tagasi v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];

Kui oleme leidnud dialoogi esile tõstmiseks (see on praeguneDialogue), me kerime transcriptWrapper (kui keritav) kuni praeguneDialogue on 50px ümbrisepakendi all, siis leiame eelnevalt esile tõstetud dialoogi ja eemaldame klassi rääkides ja lisage see praeguneDialogue.

function playTranscript () var currentDialogueTime = Math.max.apply (matemaatika, dialoogTimings.filter (funktsioon (v) tagasi 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';

Klassiga element rääkides kuvab unblurred teksti.

.räägib -webkit-filter: blur (0px) filter: hägusus (0px);

Ja see on nii, siin on täielik kood HTML ja JS kood.

  Justin: Ma üritan öelda, et kaebus ja lahendus on eraldi.
 Alistair: Te peate silmas, et sisemised ja välised kommunikatsioonid ja teated viiakse apellatsioonimenetlusse.
 Justin: Õige, sest nad ühenduvad kaebusega.
…

Demo

Vaadake allpool olevat demot, et saada idee, kuidas see toimib, kui kõik koodid on kokku pandud.