Az időzített átirat megjelenítése a lejátszott hang mellett

Az audio transzkriptum a beszéd szöveges változata, amely hasznos anyagok, mint például az előadások, szemináriumok stb. Ők is használják, hogy szöveges feljegyzéseket készítsenek az eseményekről, mint például az interjúkról, a bírósági tárgyalásokról és az ülésekről.

A weboldalak (például podcastok) beszédhangja jellemzően átiratokkal van ellátva, azok számára, akik hallássérültek vagy egyáltalán nem tudnak hallani. Ők tudnak nézd meg a szöveget a hang mellett. Az audió átirat létrehozásának legjobb módja a kézi értelmezés és felvétel.

Ebben a bejegyzésben látni fogjuk hogyan jeleníthet meg egy futó audió átirat az audió mellett. Ahhoz, hogy elkezdjük, készen kell állnunk az átirat elkészítéséhez. Ehhez a hozzászóláshoz letöltöttem egy minta audiót és annak átiratát voxtab.

HTML-t használok ul a következő párbeszédablakok megjelenítéséhez:

 
 
Justin: Azt akarom mondani, hogy a fellebbezés és az elszámolás külön.
 
Alistair: Úgy érti, hogy a belső és külső kommunikáció és közlemények a fellebbezési eljárásba kerülnek.
 
Justin: Rendben, mert csatlakoznak a fellebbezéshez.
... 
 
 

Ezután szeretném, hogy az összes rendelkezésre álló szöveg elmosódjon és legyen csak a párbeszédet oldja meg, amely megfelel az audió felvétel által lejátszott aktuális beszédnek. Tehát a párbeszédek feloldásához használom a „blur” CSS szűrőt.

#transcript> li -webkit-filter: blur (3px) szűrő: elmosódás (3px); átmenet: minden .8s könnyű;…

Az IE 10+ -hez hozzáadható text-shadow homályos hatást hoz létre. Ezt a kódot felhasználhatja a CSS-elmosódás alkalmazásának észlelésére, illetve az IE-specifikus stíluslap betöltésére. Amint a szöveg elmosódott, elmentem és hozzáadtam néhány stílust az átirathoz.

 if (getComputedStyle (párbeszédek [0]). webkitFilter === undefined && getComputedStyle (párbeszédek [0]). filter === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ('link'); linkEle.type = 'text / css'; linkEle.rel = 'stíluslap'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle); 

Most hozzáadjuk a hangot az oldalhoz.

A ontimeupdate esemény hang- az elemet minden alkalommal lőtték aktuális idő frissítésre kerül, ezért ezt az eseményt használjuk az audió aktuális futási idejének ellenőrzésére, és kiemeljük a megfelelő párbeszédet az átiratban. Először hozzunk létre néhány globális változót, amire szükségünk lesz.

dialogTimings = [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; 

dialogueTimings a számok tömbje, amely a másodperceket jelenti, amikor minden egyes dialógus megkezdődik. Az első párbeszéd 0-tól kezdődik, a második a 4-es, és így tovább. previousDialogueTime a párbeszéd változásainak nyomon követésére szolgál.

Végül lépjünk a függesztett függvényhez ontimeupdate, amelyet "playTranscript" -nek nevezünk. Mivel playTranscript majdnem minden másodpercben lőtték ki a hangot, először meg kell határoznunk, hogy melyik párbeszéd van jelen. Tegyük fel, hogy a hang 0:14-nél van, majd a 0:11-kor kezdődött párbeszédet (lásd: dialogueTimings tömb), ha az aktuális idő 0:30, akkor a 0:29-kor kezdődött párbeszéd.

Ezért, hogy megtudja, mikor kezdődött a jelenlegi párbeszéd, először szűrjük az összes alkalommal dialogueTimings tömb, amely a hang aktuális idejének alatt van. Ha az aktuális idő 0:14, kiszűrjük az összes nos-t. a tömbben, amely 14 alatti (ami 0, 4, 9 és 11), és megtudja a maximális számot. ebből 11, ami a 0: 11-kor kezdődött.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (függvény (v) return v <= audio.currentTime));  

Egyszer a currentDialogueTime kiszámítjuk, ellenőrizzük, hogy ugyanaz, mint a previousDialogueTime(ha a párbeszéd a hangban megváltozott vagy nem változott), ha nem egyezik (azaz a párbeszéd megváltozott), akkor currentDialogueTime van hozzárendelve previousDialogueTime.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (függvény (v) return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;   

Most használjuk a currentDialogueTime ban,-ben dialogueTimings tömb, hogy megtudja, milyen párbeszédet kell kiemelni a transzkripciós párbeszédek listájában. Például, ha a currentDialogueTime 11, majd a 11-es index a dialogueTimings A tömb 3, ami azt jelenti, hogy ki kell emelnünk a 3-as indexben a párbeszédet párbeszédek sor.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (függvény (v) return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];   

Miután megtalálta a kiemelt párbeszédet (ez az currentDialogue), görgetünk transcriptWrapper (ha görgethető) currentDialogue 50px a burkolat teteje alatt, majd megtudjuk a korábban kiemelt párbeszédet és eltávolítjuk az osztályt beszélő belőle, és add hozzá currentDialogue.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (függvény (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';   

Az elem osztály beszélő megjeleníti a homályos szöveget.

.beszélő -webkit-filter: blur (0px) szűrő: elmosódás (0px); 

És ez az, itt van a teljes kód HTML és JS kód.

 
 
Justin: Azt akarom mondani, hogy a fellebbezés és az elszámolás külön.
 
Alistair: Úgy érti, hogy a belső és külső kommunikáció és közlemények a fellebbezési eljárásba kerülnek.
 
Justin: Rendben, mert csatlakoznak a fellebbezéshez.
... 
 
 
  
  

Demó

Nézze meg az alábbi bemutatót, hogy megtudja, hogyan működik, amikor az összes kódot összeállítják.