CODEWITHSUNDEEP
javascriptaudiohighlight
Morri
Morri

Reputation: 65

How to highlight the transcript of a audio file?

Im beginner in javascript so I'm very sorry for my amateurish codes. I have a audio and some text that is subtitles of it. I have the timestamps of conversation. for example the timestamp of "hi" in audio is "1.525487" sec. I want to highlight the text "hi" in that moment.

When I use a integer number for "span id" for example "ts1" it works correctly, but when I use decimal number like "1.525487" it dose not work. what should I do?

Thanks for your helps.

<body>
<audio id = "adi" controls>
<source src="Greeting.mp3"></source>
</audio>

<div>
<pre>
A: <span id="ts1.525487">Hi</span> , <span id="ts2.193877">how are you doing?</span>
</pre>
</div>

<script>
var spns = document.getElementsByTagName("SPAN");
var audi = document.getElementById("adi");

audi.addEventListener("timeupdate", f1);
function f1(){
    var i;
    for (i = 0 ; i< spns.length ; i++){
        if(spns[i].id == "ts" + audi.currentTime){
            spns[i].style.backgroundColor = "red";  
        }
    }
}
</script>
</body>

Upvotes: 5

Views: 3824

Answers (1)

Nelson Teixeira
Nelson Teixeira

Reputation: 6580

That's because you're not dealing with a exact number. Put a console.log(audi.currentTime) in the event and you'll see what I mean. You have to consider a time interval not an exact time value. Here, try this way:

<body>
<audio id = "adi" controls>
<source src="Greetings.mp3"></source>
</audio>

<div>
<pre>
A: <span id="ts3.525487">Hi</span> , <span id="ts5.193877">how are you doing?</span>
</pre>
</div>

<script>
var spns = document.getElementsByTagName("SPAN");
var audi = document.getElementById("adi");

audi.addEventListener("timeupdate", f1);
function f1(){
    var i;  
    for (i = 0 ; i< spns.length ; i++){
    var time = Number(spns[i].id.slice(2));
        if(time < audi.currentTime){
            if (i>0) spns[i -1].style.backgroundColor = "white";  
            spns[i].style.backgroundColor = "red";  
        }
    }
}
</script>
</body>

Here's a running example:

var spns = document.getElementsByTagName("SPAN");
var audi = document.getElementById("adi");

audi.addEventListener("timeupdate", f1);
function f1(){
  var i;  
  for (i = 0 ; i< spns.length ; i++){
    var time = Number(spns[i].id.slice(2));
    if(time < audi.currentTime){
      if (i>0) spns[i -1].style.backgroundColor = "white";  
      spns[i].style.backgroundColor = "red";  
    }
  }
}
<audio id = "adi" controls>
<source src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3"></source>
</audio>

<div>
<pre>
A: <span id="ts1.525487">Hi</span> , <span id="ts3.193877">how are you doing?</span>
</pre>
</div>

JSFiddle: https://jsfiddle.net/d1wryoak/2/

Edit

After you understand the above code, try to understand the one below. It's a more modern aproach to it.

var audi = document.getElementById("adi");
audi.addEventListener("timeupdate", ()=>{
    var setBackground = (elem, color)=>elem.style.backgroundColor = color,
        last = undefined;
    Array.from(document.getElementsByTagName("SPAN")).forEach((spn)=>{
        if (!(spn.id.slice(2) < audi.currentTime)) return;
        last && setBackground(last, "white");  
        setBackground((last = spn), "red");  
    });
})
<audio id = "adi" controls>
<source src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3"></source>
</audio>

<div>
<pre>
A: <span id="ts1.525487">Hi</span> , <span id="ts3.193877">how are you doing?</span>
</pre>
</div>

https://jsfiddle.net/d1wryoak/4/

Upvotes: 6

Related Questions