vue.js解析lrc格式歌词文件

效果图如下：

1、布局部分
(1)、template部分

<div class="detail">
      <div class="song-title">
        <p ref="song">{{song}}</p>
        <p ref="singer">{{singer}}</p>
      </div>
      <div class="wrapper">
        <ul class="content">
        <li v-for="(item,index) of ms" :key=item.index>{{item.c}}</li>
      </ul>
      </div>
</div>

其中，song与singer采用eventBus全局数据传输获取，可参考vue使用eventBus实现数据传输
另外，歌词溢出部分可采用better-scroll来进行拉动查看，可参考vue.js使用better-scroll实现滚动

(2)、style部分

.detail
  position absolute
  top 1rem
  bottom 2.6rem
  left 0
  right 0
  text-align center
  color  #26a2ff 
  .song-title
    width 100%
    height 2rem
    // background-color #eeefff
    p
      width 100%
      line-height .8rem
      font-size 18px
      color #FFD700 
      margin-top .1rem
      text-align center
      // background-color #fff
  .wrapper
    overflow hidden
    position absolute
    top 2rem
    right 0
    left 0
    height 545px
    // background-color yellow
    ul
      line-height 32px
      width 100%
      padding-bottom 1rem
      // background-color red
      li
        font-size 16px
        transition-duration 1200ms
        // background-color skyblue

2、lrc歌词文件解析逻辑部分

data () {
    return {
      Lrc:'',
      ms: [],
      song:'',
      singer: '',
    }
  },
  
//this.Lrc是后端获取到的lrc格式的歌词文件
if(this.Lrc.length==0) return;
      // var lyricstxt = []; //存放歌词
      var lrcs = this.Lrc.split('\n');//用回车拆分成数组
      // console.log(lrcs)
      for(var i in lrcs) {//遍历歌词数组
          lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
          var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容
          var s = t.split(":");//分离:前后文字
          if(!isNaN(parseInt(s[0]))) { //是数值
              var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个
              var start = 0;
              for(var k in arr){
                  start += arr[k].length; //计算歌词位置
              }
              var content = lrcs[i].substring(start);//获取歌词内容
              for (var k in arr){
                  var t = arr[k].substring(1, arr[k].length-1);//取[]间的内容
                  var s = t.split(":");//分离:前后文字
                  this.ms.push({//对象{t:时间,c:歌词}加入ms数组
                  t: (parseFloat(s[0])*60+parseFloat(s[1])).toFixed(3),
                    c: content
                }); 
            }
        }
    }