利用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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
vue中keep-alive内置组件缓存的实例代码
Apr 16 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python ftp上传文件
2016/02/13 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
python request 模块详细介绍
2020/11/10 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
党校自我鉴定范文
2013/10/02 职场文书
学校办公室主任职责
2013/12/27 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
python井字棋游戏实现人机对战
2022/04/28 Python
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技