最近看了一篇关于音频可视化的博文，然后偶然联想到歌词滚动这个效果，虽然网上介绍歌词滚动 的文章已经很多了，但是并不是每一个人实现的思路都是一致的，所以在这给大家分享一下我自己的一些想法，和具体是如何实现这个功能的 。
一、处理歌词数据
原始歌词数据实际上不需要我们生成，实际上是一串带有时间和歌词的字符串，首先需要转换成数组对象方便使用。
使用网易云LRC滚动歌词就可以获取到自己想要的歌词，具体获取方法可以看上面链接
先声明formatLrc函数，用来处理原始各吃数据，通过split截取字符串，去掉换行符，或得新数组，循环新数组，按照']'截取，得到新数组格式 类似于['[01:42.000','没有你'] 很明显多了个 '['符号，使用substring()方法截取掉每一个 '['即可，保存所有处理后的数据，就是我们想要的数据格式啦，具体代码如下：
formatLrc() {
var strLrc = this.LRC.split("\n");//按换行截取字符串，去掉换行得到一个数组strLrc
let arr=[]//声明数组
for (var i = 0; i < strLrc.length; i++) {//循环strLrc
var str = strLrc[i];
var parts = str.split("]");//按照']'截取strLrc的每一项，得到新数组parts
var timeStr = parts[0].substring(1);//获取时间字符串
var obj = {
time: timeStr,
words: parts[1],
};
arr.push(obj)//每循环一次把obj添加到arr数组末尾
}
return arr;
},
通过以上处理得到一个新的数据 ，数据具体格式如下：
二、获取当前播放时间
音频播放控件有个事件 @timeupdate事件可以实时反馈当前播放进度信息，封装audioTime函数，具体代码如下：
audioTime(e) {
var time = e.target.currentTime; //当前播放器时间
for (var i = 0; i < this.lrcData.length; i++) {
if (time < this.lrcData[i].time) {
//循环歌词数组，当播放器当前时间第一次小于歌词时间时当前数组下标减一即为当前时间数组所对应歌词下标
this.dataWords = this.lrcData[i - 1].words;
//保存当前歌词动画执行事件
this.lrcTime = this.lrcData[i].time - this.lrcData[i - 1].time;
return i - 1;
}
}
},
具体页面布局我这里写的相对比较简单，主要只有一个播放控件
{ { dataWords }}
@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;
}
}
},
综上所述，即可得到一个简单的歌词和歌曲同步效果的歌词滚动！
以下是全部代码：
{ { dataWords }}
