Hoe getimed transcript weergeven naast gespeelde audio

Audio-transcript is de tekstversie van spraak, nuttig bij het leveren van bruikbare materialen zoals opgenomen lezingen, seminars, enz. Aan de auditief 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 de tekst "spelen" naast de audio bekijken . De beste manier om een ​​audiotranscript te maken is door middel van handmatige interpretatie en opname.

In dit bericht gaan we bekijken hoe je naast de audio een lopend audiotranscript kunt weergeven . Om te beginnen moeten we het transcript klaar hebben. Voor deze post heb ik een voorbeeldaudio en het transcript van voxtab gedownload .

Ik gebruik de 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 : u bedoelt dat interne en externe communicatie en aankondigingen in het bezwaarproces worden gebracht.
Justin : Precies, omdat ze aansluiten bij de aantrekkingskracht.
...

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

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

Voor IE 10+ kunt u text-shadow toevoegen 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 gebeurtenis van het audio element wordt afgevuurd telkens wanneer de currentTime wordt bijgewerkt, dus we zullen die gebeurtenis gebruiken 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 array van getallen die de seconden vertegenwoordigen wanneer elke dialoog in het transcript begint. De eerste dialoog begint bij 0s, seconde bij 4s, enzovoort. previousDialogueTime zal worden gebruikt om wijzigingen in de dialoog bij te houden.

Laten we eindelijk gaan naar de functie hooked to ontimeupdate, genaamd "playTranscript". Aangezien playTranscript bijna elke seconde wordt afgespeeld, wordt eerst bepaald welke dialoog momenteel wordt afgespeeld. Stel dat de audio op 0:14 staat, dan speelt het de dialoog af die begon om 0:11 (verwijs de array dialogueTimings ), als de huidige tijd 0:30 is in de audio dan is het de dialoog die begon om 0:29.

Daarom, om uit te vinden wanneer de huidige dialoog is begonnen, filteren we eerst alle tijden in de array dialogueTimings die onder de huidige tijd van de audio liggen. Als de huidige tijd 0:14 is, filteren we de alle neg. in de array die lager zijn dan 14 (wat 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})); } 

Nadat de currentDialogueTime is berekend, controleren we of deze currentDialogueTime is aan de currentDialogueTime (dat wil zeggen als de dialoog in de audio is gewijzigd of niet), als het geen match is (dat wil zeggen als de dialoog is gewijzigd), dan wordt currentDialogueTime 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 currentDialogueTime in de array dialogueTimings om erachter te komen welke dialoog in de lijst met transcriptiedialogen moet worden gemarkeerd. Als de currentDialogueTime bijvoorbeeld 11 is, is de index van 11 in de array currentDialogueTime 3, wat betekent dat we de dialoog in index 3 in de array dialogues moeten markeren.

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

Zodra we de dialoog hebben gevonden om te markeren (dat is de currentDialogue ), scrollen we transcriptWrapper (indien scrollable) tot currentDialogue 50px onder de top van de wrapper is, dan komen we de eerder gemarkeerde dialoog te weten en wordt de klasse er uit verwijderd en toegevoegd naar de huidige currentDialogue .

 function playTranscript () {var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (function (v) {return v <= audio.currentTime})); if (previousDialogueTime! == currentDialogueTime) {previousDialogueTime = currentDialogueTime; var currentDialogue = dialogen [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 speaking zal ongeblazen tekst weergeven.

 .speaking {-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 : u bedoelt dat interne en externe communicatie en aankondigingen in het bezwaarproces worden gebracht.
Justin : Precies, omdat ze aansluiten bij de aantrekkingskracht.
...

demonstratie

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

50 gratis en handige grafische pictogrammen voor webontwerpers

Pictogrammen zijn kleine grafische elementen op een website die de gebruiker helpen bij het navigeren door de pagina's. Met het oog op het belang van pictogrammen, heb ik eerder verschillende soorten pictogrammensets getoond, inclusief weerpictogrammen, smileypictogrammen, medische pictogrammen enz

(Technische en ontwerptips)

10 dingen die we niet meer zouden moeten doen in groepschats

Het is waarschijnlijk veilig om te zeggen dat de meesten van ons tegenwoordig sms'en op berichten-apps in plaats van sms- berichten. De weinigen onder ons die nog steeds sms'en, worden echter belegerd met verzoeken om deze of die app te downloaden om berichtenkosten te besparen en omdat berichtenapps je veel meer kunnen laten doen, zoals het gelijktijdig verzenden van berichten naar een grote groep mensen

(Technische en ontwerptips)