Hoe getimed transcript weergeven naast gespeelde audio

Audio-transcriptie is de tekstversie van spraak, nuttig bij het bieden van bruikbare materialen, zoals opgenomen lezingen, seminars, enz. Aan de hoorbaar uitgedaagde. Ze worden ook gebruikt om tekstuele gegevens bij te houden over gebeurtenissen zoals interviews, rechtszittingen en vergaderingen.

Spraakaudio op webpagina's (zoals in podcasts) gaat meestal gepaard met transcripties, ten behoeve van diegenen die slechthorend zijn of helemaal niet kunnen horen. Ze kunnen bekijk de tekst "spelen" naast de audio. De beste manier om een audiotranscript te maken is door middel van handmatige interpretatie en opname.

In deze post gaan we kijken hoe een lopende audio-transcriptie naast de audio weer te geven. Om te beginnen moeten we het transcript klaar hebben. Voor deze post heb ik een voorbeeldaudio en het transcript daarvan gedownload voxtab.

Ik gebruik HTML ul lijst om de dialogen weer te geven op een webpagina zoals hieronder:

  Justin: Wat ik probeer te zeggen is dat het beroep en de schikking gescheiden zijn.
 Alistair: Je bedoelt dat communicatie en aankondigingen, zowel intern als extern, in het beroepsproces worden gebracht.
 Justin: Juist, omdat ze aansluiten bij de oproep.
...

Vervolgens wil ik dat alle beschikbare tekst vervaagd en zichtbaar is maak alleen de dialoog ongedaan die overeenkomt met de huidige spraak die wordt afgespeeld door de audio-opname. Dus om de dialogen ongedaan te maken, gebruik ik het CSS-filter "vervagen".

#transcript> li -webkit-filter: vervaging (3px) filter: vervaging (3px); overgang: alle .8s gemak; ...

Voor IE 10+ kunt u toevoegen schaduw tekst om een wazig effect te creëren. U kunt deze code gebruiken om te detecteren of CSS vervaging al dan niet is toegepast en om uw IE-specifieke stylesheet te laden. Toen de tekst eenmaal vaag was, ging ik verder en voegde ik wat stijl toe aan het transcript.

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

Laten we nu de audio aan de pagina toevoegen.

De ontimeupdate evenement van de audio element wordt elke keer afgevuurd huidige tijd is bijgewerkt, dus gebruiken we die gebeurtenis om de huidige looptijd van de audio te controleren en de bijbehorende dialoog in het transcript te markeren. Laten we eerst een aantal globale variabelen maken die we nodig hebben.

dialogueTimings = [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 is een reeks getallen die de seconden vertegenwoordigen wanneer elke dialoog in het transcript begint. De eerste dialoog begint bij 0s, seconde bij 4s, enzovoort. previousDialogueTime wordt gebruikt om wijzigingen in de dialoog te volgen.

Laten we eindelijk gaan naar de functie waaraan verslaafd is ontimeupdate, met de naam "playTranscript". Sinds playTranscript bijna elke seconde wordt afgevuurd waarop de audio wordt afgespeeld, moeten we eerst vaststellen welke dialoog momenteel wordt afgespeeld. Stel dat de audio op 0:14 staat, dan speelt het de dialoog af die begon om 0:11 (raadpleeg de dialogueTimings array), als de huidige tijd 0:30 is in de audio, is dit de dialoog die is gestart om 0:29.

Daarom, om uit te vinden wanneer de huidige dialoog is begonnen, filteren we eerst alle tijden in de dialogueTimings array die lager zijn dan de huidige tijd van de audio. Als de huidige tijd 0:14 is, filteren we alle nos. in de array die lager zijn dan 14 (die 0, 4, 9 en 11 zijn) en ontdek het maximale aantal. van die, dat is 11 (dus de dialoog begon om 0:11).

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

Zodra de currentDialogueTime wordt berekend, we controleren of het hetzelfde is als de previousDialogueTime(dat wil zeggen als het dialoogvenster in de audio is gewijzigd of niet), als het geen overeenkomst is (dat wil zeggen als de dialoog is gewijzigd), dan currentDialogueTime is toegewezen aan previousDialogueTime.

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

Laten we nu de index van de gebruiken currentDialogueTime in de dialogueTimings array om uit te vinden welke dialoog in de lijst met transcriptiedialogen moet worden gemarkeerd. Bijvoorbeeld, als de currentDialogueTime is 11, dan index van 11 in de dialogueTimings array is 3, wat betekent dat we de dialoog bij index 3 in de dialogen rangschikking.

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

Zodra we de dialoog hebben gevonden om te markeren (dat is de currentDialogue), we scrollen transcriptWrapper (indien scrollable) tot currentDialogue is 50 px onder de bovenkant van de wrapper, dan komen we de eerder gemarkeerde dialoog te weten en verwijderen we de klasse sprekend ervan en voeg het toe currentDialogue.

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

Het element met klasse sprekend zal ongeblazen tekst weergeven.

.Spreken -webkit-filter: vervagen (0px) filter: vervagen (0px);

En dat is het, hier is de volledige code HTML- en JS-code.

  Justin: Wat ik probeer te zeggen is dat het beroep en de schikking gescheiden zijn.
 Alistair: Je bedoelt dat communicatie en aankondigingen, zowel intern als extern, in het beroepsproces worden gebracht.
 Justin: Juist, omdat ze aansluiten bij de oproep.
...

demonstratie

Bekijk de onderstaande demo om een idee te krijgen hoe het werkt wanneer alle codes zijn samengesteld.