ajax实时更新歌,利用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();

效果如下：

总结

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