vue 移动端歌词实时滚动及优化

在做移动端酷我音乐的时候，发现歌词随着音乐滚动是一个小难点，说难也不难，但是说简单的话也不简单。大家请求歌词返回的类型可能不太一样，但是判断逻辑都是一样的。

左边是我的歌曲详情页面，右边的是我的歌词请求数据的形式，时间和歌词是一一对应的。

先盘下让歌词实时滚动的逻辑：

（下文为了便于区分两个时间参数，用newTime来表示实时获取的歌词时间，lrcTime表示请求数据中歌词的时间）

1、获取当前歌词播放的时间

2、让newTime与lrcTime相比较，当newTime>lrcTime时，让lrcTime的歌词展示在展示区域中

先来说说第一个，调用audio自带的方法：timeupdate来实时获取歌词

this.$refs.lrc是获取audio的标签 

dom操作：在audio标签中添加 ref=”自定义名字“，js中用“this.$refs.自定义名字”  进行获取当前的dom节点

使用audio便签的方法timeupdate来获取当前newTime

第二个

让歌词如何实时滚动，就上唱完的歌词往上走，未唱的歌词往上顶。

给渲染歌词列表的ul添加一个相对定位，给每一行歌词设置一个高度，当这一句歌词唱完之后，ul整体向上平移一行歌词的高度，这样就实现的歌词的滚动

用过  timeupdate  这个方法的都知道，它会一直进行返回歌曲时间，一秒之内返回4次往上，显然这个值用来执行for循环比较，因为这样的话，会在一秒之内执行4次循环，对浏览器的负担很大。

将它返回的所有值放到一个新的数组中，将重复的数值去掉，然后用watch方法来监听这个新数组长度的变化，如果新数组的长度大于老数组的长度，就说明timeupdata监听的值发生了变化，我们在将歌词循环，让newTime和lrcTime进行比较，如果newTime大于了lrcTime，便让ul向上一行歌词的长度，并且给歌词添加颜色。

这样就实现的移动端歌词的实时滚动。