nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


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.

Hoe Tweets privé delen

Hoe Tweets privé delen

Twitter heeft een nieuwe functie genaamd Share via Direct Message geïntroduceerd waarmee je tweets privé kunt delen. Je vindt deze functie in de vorm van een knop Envelop (in iOS- en Android-apps) in dezelfde rij als de vind-ik-leuk en de retweet-functie .Hier leest u hoe u dit kunt gebruiken om tweets privé te delen via de Web-, Android- en iOS-app.Pr

(Technische en ontwerptips)

Creatieve manieren waarop mensen omgaan met hun kapotte telefoonschermen

Creatieve manieren waarop mensen omgaan met hun kapotte telefoonschermen

Met alle innovatie die naar smartphones is gegaan, zijn de schermen verre van onoverwinnelijk. Een gebarsten scherm op je mobiel kan je gemakkelijk een paar honderd dollar terugbrengen, afhankelijk van de beschikbaarheid van het scherm en de geschoolde arbeid die nodig is om het te vervangen. Mogelijk kunt u uw telefoon ook een tijdje niet gebruiken terwijl het nieuwe scherm is geplaatst

(Technische en ontwerptips)