jquery实时更新歌词的方法

序

最近写了一个手机音乐播放器，用了很多帧，踩了很多坑。计算歌词并实时播放感觉很复杂，于是就想着整理出来分享一下。如果有问题，朋友们可以指出，有需要的人也可以学习。

总体布局

(歌词全部来源于背景资料，方便理解。我已经一一列出了所有的歌词)

剖面图img id=' animate ' src=' http : img/img 3。jpg //figure div class=' lyric ' div class=' LRC-列表' p data-play=' audio-t-0 ' data-index=' 0 '逃跑计划/p p数据-播放='音频-t-1 '数据-索引='1 '一万次悲伤/p p数据-播放='audio-t-2 '数据-索引='2 '哦亲爱的/p p数据-播放='audio-t-3 '数据-索引='3 '我脑海里全都是你/p p数据-播放='audio-t-8 '数据-索引='4 '哦无法抗拒的心情/p p数据-播放='audio-t-13 '数据-索引='5 '难以呼吸/p p数据-播放='audio-t-15 '数据-索引='6 '今晚/p p数据-播放='audio-t-17 '数据-索引='7 '是否又要错过一个夜晚/p p数据-播放='audio-t-23 '数据-索引='8 '是否还要掩饰最后的期待/p p数据-播放='audio-t-29 '数据-索引='9 '哦今晚/p p数据-播放='audio-t-30 '数据-索引='10 '一万次悲伤/p p数据-播放='audio-t-33 '数据-索引='11 '依然会有意义/p p数据-播放='audio-t-35 '数据-索引='12 '我一直在最温暖的地方等你/p p数据-播放='audio-t-40 '数据-索引='13 '似乎只能这样停留一个方向/p p数据-播放='audio-t-46 '数据-索引='14 '已不能改变/p p数据-播放='audio-t-51 '数据-索引='15 '每一颗眼泪是遗忘的光/p p数据-播放='audio-t-57 '数据-索引='16 '最昏暗的地方也变得明亮/p p数据-播放='audio-t-61 '数据-索引='17 '我奔涌的暖流寻找你的海洋/p p数据-播放='audio-t-67 '数据-索引='18 '我注定这样/p p数据-播放='audio-t-73 '数据-索引='19 '哦亲爱的/p p数据播放='audio-t-75 '数据索引='20 '你目光里充满忧郁/p p数据-播放='audio-t-81 '数据-索引='21 '就像经历一遍飞行难以逃避/p p数据-播放='audio-t-87 '数据-索引='22 '今晚/p p数据-播放='audio-t-89 '数据-索引='23 '是否还要错过这个夜晚/p p数据-播放='audio-t-91 '数据-索引='24 '是否还要熄灭所有的期待/p p数据-播放='audio-t-95 '数据-索引='25 '今晚/p p数据-播放='audio-t-100 '数据-索引='26 '一万次悲伤/p p数据-播放='audio-t-102 '数据-索引='27 '依然会有意义/p p数据-播放='audio-t-106 '数据-索引='28 '我一直在最后的地方等你/p p数据-播放='audio-t-109 '数据-索引='29 '似乎只能这样/p p数据-播放='audio-t-114 '数据-索引='30 '停留一个方向/p p数据-播放='audio-t-120 '数据-索引='31 '已不能改变/p p数据-播放='audio-t-123 '数据-索引='32 '每一颗眼泪是遗忘的光/p p数据-播放='audio-t-130 '数据-索引='33 '最昏暗的地方也变得明亮/p p数据-播放='audio-t-135 '数据-索引='34 '我奔涌的暖流寻找你的海洋/p p数据-播放='audio-t-141 '数据-索引='35 '我注定这样/p p数据-播放='audio-t-155 '数据-索引='36 '一万次悲伤/p p数据-播放='audio-t-189 '数据-索引='37 '依然会有意义/p p数据-播放='audio-t-192 '数据-索引='38 '我一直在最后的地方等你/p p数据-播放='audio-t-197 '数据-索引='39 '似乎只能这样/p p数据-播放='audio-t-200 '数据-索引='40 '停留一个方向/p p数据-播放='audio-t-204 '数据-索引='41 '已不能改变/p p数据-播放='audio-t-208 '数据-索引='42 '每一颗眼泪是遗忘的光/p p数据-播放='audio-t-213 '数据-索引='43 '最昏暗的地方也变得明亮/p p数据-播放='audio-t-218 '数据-索引='44 '我奔涌的暖流寻找你的海洋/p p数据-播放='audio-t-225 '数据-索引='45 '我注定这样/p p数据-播放='audio-t-236 '数据-索引='46 '哦亲爱的/p p数据-播放='audio-t-238 '数据-索引='47 '我脑海里全都是你/p p数据-播放='audio-t-243 '数据-索引='48 '哦无法抗拒的心情/p p数据-播放='audio-t-247 '数据-索引='49 '难以呼吸/p/div/部门注意： 给每一句歌词都自定义两个属性数据播放属性为了计算什么时候显示该句歌词，它的属性值音频-t-。数字"是表示这句歌词在数字秒的时候高亮显示； 数据索引为了计算什么时候歌词往上走，就按顺序定义就行。

以下是静态效果图：

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

左滑出现歌词

$('图')。on('swipeLeft '，function(){ $('figure ')).css('display '，' none ')；$('.抒情')。css('显示'，'块').addClass(')动画幻灯片');})$('.抒情')。开启(' swipeRight '，函数(){ $(')。抒情')。css('display '，' none ')；$('图')。css('显示'，'块').addClass(')动画幻灯片');})歌词出现：

重点来了

函数lyricPlay(){ var timer 2；var $ cur=nullvar $lrcbox=$(' .LRC-李斯特')；$ LRC包装=$ LRC盒。parent()；clearInterval(定时器2);定时器2=设置间隔(函数(){ var time=math。ceil($(“音频”)[0]).当前时间)；//Currettime是获取音乐实时播放时间$ cur=$(' audio-t-time ').选择器；//拿到自定义属性数据播放$('p '，$lrcbox).每个（函数(){ //循环拿到p var playT=$(this).数据("播放");//当前播放元素属性值if(playT==$cur ){ //给符合条件歌词加上高亮并删除兄弟元素的班级名$(这个)。停止()。addClass('acitve ').兄弟姐妹()。移除CLaSS(' acitve ')；} else { return} var index=$(this).数据('索引');//当前元素下标var lineHeight=$(this).高度();//一行歌词高度var BoxHeight=$ LRC包装。高度()；//歌词显示区域高度var screensize=框高/行高；//一屏显示多少句歌词var half=Math.floor(屏幕大小/2);//半屏歌词数量//当前歌词超过半屏如果(索引一半){ //计算出超过的高度减去一行歌词的高度var top=(半索引)*行高行高$ LRC盒。CSS({ ' top ' : Parsent(top)' px ' })；} }) }，1000)} lyricPlay()；效果如下：

总结

以上就是这篇文章的全部内容了，当然以上方法都只是我自己的想法，如果不足之处欢迎大家指点，希望本文的内容对大家能有一定的帮助。