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

这篇文章主要给大家介绍了如何利用jquery实现实时更新歌词的方法,文中给出了详细的实现思路和示例代码，对大家的参考借鉴具有一定的价值，有需要的朋友下面来跟着小编一起学习学习吧。

前言

最近自己写了个移动端音乐播放器，用了很多框架，也踩了很多坑，感觉比较复杂的就是计算歌词实时播放了，所以想着大概给整理了一下，分享出来，有问题的话朋友们可以指出，有需要的朋友们也可以学习学习。

布局

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

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

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

以下是静态效果图：

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

左滑出现歌词

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

效果如下：