jquery 实现实时歌词更新

最近自己写了个移动端音乐播放器，用了很多框架，也踩了很多坑，感觉比较复杂的就是计算歌词实时播放了，大概给整理了一下：

布局

（歌词都是后台数据获取，方便理解我把所有歌词都一一列出来）

    

        
    
    

        

            
逃跑计划 
            
一万次悲伤 
            
oh honey 
            
我脑海里全都是你 
            
oh无法抗拒的心情 
            
难以呼吸
            
tonight 
            
是否又要错过一个夜晚
            
是否还要掩饰最后的期待 
            
oh tonight 
            
一万次悲伤 
            
依然会有意义
            
我一直在最温暖的地方等你
            
似乎只能这样停留一个方向
            
已不能改变
            
每一颗眼泪是遗忘的光 
            
最昏暗的地方也变得明亮
            
我奔涌的暖流寻找你的海洋 
            
我注定这样
            
oh honey 
            
你目光里充满忧郁 
            
就像经历一遍飞行难以逃避
            
tonight 
            
是否还要错过这个夜晚
            
是否还要熄灭所有的期待
            
tonight
            
一万次悲伤
            
依然会有意义
            
我一直在最后的地方等你
            
似乎只能这样
            
停留一个方向
            
已不能改变
            
每一颗眼泪是遗忘的光
            
最昏暗的地方也变得明亮
            
我奔涌的暖流寻找你的海洋
            
我注定这样
            
一万次悲伤 
            
依然会有意义
            
我一直在最后的地方等你
            
似乎只能这样
            
停留一个方向 
            
已不能改变
            
每一颗眼泪是遗忘的光
            
最昏暗的地方也变得明亮
            
我奔涌的暖流寻找你的海洋
            
我注定这样
            
oh honey 
            
我脑海里全都是你 
            
oh无法抗拒的心情 
            
难以呼吸
        
    
      

PS : 给每一句歌词都自定义两个属性，data-play属性为了计算什么时候显示该句歌词，它的属性值audio-t- “num” 是表示这句歌词在num秒的时候高亮显示； data-index为了计算什么时候歌词往上走，就按顺序定义就行。
以下是静态效果图：

Paste_Image.png

（效果图没有歌词是因为左滑才出现歌词）

左滑出现歌词

$('figure').on("swipeLeft" , function(){
    $('figure').css('display' , 'none');
    $('.lyric').css('display' , 'block').addClass("animated slideInRight");
})
$('.lyric').on("swipeRight" , function(){
    $('.lyric').css('display' , 'none');
    $('figure').css('display' , 'block').addClass("animated slideInLeft");
})

歌词出现：

Paste_Image.png

重点来了

function lyricPlay(){
    var timer2;
    var $cur = null;
    var $lrcbox = $(".lrc-list");
    $lrcwrap = $lrcbox.parent();
    clearInterval(timer2);
    timer2 = setInterval( function(){
        var time = Math.ceil( $('audio')[0].currentTime); //currentTime 是获取音乐实时播放时间
        $cur = $("audio-t-"+time).selector;//拿到自定义属性data-play
        $('p' , $lrcbox ).each(function(){ //循环拿到p
            var playT =  $(this).data('play');//当前播放元素属性值
                if( playT == $cur  ){ 
                   //给符合条件歌词加上高亮并删除兄弟元素的class名
                    $(this).stop().addClass('acitve').siblings().removeClass('acitve');
                }else{
                    return;
                }
            var index = $(this).data("index");    //当前元素下标
            var lineHeight =$(this).height() ;    //一行歌词高度
            var boxHeight = $lrcwrap.height(); //歌词显示区域高度
            var screensize = boxHeight / lineHeight; //一屏显示多少句歌词
            var half = Math.floor(screensize / 2);   //半屏歌词数量
            //当前歌词超过半屏
            if(index > half){
                //计算出超过的高度 减去 一行歌词的高度
                var top = (half - index) * lineHeight + lineHeight
                $lrcbox.css({
                    "top" : parseInt(top) + "px"
                });
            }
        })
    } , 1000)
}
lyricPlay();

效果如下：

Paste_Image.png

当然以上方法都只是我自己的想法，不足之处欢迎指点。。