VueMusic-10.播放-歌词加载

Posted 2022-09-14 xiao-peng-ji

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>