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

前端之家收集整理的这篇文章主要介绍了利用jquery实现实时更新歌词的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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

布局

(歌词都是后台数据获取,方便理解我把所有歌词都一一列出来)

dio-t-0" data-index="0">逃跑计划

dio-t-1" data-index="1">一万次悲伤

dio-t-2" data-index="2">oh honey

dio-t-3" data-index="3">我脑海里全都是你

dio-t-8" data-index="4">oh无法抗拒的心情

dio-t-13" data-index="5">难以呼吸

dio-t-15" data-index="6">tonight

dio-t-17" data-index="7">是否又要错过一个夜晚

dio-t-23" data-index="8">是否还要掩饰最后的期待

dio-t-29" data-index="9">oh tonight

dio-t-30" data-index="10">一万次悲伤

dio-t-33" data-index="11">依然会有意义

dio-t-35" data-index="12">我一直在最温暖的地方等你

dio-t-40" data-index="13">似乎只能这样停留一个方向

dio-t-46" data-index="14">已不能改变

dio-t-51" data-index="15">每一颗眼泪是遗忘的光

dio-t-57" data-index="16">最昏暗的地方也变得明亮

dio-t-61" data-index="17">我奔涌的暖流寻找你的海洋

dio-t-67" data-index="18">我注定这样

dio-t-73" data-index="19">oh honey

dio-t-75" data-index="20">你目光里充满忧郁

dio-t-81" data-index="21">就像经历一遍飞行难以逃避

dio-t-87" data-index="22">tonight

dio-t-89" data-index="23">是否还要错过这个夜晚

dio-t-91" data-index="24">是否还要熄灭所有的期待

dio-t-95" data-index="25">tonight

dio-t-100" data-index="26">一万次悲伤

dio-t-102" data-index="27">依然会有意义

dio-t-106" data-index="28">我一直在最后的地方等你

dio-t-109" data-index="29">似乎只能这样

dio-t-114" data-index="30">停留一个方向

dio-t-120" data-index="31">已不能改变

dio-t-123" data-index="32">每一颗眼泪是遗忘的光

dio-t-130" data-index="33">最昏暗的地方也变得明亮

dio-t-135" data-index="34">我奔涌的暖流寻找你的海洋

dio-t-141" data-index="35">我注定这样

dio-t-155" data-index="36">一万次悲伤

dio-t-189" data-index="37">依然会有意义

dio-t-192" data-index="38">我一直在最后的地方等你

dio-t-197" data-index="39">似乎只能这样

dio-t-200" data-index="40">停留一个方向

dio-t-204" data-index="41">已不能改变

dio-t-208" data-index="42">每一颗眼泪是遗忘的光

dio-t-213" data-index="43">最昏暗的地方也变得明亮

dio-t-218" data-index="44">我奔涌的暖流寻找你的海洋

dio-t-225" data-index="45">我注定这样

dio-t-236" data-index="46">oh honey

dio-t-238" data-index="47">我脑海里全都是你

dio-t-243" data-index="48">oh无法抗拒的心情

dio-t-247" data-index="49">难以呼吸

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

以下是静态效果图:

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

左滑出现歌词

歌词出现:

重点来了

half){ //计算出超过的高度 减去 一行歌词的高度 var top = (half - index) * lineHeight + lineHeight $lrcBox.css({ "top" : parseInt(top) + "px" }); } }) },1000) } lyricPlay();

效果如下:

总结

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

猜你在找的jQuery相关文章