前言
最近自己写了个移动端音乐播放器,用了很多框架,也踩了很多坑,感觉比较复杂的就是计算歌词实时播放了,所以想着大概给整理了一下,分享出来,有问题的话朋友们可以指出,有需要的朋友们也可以学习学习。
布局
(歌词都是后台数据获取,方便理解我把所有歌词都一一列出来)
<section> <figure> <img id="animat" src="/UploadFiles/2021-04-02/img3.jpg">注意 : 给每一句歌词都自定义两个属性,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();效果如下:
总结
以上就是这篇文章的全部内容了,当然以上方法都只是我自己的想法,如果不足之处欢迎大家指点,希望本文的内容对大家能有一定的帮助。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]