前言

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

布局

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

<section>
 <figure>
 <img id="animat" src="/UploadFiles/2021-04-02/img3.jpg">

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

以下是静态效果图:

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

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

左滑出现歌词

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

歌词出现:

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

重点来了

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

效果如下:

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

总结

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

标签:
jquery实时更新,jquery实时进度条,jquery,ajax实时更新

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“利用jquery实现实时更新歌词的方法”

暂无“利用jquery实现实时更新歌词的方法”评论...