VueMusic-10.播放-歌词加载

1.歌词新建组件

<template>
<div>
歌词{{this.$route.params.songid}}
<p class="lrc-p"
v-for="(item,key,index) in lrcData"
:key="index">
{{ item }}
</p>
</div>
</template>

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

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("\n");
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)
})
}
}
</script>

<style scoped>
</style>