{"id":25614,"date":"2016-02-25T23:01:23","date_gmt":"2016-02-25T15:01:23","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25614"},"modified":"2017-11-22T23:23:36","modified_gmt":"2017-11-22T15:23:36","slug":"display-audio-transcript","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/display-audio-transcript\/","title":{"rendered":"How to Display Timed Transcript Alongside Played Audio"},"content":{"rendered":"

Audio transcript is the text version of speech, helpful in providing useful materials like recorded lectures<\/a>, seminars, etc. to the audibly challenged. They\u2019re also used to keep textual records of events like interviews, court hearings and meetings.<\/p>\n

Speech audio in webpages (like in podcasts<\/a>) are typically accompanied with transcripts, for the benefit of those who are hearing impaired or not able to hear at all. They can view the text \"playing\" alongside the audio<\/strong>. The best way to create an audio transcript is by means of manual interpretation and recording.<\/p>\n

In this post, we\u2019re going to see how to display a running audio transcript alongside the audio<\/strong>. To get started we need to have the transcript ready. For this post, I\u2019ve downloaded a sample audio and its transcript from voxtab<\/a><\/em>.<\/p>\n

Read more: <\/strong>Beginner\u2019s Guide to Setting Up Your Own Podcasts<\/a><\/p>\n

I use HTML ul<\/code> list to display the dialogues on a webpage like below:<\/p>\n

<div id=\"transcriptWrapper\">\r\n    <ul id=\"transcript\">\r\n        <li class=\"speaker1\"><strong class=\"speakerName\">Justin<\/strong>: What I am trying to say is that the appeal and the settlement are separate.<\/li>\r\n        <li class=\"speaker2\"><strong class=\"speakerName\">Alistair<\/strong>: You mean that communications and announcements internal and external would be brought into the appeal process.<\/li>\r\n        <li class=\"speaker1\"><strong class=\"speakerName\">Justin<\/strong>: Right, because they connect to the appeal.<\/li>\r\n        ...\r\n    <\/ul>\r\n<\/div>\r\n<\/pre>\n
Next, I want all the available text to be blurred and to unblur only the dialogue that will match the current speech being played by the audio recording<\/strong>. So, to unblur the dialogues I use the CSS filter \"blur\".<\/p>\n
#transcript > li{\r\n     -webkit-filter: blur(3px)\r\n    filter: blur(3px);\r\n    transition: all .8s ease;\r\n    ...\r\n}<\/pre>\n
For IE 10+ you can add text-shadow<\/code> to create a blurred 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 is blurred, I went ahead and added some style to the transcript.<\/p>\n
\r\nif( getComputedStyle(dialogues[0]).webkitFilter === undefined && getComputedStyle(dialogues[0]).filter === \"none\"){\r\n    var headEle = document.querySelector('head'),\r\n      linkEle = document.createElement('link');\r\n      linkEle.type = 'text\/css';\r\n      linkEle.rel = 'stylesheet';\r\n      linkEle.href = 'ie.css';\r\n      headEle.appendChild(linkEle);\r\n}<\/pre>\n
Now, let\u2019s add the audio to the page, with this.<\/p>\n
<audio id=\"audio\" ontimeupdate=\"playTranscript()\" controls>\r\n    <source src=\"sample.mp3\" type=\"audio\/mpeg\">\r\n    Your browser does not support the audio element.\r\n<\/audio> \r\n<\/pre>\n
The ontimeupdate<\/code> event of the audio<\/code> element is fired every time its currentTime<\/code> is updated, so we\u2019ll use that event to check the current running time of the audio and highlight the corresponding dialogue in the transcript. Let\u2019s first create some global variables we\u2019ll be needing.<\/p>\n
dialogueTimings = [0,4,9,11,18,24,29,31,44,45,47];\r\ndialogues = document.querySelectorAll('#transcript>li');\r\ntranscriptWrapper = document.querySelector('#transcriptWrapper');\r\naudio = document.querySelector('#audio');\r\npreviousDialogueTime = -1;\r\n<\/pre>\n
dialogueTimings<\/code> is an array of numbers representing the seconds when each dialogue in the transcript begins. The first dialogue starts at 0s, second at 4s, and so on. previousDialogueTime<\/code> will be used to track dialogue changes.<\/p>\n
Let\u2019s finally move to the function hooked to ontimeupdate<\/code>, which is named \"playTranscript\". Since playTranscript<\/code> is fired almost every second the audio is playing, we first need to identify which dialogue is currently being played. Suppose the audio is at 0:14, then it\u2019s playing the dialogue that started at 0:11 (refer the dialogueTimings<\/code> array), if the current time is 0:30 in the audio then it\u2019s the dialogue that started at 0:29.<\/p>\n
Hence, to find out when the current dialogue begun, we first filter all the times in the dialogueTimings<\/code> array which are below the current time of the audio. If the current time is 0:14 we filter out the all the nos. in the array that are below 14 (which are 0, 4, 9 and 11) and find out the maximum no. out of those, which is 11 (thus the dialogue started at 0:11).<\/p>\n
function playTranscript(){\r\n    var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v <= audio.currentTime}));\r\n}\r\n<\/pre>\n
Once the currentDialogueTime<\/code> is calculated, we check if it\u2019s the same as the previousDialogueTime<\/code>(that is if the dialogue in the audio has changed or not), if it\u2019s not a match (that is if the dialogue has changed), then currentDialogueTime<\/code> is assigned to previousDialogueTime<\/code>.<\/p>\n
function playTranscript(){\r\n    var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v <= audio.currentTime}));\r\n\r\n    if(previousDialogueTime !== currentDialogueTime) {\r\n        previousDialogueTime = currentDialogueTime;\r\n    }\r\n}\r\n<\/pre>\n
Now let\u2019s use the index of the currentDialogueTime<\/code> in the dialogueTimings<\/code> array to find out which dialogue in the list of transcript dialogues needs to be highlighted. For example, if the currentDialogueTime<\/code> is 11, then index of 11 in the dialogueTimings<\/code> array is 3 which means we have to highlight the dialogue at  index 3  in the dialogues<\/code> array.<\/p>\n
function playTranscript(){\r\n    var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v <= audio.currentTime}));\r\n\r\n    if(previousDialogueTime !== currentDialogueTime) {\r\n        previousDialogueTime = currentDialogueTime;\r\n        var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];\r\n    }\r\n}\r\n<\/pre>\n
Once we\u2019ve found the dialogue to highlight (that is the currentDialogue<\/code>), we scroll transcriptWrapper<\/code> (if scrollable) till currentDialogue<\/code> is 50px below the wrapper\u2019s top, then we find out the previously highlighted dialogue and remove the class speaking<\/code> from it and add it to currentDialogue<\/code>.<\/p>\n
function playTranscript(){\r\n    var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v <= audio.currentTime}));\r\n\r\n    if(previousDialogueTime !== currentDialogueTime) {\r\n        previousDialogueTime = currentDialogueTime;\r\n        var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];\r\n        transcriptWrapper.scrollTop  = currentDialogue.offsetTop - 50;  \r\n        var previousDialogue = document.getElementsByClassName('speaking')[0];\r\n        if(previousDialogue !== undefined)\r\n            previousDialogue.className = previousDialogue.className.replace('speaking','');\r\n        currentDialogue.className +=' speaking';\r\n    }\r\n}\r\n<\/pre>\n
The element with class speaking<\/code> will display unblurred text.<\/p>\n
.speaking{\r\n  -webkit-filter: blur(0px)\r\n  filter:blur(0px);\r\n}<\/pre>\n
And that\u2019s it, here\u2019s the full code HTML and JS code.<\/p>\n
<div id=\"transcriptWrapper\">\r\n    <ul id=\"transcript\">\r\n        <li class=\"speaker1\"><strong class=\"speakerName\">Justin<\/strong>: What I am trying to say is that the appeal and the settlement are separate.<\/li>\r\n        <li class=\"speaker2\"><strong class=\"speakerName\">Alistair<\/strong>: You mean that communications and announcements internal and external would be brought into the appeal process.<\/li>\r\n        <li class=\"speaker1\"><strong class=\"speakerName\">Justin<\/strong>: Right, because they connect to the appeal.<\/li>\r\n        ...\r\n    <\/ul>\r\n<\/div>\r\n\r\n<br>\r\n\r\n<audio id=\"audio\" ontimeupdate=\"playTranscript()\" controls>\r\n    <source src=\"sample.mp3\" type=\"audio\/mpeg\">\r\n    Your browser does not support the audio element.\r\n<\/audio>\r\n\r\n<br>\r\n\r\n<script>\r\ndialogueTimings = [0,4,9,11,18,24,29,31,44,45,47];\r\ndialogues = document.querySelectorAll('#transcript>li');\r\ntranscriptWrapper = document.querySelector('#transcriptWrapper');\r\naudio = document.querySelector('#audio');\r\npreviousDialogueTime = -1;\r\n\r\nfunction playTranscript(){\r\n    var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v <= audio.currentTime}));\r\n\r\n    if(previousDialogueTime !== currentDialogueTime) {\r\n        previousDialogueTime = currentDialogueTime;\r\n        var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];\r\n        transcriptWrapper.scrollTop  = currentDialogue.offsetTop - 50;  \r\n        var previousDialogue = document.getElementsByClassName('speaking')[0];\r\n        if(previousDialogue !== undefined)\r\n            previousDialogue.className = previousDialogue.className.replace('speaking','');\r\n        currentDialogue.className +=' speaking';\r\n    }\r\n}\r\n<\/script>\r\n<\/pre>\n
Demo<\/h2>\n
Check out the demo below to get an idea how it works when all codes are put together.<\/p>\n