把后台接口穿过来的歌词数据进行处理

树852

于 2022-06-18 17:08:54 发布

阅读量157

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_63014292/article/details/125349290

版权

该博客主要介绍了如何将带有时间戳的歌词数据处理成键值对形式，便于歌曲播放时同步显示。通过正则表达式解析每句歌词的时间信息，并存储到对象中，实现了歌词与时间的对应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

处理效果

适用于把 [00:12.570]难以忘记初次见你 \n 的数据处理

变成 { 整秒：歌词}

mounted(){
      getSongText(this.id).then(res=>{
        console.log(res);
        // 对歌词进行改变
        // [00:12.570]难以忘记初次见你
        var lyrics   = res.data.lrc.lyric.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))
            var sec =Number(String(t.match(/\:\d*/i)).slice(1))
            var time = min * 60 +sec;
            lrcObj[time] = clause;
          }
        }
        this.lrcData  = lrcObj;
        console.log(lrcObj);
    })
  }