Så här visar du Timed Transcript vid sidan av uppspelad ljud

Ljudutskrift är textversionen av talet, vilket är användbart för att tillhandahålla användbara material som inspelade föreläsningar, seminarier etc. till den hörbart utmanade. De brukar också hålla texter om händelser som intervjuer, domstolsförhandlingar och möten.

Talljud i webbsidor (som i podcaster) följs vanligtvis med transkript, till förmån för dem som är hörselskadade eller inte alls kan höra. Dom kan visa texten "spelar" bredvid ljudet. Det bästa sättet att skapa ljudutskrift är genom manuell tolkning och inspelning.

I det här inlägget ska vi se hur man visar ett löpande ljudutskrift tillsammans med ljudet. För att komma igång måste vi ha transkriptet klart. För det här inlägget har jag laddat ner ett ljud och dess transkript från voxtab.

Jag använder HTML ul lista för att visa dialogerna på en webbsida som nedan:

  Justin: Det jag försöker säga är att överklagandet och avvecklingen är separata.
 Alistair: Du menar att kommunikation och meddelanden internt och externt skulle sättas in i överklagandet.
 Justin: Rätt, för att de ansluter till överklagandet.
...

Därefter vill jag att all tillgänglig text är suddig och till avmarkera endast den dialog som matchar det nuvarande talet som spelas av ljudinspelningen. Så, för att avlägsna dialogerna använder jag CSS-filtret "oskärpa".

#transcript> li -webkit-filter: oskärpa (3px) filter: oskärpa (3px); övergång: alla .8s lätt, ...

För IE 10+ kan du lägga till text-shadow för att skapa en suddig effekt. Du kan använda den här koden för att upptäcka huruvida CSS-oskärpa har applicerats eller inte, och att ladda ditt specifika stylesheet i IE. När texten är suddig gick jag vidare och lade lite stil till transkriptet.

 if (getComputedStyle (dialoger [0]). webkitFilter === odefinierad && getComputedStyle (dialoger [0]) .filter === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ('länk'); linkEle.type = 'text / css'; linkEle.rel = 'stylesheet'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Nu lägger vi till ljudet på sidan, med det här.

De ontimeupdate händelse av audio elementet avfyras varje gång dess aktuell tid är uppdaterad, så vi använder den händelsen för att kontrollera aktuell körtid för ljudet och markera motsvarande dialog i transkriptet. Låt oss först skapa några globala variabler som vi behöver.

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

dialogueTimings är en rad siffror som representerar sekunder när varje dialog i transkriptet börjar. Den första dialogen börjar vid 0s, andra vid 4s och så vidare. previousDialogueTime kommer att användas för att spåra dialogförändringar.

Låt oss äntligen flytta till funktionen ansluten till ontimeupdate, som heter "playTranscript". Eftersom playTranscript avfyras nästan varje sekund ljudet spelar, måste vi först identifiera vilken dialog som spelas för närvarande. Antag att ljudet är klockan 0:14, då spelas den dialog som startade klockan 0:11 (se dialogueTimings array), om den aktuella tiden är 0:30 i ljudet är det dialogen som startade vid 0:29.

Därför, för att ta reda på när den aktuella dialogen började, filtrerar vi först alla gånger i dialogueTimings array som ligger under ljudets nuvarande tid. Om den aktuella tiden är 0:14 filtrerar vi ut alla nos. i matrisen som är under 14 (som är 0, 4, 9 och 11) och ta reda på det maximala nr. av dem, vilket är 11 (således började dialogen vid 0:11).

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

När currentDialogueTime beräknas, vi kontrollerar om det är detsamma som previousDialogueTime(det vill säga om dialogen i ljudet har ändrats eller inte), om det inte är en match (det vill säga om dialogen har ändrats), då currentDialogueTime är tilldelad till previousDialogueTime.

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

Låt oss nu använda indexet på currentDialogueTime i dialogueTimings array för att ta reda på vilken dialog i listan över transkriptdialoger måste markeras. Till exempel, om currentDialogueTime är 11, sedan ett index på 11 i dialogueTimings array är 3 vilket innebär att vi måste markera dialogen på index 3 i dialoger array.

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

En gång har vi hittat dialogen för att markera (det vill säga currentDialogue) vi rullar transcriptWrapper (om rullning) till currentDialogue är 50px under omslagets topp, då hittar vi den tidigare markerade dialogen och tar bort klassen tala från den och lägg till den till currentDialogue.

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

Elementet med klassen tala kommer att visa oslagen text.

.talar -webkit-filter: oskärpa (0px) filter: oskärpa (0px);

Och det är det, här är den fullständiga koden HTML och JS-koden.

  Justin: Det jag försöker säga är att överklagandet och avvecklingen är separata.
 Alistair: Du menar att kommunikation och meddelanden internt och externt skulle sättas in i överklagandet.
 Justin: Rätt, för att de ansluter till överklagandet.
...

demo

Kolla in demon nedan för att få en uppfattning om hur det fungerar när alla koder läggs ihop.