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


Posted in Javascript onJanuary 06, 2017

前言

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

布局

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

<section>
 <figure>
 <img id="animat" src="img/img3.jpg"/>
 </figure>
 <div class="lyric">
 <div class="lrc-list">
  <p data-play="audio-t-0" data-index="0">逃跑计划 </p>
  <p data-play="audio-t-1" data-index="1">一万次悲伤 </p>
  <p data-play="audio-t-2" data-index="2">oh honey </p>
  <p data-play="audio-t-3" data-index="3">我脑海里全都是你 </p>
  <p data-play="audio-t-8" data-index="4">oh无法抗拒的心情 </p>
  <p data-play="audio-t-13" data-index="5">难以呼吸</p>
  <p data-play="audio-t-15" data-index="6">tonight </p>
  <p data-play="audio-t-17" data-index="7">是否又要错过一个夜晚</p>
  <p data-play="audio-t-23" data-index="8">是否还要掩饰最后的期待 </p>
  <p data-play="audio-t-29" data-index="9">oh tonight </p>
  <p data-play="audio-t-30" data-index="10">一万次悲伤 </p>
  <p data-play="audio-t-33" data-index="11">依然会有意义</p>
  <p data-play="audio-t-35" data-index="12">我一直在最温暖的地方等你</p>
  <p data-play="audio-t-40" data-index="13">似乎只能这样停留一个方向</p>
  <p data-play="audio-t-46" data-index="14">已不能改变</p>
  <p data-play="audio-t-51" data-index="15">每一颗眼泪是遗忘的光 </p>
  <p data-play="audio-t-57" data-index="16">最昏暗的地方也变得明亮</p>
  <p data-play="audio-t-61" data-index="17">我奔涌的暖流寻找你的海洋 </p>
  <p data-play="audio-t-67" data-index="18">我注定这样</p>
  <p data-play="audio-t-73" data-index="19">oh honey </p>
  <p data-play="audio-t-75" data-index="20">你目光里充满忧郁 </p>
  <p data-play="audio-t-81" data-index="21">就像经历一遍飞行难以逃避</p>
  <p data-play="audio-t-87" data-index="22">tonight </p>
  <p data-play="audio-t-89" data-index="23">是否还要错过这个夜晚</p>
  <p data-play="audio-t-91" data-index="24">是否还要熄灭所有的期待</p>
  <p data-play="audio-t-95" data-index="25">tonight</p>
  <p data-play="audio-t-100" data-index="26">一万次悲伤</p>
  <p data-play="audio-t-102" data-index="27">依然会有意义</p>
  <p data-play="audio-t-106" data-index="28">我一直在最后的地方等你</p>
  <p data-play="audio-t-109" data-index="29">似乎只能这样</p>
  <p data-play="audio-t-114" data-index="30">停留一个方向</p>
  <p data-play="audio-t-120" data-index="31">已不能改变</p>
  <p data-play="audio-t-123" data-index="32">每一颗眼泪是遗忘的光</p>
  <p data-play="audio-t-130" data-index="33">最昏暗的地方也变得明亮</p>
  <p data-play="audio-t-135" data-index="34">我奔涌的暖流寻找你的海洋</p>
  <p data-play="audio-t-141" data-index="35">我注定这样</p>
  <p data-play="audio-t-155" data-index="36">一万次悲伤 </p>
  <p data-play="audio-t-189" data-index="37">依然会有意义</p>
  <p data-play="audio-t-192" data-index="38">我一直在最后的地方等你</p>
  <p data-play="audio-t-197" data-index="39">似乎只能这样</p>
  <p data-play="audio-t-200" data-index="40">停留一个方向 </p>
  <p data-play="audio-t-204" data-index="41">已不能改变</p>
  <p data-play="audio-t-208" data-index="42">每一颗眼泪是遗忘的光</p>
  <p data-play="audio-t-213" data-index="43">最昏暗的地方也变得明亮</p>
  <p data-play="audio-t-218" data-index="44">我奔涌的暖流寻找你的海洋</p>
  <p data-play="audio-t-225" data-index="45">我注定这样</p>
  <p data-play="audio-t-236" data-index="46">oh honey </p>
  <p data-play="audio-t-238" data-index="47">我脑海里全都是你 </p>
  <p data-play="audio-t-243" data-index="48">oh无法抗拒的心情 </p>
  <p data-play="audio-t-247" data-index="49">难以呼吸</p>
 </div>
 </div> 
</section>

注意 : 给每一句歌词都自定义两个属性,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实现实时更新歌词的方法

总结

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

Javascript 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
Express.JS使用详解
Jul 17 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 Javascript
Ajax 加载数据 练习代码
Jan 05 #Javascript
JavaScript中Math对象的方法介绍
Jan 05 #Javascript
微信小程序 Tab页切换更新数据
Jan 05 #Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 #Javascript
微信小程序 Template详解及简单实例
Jan 05 #Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 #Javascript
微信小程序 数组中的push与concat的区别
Jan 05 #Javascript
You might like
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
解析Python中的二进制位运算符
2015/05/13 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
pyenv命令管理多个Python版本
2017/03/26 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python求解正态分布置信区间教程
2019/11/20 Python
jupyter notebook 重装教程
2020/04/16 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
教师节商场活动方案
2014/02/13 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
食品安全承诺书范文
2014/08/29 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
安徽导游词
2015/02/12 职场文书
升学宴家长致辞
2015/07/27 职场文书
2019思想汇报范文
2019/05/21 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫