如何突出显示音频文件的转录本？答案

【问题标题】：How to highlight the transcript of a audio file?如何突出显示音频文件的转录本？
【发布时间】：2017-04-01 08:20:14
【问题描述】：

我是 javascript 的初学者，所以我很抱歉我的业余代码。我有一段音频和一些文字是它的字幕。我有谈话的时间戳。例如，音频中“hi”的时间戳是“1.525487”秒。我想在那一刻突出显示文本“hi”。

当我为“span id”使用整数时，例如“ts1”，它可以正常工作，但是当我使用像“1.525487”这样的十进制数字时它不起作用。我该怎么办？

感谢您的帮助。

<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>

【问题讨论】：

究竟是什么不工作？我做了一些测试，一切似乎都在工作。在这里查看：jsfiddle.net/fx5vh936
当我播放音频并达到“1.525487”秒时，文本“Hi”不会突出显示。抱歉我的英语不好:(。

标签： javascript audio highlight

【解决方案1】：

那是因为您处理的不是一个确切的数字。在活动中添加console.log(audi.currentTime)，您就会明白我的意思。您必须考虑时间间隔而不是确切的时间值。来，试试这个方法：

<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>

这是一个运行示例：

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/

编辑

在你理解了上面的代码之后，试着理解下面的代码。这是一种更现代的方法。

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/

【讨论】：

非常感谢。我必须多读几遍才能理解。
如果您喜欢这个答案，请接受/点赞。谢谢。
是的。喜欢。我如何投票给答案？？？非常感谢我爱你我为此苦苦挣扎了几天，但现在效果很好！
要为答案投票，只需单击向上箭头。很高兴它奏效了。谢谢。