前言
最近自己写了个移动端音乐播放器，用了很多框架，也踩了很多坑，感觉比较复杂的就是计算歌词实时播放了，所以想着大概给整理了一下，分享出来，有问题的话朋友们可以指出，有需要的朋友们也可以学习学习。
布局
（歌词都是后台数据获取，方便理解我把所有歌词都一一列出来）
逃跑计划
一万次悲伤
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();
效果如下：
总结
以上就是这篇文章的全部内容了，当然以上方法都只是我自己的想法，如果不足之处欢迎大家指点，希望本文的内容对大家能有一定的帮助。
