vue 歌词适配

1、显示当前播放歌词
	(1)将请求来的歌词资源中的时间点全存进数组里
	(2)配合循环指令,遍历请求来的资源,将当前播放资源的当前播放时间和资源中播放时间点
	做对比,如果当前播放时间大于等于请求资源中的时间点,并且小于下一个歌词的时间点,就播放

代码示例:
组件:

  },
  mounted(){
    const LRCUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.song.lry&songid="+this.songid;
    this.$axios.get(LRCUrl)
     .then(res => {
       this.lrc = res.data
       /*
        {
          123:"哪会怕有一天只你共我",
          222:"哪会怕有一天只你共我",
          423:"哪会怕有一天只你共我"
        }
       */
       // 数据格式处理
       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;
     })
     .catch(error => {
       console.log(error);
     })
  },
  computed:{
    getAllKey(){
      for(var i in this.lrcData){
        this.keyArr.push(i);
      }
    }
  },
  methods:{
    srcollLrc(key,index){
      const lrcDiv = this.$refs.lrc
       if( this.currentTime>=key && this.currentTime<this.keyArr[index+1]){
           lrcDiv.style.top = -((index-2)*30)+"px"
       }
    }
  }
}
</script>
<style scoped>

</style>