1. 解决了最后一句歌词无法高亮显示的问题
function geciScroll () {//时间变化侦听事件
for(let i=0;i<time.length;i++){
if(i<time.length-1&&v.currentTime>=transTime(i)-0.5&&v.currentTime<transTime(i+1)-0.5){ //除了最后一句的情况
line=i//设置当前行的索引
$(".currentgeci").removeClass("currentgeci");
$("#geci").find("li").eq(line).addClass("currentgeci");
}else if(i==time.length-1&&v.currentTime>=transTime(i)){//是最后一句的情况
line=//设置当前行的索引
$(".currentgeci").removeClass("currentgeci");
$("#geci").find("li").eq(line).addClass("currentgeci");
}
}
var a=$(".currentgeci").offset();//当前歌词的偏移位置
if(a.top>($("#geci").offset().top+205)){
$("#geci").scrollTop(a.top-$("#geci").find("li").eq(0).offset().top-195);
}
}
//添加音乐播放时间变化事件
v.addEventListener("timeupdate",geciScroll);
随着时间变化一直在执行geciScroll()函数。
而geciScroll()函数进行for循环，除最后一句以外，判断当前播放时间的播放区间在什么位置，从而设置line的值，也就是当前歌词的索引。
之前最后一句歌词不能正常显示是因为判断条件有一个
v.currentTime<transTime(i+1)-0.5
当for循环到i=time.length-1的时候transTime(i+1)会超出范围，引起报错
所以需要将最后一句单独列出来处理，也就是加了else if的部分
2. map用法 参考地址
语法：
$.map( object, callback (this,index))
示例:
each的用法 参考地址
array
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});
object
var obj = {
"flammable": "inflammable",
"duh": "no duh"
};
$.each( obj, function( key, value ) {
alert( key + ": " + value );
});
