Javascript 如何突出显示音频文件的转录本？_Javascript_Audio_Highlight

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

javascript audio

Javascript 如何突出显示音频文件的转录本？,javascript,audio,highlight,Javascript,Audio,Highlight,我是javascript初学者，所以我很抱歉我的业余代码。我有一个音频和一些文字，是它的字幕。我有谈话的时间戳。例如，音频中“hi”的时间戳为“1.525487”秒。我想在那一刻突出显示文本“嗨” 当我对“span id”使用整数时，例如“ts1”，它工作正常，但当我使用像“1.525487”这样的十进制数时，它就不起作用了。我该怎么办谢谢你的帮助 <body> <audio id = "adi" controls> <source src="Gree

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

当我对“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>


嗨，你好吗？
var spns=document.getElementsByTagName（“SPAN”）；
var audi=document.getElementById（“adi”）；
奥迪.addEventListener（“时间更新”，f1）；
函数f1（）{
var i；
对于（i=0；i

那是因为你没有处理一个精确的数字。在事件中放置一个

console.log（audi.currentTime）

，您就会明白我的意思。你必须考虑一个时间间隔，而不是一个精确的时间值。在这里，请尝试以下方法：


嗨，你好吗？
var spns=document.getElementsByTagName（“SPAN”）；
var audi=document.getElementById（“adi”）；
奥迪.addEventListener（“时间更新”，f1）；
函数f1（）{
var i；
对于（i=0；i0）SPN[i-1].style.backgroundColor=“白色”；
spns[i].style.backgroundColor=“红色”；
}
}
}

下面是一个运行示例：

var spns=document.getElementsByTagName（“SPAN”）；
var audi=document.getElementById（“adi”）；
奥迪.addEventListener（“时间更新”，f1）；
函数f1（）{
var i；
对于（i=0；i0）SPN[i-1].style.backgroundColor=“白色”；
spns[i].style.backgroundColor=“红色”；
}
}
}


嗨，你好吗？

到底是什么不起作用？我做了一些测试，一切似乎都正常。检查这里：当我播放音频并达到“1.525487”秒时，文本“Hi”将不会突出显示。对不起，我的英语不好：（.非常感谢。我必须读几遍才能理解。如果你喜欢答案，请接受/投票。谢谢。是的。我喜欢。我该如何投票给答案？？？非常感谢我非常爱你。我挣扎了好几天，但现在效果很好！！投票给答案只需点击向上箭头。很高兴成功。谢谢。

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