1 .获取歌词(字符串格式)调用界面，从后台获取歌词数据。 默认值类似于字符串格式
let lyric=' [by:小花痴外套stad] [00:02.689]想回到那个夏天[00:05.939]蝉鸣在田边吹过眼前[00:09.948]执着于夏夜的星空初夏的味道是你的笑容[00:20.343]我有月亮没问题'2.分析歌词获取时间和歌词存储在对象数组中获取2.1每行歌词，我们可以用正则匹配换行符分割字符串
constregnewline=/ n/constlinearr=lyric.split (reg newline ) /每行歌词的排列这就得到了每行歌词的排列
2.2分隔的时间和歌词这里把大括号中的时间正则一致
const regtime=/ [d {2} :d {2}. d { 2，3 }] /用导线测量分隔linearr数组
linearr.foreach (item={ if (item==' ' ) ) returnconstobj={ } const time=item.match ) regtime ) obj.lyric=iric this.formatlyrictime (time [0].slice ) 1，time[0].length - 1 () : 0 obj.uid=Math.random ().toString )
这里有用于转换时间的函数formatLyricTime代码
formatlyrictime(time ) /格式化歌词的时间为SSS : msconstregmin=/. * :/constregsec=/:*./constr egms=/./const min=parseint (time.match (reg min ) )0).slice (0，2 ) ) letsec=parseint (time.match ) regsec) )==0(sec=min*60 )返回编号(sec'.'ms ) } 这里需要注意的是 时间获取出来是包含中括号的，要用slice截取一下，并且要转成（秒.毫秒 88.9）格式 这样才方便与audio的currentTime进行对比 有些时间后面没有歌词，所以我们要把这一行给去掉 所有就有代码下面的if判断
lyricsobjarr : [ { time :34.5，lyric: '爱上你必须是我的心情'，uid: '234432'}，{time: 64.5，lyricsobjarr
ul ref='lyricUL' li v-for='(item，I ) inlyricsobjarr ' 3360 style=' { color 3360 lyric index==I？ } sky blue ' : ' # ded9d9' } ' : key=' item.uid ' :数据索引=' I ' ref=' lyric ' { { item.lyric } } /
循环lyricsObjArr这就是最终生成的数组了格式是这样的：数组获取时间，与lyricsObjArr比较，如果3358www.Sina.com/大于歌词时间，则为当前http://www.Sina.com 将获取标签3358www.Sina的值与循环的currentTime进行比较，如果相同，则更新data内的currentTime的值，然后绑定颜色，同时外部ul标签的交叉具体代码如下
//配合歌词for (leti=0； i this.lyricsObjArr.length； I () if ) this.currenttime(parseint ) this.lyricsobjarr[I].time ) ) constindex=this.$refs.lyric[I].)。 { this.lyric index=I this.$ refs.lyric ul.style.transform=` translate y ($ { 170-(30 * (i1 ) }px ) ` }}5