html5音乐播放器视频教程,HTML5音乐播放器

歌词滚动时间校对问题

歌词滚动的实现我采用hash表存储时间轴和歌词，将歌词文本反序列化成如下格式

var lry = {

'00:00':{

index:0,

lyric:'不相信会绝望'

}

};

$audio.on('timeupdate', function () {

if (_audio_duration > 0) {

$('.cur').width(_audio.currentTime * 100 / _audio_duration + '%');

var curTime = timeDispose(_audio.currentTime);

//限定1s刷新一次

if (player.curTime !== curTime) {

var lrc = player.data[player.curIedex].lyric;

if (lrc[curTime]) {

player._$lyric_wrap.find('.on').removeClass('on');

var p = player._$lyric_wrap.find("p:nth-child(" + (lrc[curTime].index + 1) + ")");

p.addClass("on");

player._$lyric_wrap.css({

"transform": "translate(0,-" + lrc[curTime].index * player.lyricLineHeight + "px)",

"-ms-transform": "translate(0,-" + lrc[curTime].index * player.lyricLineHeight + "px)",

"-moz-transform": "translate(0,-" + lrc[curTime].index * player.lyricLineHeight + "px)",

"-webkit-transform": "translate(0,-" + lrc[curTime].index * player.lyricLineHeight + "px)",

"-o-transform": "translate(0,-" + lrc[curTime].index * player.lyricLineHeight + "px)"

});

}

player.curTime = curTime;

$('.curTime').html(curTime);

}

}

});

监听播放器的timeupdate事件，在歌词对象用当前播放时间轴位置查找对应歌词以及歌词的。但是会出现错位的bug，