vue实现歌词滚动_vue 实现一个歌词滚动效果

      this.lrcTime = this.lrcData[i].time - this.lrcData[i - 1].time;
      return i - 1;
    }
  }
},

> 
>     获取到当前播放时间之后，和歌词数组里的时间相互匹配，当播放器当前时间第一次小于歌词时间时当前数组下标减一即为当前时间数组所对应歌词下标。
> 
> 
> 


具体页面布局我这里写的相对比较简单，主要只有一个播放控件

> 
>  css定义动画，实现歌词颜色从左到右缓慢变化。
> 
> 
> 

@keyframes scan {
0% {
background-size: 0 100%;
}
100% {
background-size: 100% 100%;
}
}
.text {
background: #7e7e7e -webkit-linear-gradient(left, #76ca16, #0fa046) no-repeat 0
0;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
}
.load {
background-size: 100% 100%;
animation: scan linear;
}

    由于每一句歌词演唱时间不同，如果每一句歌词动画执行时间都相同的话，页面会很生硬，显得比较尴尬。我这里用了个笨办法，用下一句歌词的时间减去当前歌词的时间，得到的就是当前歌词演唱所需的时间，把歌词动画时间修改为当前获取的花时间，即可实现歌词和演唱时间同步的效果，具体代码如下：

audioTime(e) {
var time = e.target.currentTime; //当前播放器时间
for (var i = 0; i < this.lrcData.length; i++) {
if (time < this.lrcData[i].time) {
//循环歌词数组，当播放器当前时间第一次小于歌词时间时当前数组下标减一即为当前时间数组所对应歌词下标
this.lrcTime = this.lrcData[i].time - this.lrcData[i - 1].time;
this.dataWords = this.lrcData[i - 1].words;
return i - 1;
}
}
},

综上所述，即可得到一个简单的歌词和歌曲同步效果的歌词滚动！


以下是全部代码：

最后

---

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。