- 请求回来的歌词文件是下面的形式
‘[00:00.000] 作词 : 林夕↵[00:01.000] 作曲 : Robert Lay↵[00:14.310]如果 兄妹相称太多↵[00:19.610]醒不起喜欢我’
- 1 先处理歌词
// 处理歌词,转化成key为时间,value为歌词的对象
let lyricArr = data.lrc.lyric.split('[').slice(1); // 先以[进行分割
let lrcObj = {};
lyricArr.forEach(item => {
let arr = item.split(']'); // 再分割右括号
// 时间换算成秒
let m = parseInt(arr[0].split(':')[0])
let s = parseInt(arr[0].split(':')[1])
arr[0] = m*60 + s;
if (arr[1] != '\n') { // 去除歌词中的换行符
lrcObj[arr[0]] = arr[1];
}
})
// 存储数据
this.currentMUsicLyric = lrcObj;
})
处理后的歌词
- 2 循环渲染
// lyricIndex为当前歌曲播放的进度在歌词中的位置,进而改变正在播放的歌词的样式
<ul class="lyric" v-show="isShowMusicList" ref="lyric">
<li :class="{each:true, choose: (index==lyricIndex)}" v-for="(item, key, index) in currentMUsicLyric" :key="key">{{item}}</li>
</ul>
- 3 scss
.lyric {
width: 400px;
height: 300px;
position: absolute;
top: -312px;
left: 774px;
background-color: #333;
// 滚动条
overflow: auto;
color: #ddd;
font-size: 10px;
font-weight: normal;
padding: 5px 10px;
border: 1px solid #000;
border-left: none;
.each {
height: 30px;
// border: 1px solid #000;
line-height: 30px;
text-align: center;
}
.choose {
height: 30px;
line-height: 30px;
font-size: 20px;
}
// 修改滚动条样式
&::-webkit-scrollbar {
width: 3px;
height: 1px;
}
// 滑块部分
&::-webkit-scrollbar-thumb {
background-color: #eee;
}
// 轨道部分
&::-webkit-scrollbar-track {
background-color: #333;
}
}
- 4 js
// 使用watch监听当前歌曲进度value的变化处理歌词位置
value() {
let i = 0
// 循环歌词对象
for (let key in this.currentMUsicLyric) {
// key表示歌词对象中的时间,如果key等于歌曲进度value,改变当前歌词进度 lyricIndex
if (+key == this.value) {
this.lyricIndex = i;
// 当歌词进度大于5,即播放到了第5句歌词,开始滚动
if (i > 5) {
this.$refs.lyric.scrollTop = 30 * (i - 5);
}
}
i++;
}
}
效果展示