VueMusic-11播放-歌词适配

1.歌词的创建

<template>
<div>
歌词{{this.$route.params.songid}}
{{getAllKey}}
<p class="lrc-p" v-show="(parseInt(currentTime) >= keyArr[index]) && (parseInt(currentTime) < keyArr[index+1])"
v-for="(item,key,index) in lrcData"
:key="index">
{{ item }}
</p>
</div>
</template>

<script>
export default {
name: "LRC",
data() {
return {
lrc:{},
lrcData:{},
durationTime:0,
currentTime:0,
keyArr:[]
}
},
props: {
songid: {
type: [String, Number],
default: ""
},
durationTime:{
type: [String, Number],
default: 0
},
currentTime:{
type: [String, Number],
default: 0
}
},

mounted() {
const LRCUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.song.lry&songid=" + this.songid;
this.$axios.get(LRCUrl).then(res=> {
console.log(res.data)
this.lrc=res.data;
// 数据格式处理
var lyrics = res.data.lrcContent.split(" ");
var lrcObj = {};
for(var i = 0 ;i<lyrics.length;i++){
var lyric = decodeURIComponent(lyrics[i]);
var timeReg = /[d*:d*((.|:)d*)*]/g;
var timeRegExpArr = lyric.match(timeReg);
if(!timeRegExpArr)continue;
var clause = lyric.replace(timeReg,'');
for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
var t = timeRegExpArr[k];
var min = Number(String(t.match(/[d*/i)).slice(1)),
sec = Number(String(t.match(/:d*/i)).slice(1));
var time = min * 60 + sec;
lrcObj[time] = clause;
}
}
this.lrcData = lrcObj;
console.log( this.lrcData )

}).catch(error=>{
console.log(error)
})
},
computed:{
getAllKey(){
for(var i in this.lrcData){
this.keyArr.push(i);
}
}
}
}
</script>

<style scoped>
</style>