利用jquery实现实时更新歌词的方法

 

 
 
 

 

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

$('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");
})

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();