作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 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>
最佳答案
那是因为您没有处理确切的数字。将 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>
关于javascript - 如何突出显示音频文件的成绩单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43150490/
有没有一种方法可以“标记”对象的属性,使它们在反射中“突出”? 例如: class A { int aa, b; string s1, s2; public int AA
我是一名优秀的程序员,十分优秀!