How to Show Transcript Alongside Played Audio

How to Show Transcript Alongside Played Audio

Hello friends today we gonna learn about How to Show Transcript Alongside Played Audio. So read this article, How to Show Transcript Alongside Played Audio step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Show Transcript Alongside Played Audio

Audio transcript is the text version of speech, useful in providing usable material such as recorded lectures, seminars, etc. to be audibly challenged. They are also used to keep text records of events such as interviews, hearings and meetings.

Speech audio on web pages (such as in podcasts) is usually accompanied by transcriptions, for the benefit of the hearing impaired or not being able to hear at all. They can watch the text “play” next to the audioThe best way to make an audio transcription is through manual interpretation and recording.

In this post we are going to see how to display a running audio transcript next to the audioTo begin with, we must have the transcription ready. For this post, I downloaded a sample audio and its transcript from voxtab.

I am using HTML ul list to display the dialogs on a web page like below:

  • Justin : what I’m trying to say is that the appeal and the settlement are separate.
  • Alistair : you mean that internal and external announcements and statements are included in the appeal procedure.
  • Justin : Right, because they connect to the profession.

Next, I want all available text to be blurry and also Blur only the dialog that corresponds to the current speech played by the audio recordingSo, to blur the dialogues, I use the CSS filter “blur”.

#transcript> li {-webkit-filter: blur (3px) filter: blur (3px); transition: all .8s ease;…}

For IE 10+, you can add text shadow to create a blurry effect. You can use this code to detect whether CSS blur has been applied or not, and to load your IE specific stylesheet. Once the text faded out I went ahead and added some style to the transcript.

if (getComputedStyle (dialogs[0]) .webkitFilter === undefined && getComputedStyle (dialogs[0]) .filter === “none”) {var headEle = document.querySelector (‘head’), linkEle = document.createElement (‘link’); linkEle.type = “text / css”; linkEle.rel = “stylesheet”; LinkEle.href = “https://www.hongkiat.com/blog/display-audio-transcript/ie.css”; headEle.appendChild (linkEle);}

Now let’s add the audio to the page, with this.

The audio element ontime update event is triggered every time the current time is updated, so we will use that event to check the current audio playing time and highlight the corresponding dialog in the transcript. First, let’s create some global variables we need.

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;

dialogTimings is a series of numbers representing the seconds each dialogue in the transcript begins. The first dialog starts at 0s, the second at 4s, and so on. previousDialogueTime is used to track dialog changes.

Finally, let’s get to the function associated with ontimeupdate called “playTranscript”. Since playTranscript is triggered almost every second the audio is playing, we first need to determine which dialog is currently playing. Suppose the audio is at 0:14 then it plays the dialog that started at 0:11 (refer to the Timings array dialog), if the current time is 0:30 in the audio then it is the dialog that started at 0 : 29.

Therefore, to find out when the current dialog started, we first filter all times in the array dialogTimings that are lower than the current time of the audio. If the current time is 0:14, we filter all the numbers in the array that are less than 14 (which are 0, 4, 9, and 11) and find the maximum number. of those, that’s 11 (so the dialogue started at 0:11).

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

Once the currentDialogueTime has been calculated, we check if it is the same as the previous DialogueTime (i.e. whether the dialogue in the audio has changed or not), if it is not a match (i.e. if the dialogue has changed) then currentDialogueTime assigned to previous Dialogue Time.

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

if (previousDialogueTime! == currentDialogueTime) {previousDialogueTime = currentDialogueTime;}}

Now let’s use the index of the currentDialogueTime in the dialogTimings array to figure out which dialog to highlight in the list of transcription dialogs. For example, if the currentDialogueTime is 11, then index of 11 in the array dialogTimings is 3, which means that we must mark the dialog at index 3 in the array dialogs.

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

if (previousDialogueTime! == currentDialogueTime) {previousDialogueTime = currentDialogueTime; var currentDialogue = dialogs[dialogueTimings.indexOf(currentDialogueTime)]

Once we find the dialog to highlight (that’s the currentDialogue), we scroll transcriptWrapper (if scrollable) until currentDialogue is 50px below the top of the wrapper, then find the previously highlighted dialog and delete the speaking class and add it to currentDialogue.

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

if (previousDialogueTime! == currentDialogueTime) {previousDialogueTime = currentDialogueTime; var currentDialogue = dialogs[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’;}}

The class talk element displays blurry text.

.speaking {-webkit-filter: blur (0px) filter: blur (0px);}

And that’s it, here is the complete HTML and JS code.

  • Justin : what I’m trying to say is that the appeal and the settlement are separate.
  • Alistair : you mean that internal and external notices and notices are included in the appeal procedure.
  • Justin : Right, because they connect to the profession.

back to menu ↑

Demo

Check out the demo below to get an idea of ​​how it works when all the codes are put together.

back to menu ↑

How to Show Transcript Alongside Played Audio: benefits

  • The How to Show Transcript Alongside Played Audio tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Show Transcript Alongside Played Audio guide is free.

back to menu ↑

Faq

Tutorial summary of How to Show Transcript Alongside Played Audio

In this guide, we told you about the How to Show Transcript Alongside Played Audio; please read all steps so that you understand How to Show Transcript Alongside Played Audio in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Show Transcript Alongside Played Audio, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Show Transcript Alongside Played Audio tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Show Transcript Alongside Played Audio. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Show Transcript Alongside Played Audio, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Show Transcript Alongside Played Audio”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Show Transcript Alongside Played Audio, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo