治疗技术焦虑的方法就是学习!

JS实现歌词同步滚动效果

前端 李新广 9689℃ 0评论

想要实现歌词与歌曲播放进度很简单,先来看一下从网易云音乐获取到的歌词的格式。

再看一下实现的效果:
http://qiniu.lxgandlz.cn/wp-content/uploads/2017/03/play.gif?watermark/1/image/aHR0cDovL2x4Z2FuZGx6LmNuL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE3LzAzLzIwMTcwMzE1MTM0MzM0MTAucG5n/dissolve/100/gravity/SouthEast/dx/10/dy/10

实现

先把获取到的歌词解析为对象数组。

(t.split(“:”)[0] * 60 + parseFloat(t.split(“:”)[1])).toFixed(3)这里是要把原来的mm:ss的时间格式改为秒。

然后定义一个方法,根据传入的行数,来实现将第几行高亮。

我们都知道,平时在使用播放器看歌词的时候,可能会把当前高亮的这行歌词滑出屏幕可视范围,所以这里也做了判断,如果当前高亮行不在高亮的基准线上,那么下一行高亮的时候就把它重新定会基准线位置。基准线位置根据窗口可视高度*fraction得到。其中,fraction由自己定义如:var fraction = 0.5;

然后需要做的就是把播放进度和歌词进行同步。

当点击了播放按钮后,监听audio的timeupdate事件,当播放位置改变时,获取歌曲当前播放到的时间,然后和当前高亮行的时间做比较,其中lineNo是一个全局变量,假设当前高亮行的行号为lineNo,当前播放到的时间为T,如果medisArray[lineNo].t <=T && T<= medisArray[lineNo + 1].t,那么行号为lineNo的这行歌词就需要高亮。

手机扫一下二维码看效果(点击图片显示歌词):

转载请注明:大道至简 » JS实现歌词同步滚动效果

喜欢 (19)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址