按照惯例，先上效果图：

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

<audio ref="player" autoplay ></audio>

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

(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
      .lineHigh
        color #FFD700

2、逻辑部分

data () {
    return {
      lineNo: 0,
      Cpos: 7,
      offset: -32,
      ms: [],
    }
  },
  
  mounted () {
    const music = this.$refs.player  // 音频所在对象
    const ulist = this.$refs.ul
    const curTime = music.currentTime; // 歌词滚动时间
    
    music.addEventListener('timeupdate', () => {
      if(this.lineNo==this.ms.length)
      return;
      const curTime = music.currentTime; //播放器时间
      if(parseFloat(this.ms[this.lineNo].t) <= curTime){
        this.lineHigh();//高亮当前行
        this.lineNo++;
      }
    })
    
    music.addEventListener('ended', () => {
        this.goback(); //回滚歌词
        music.play()
    })
    
}
    
methods: {
    // 高亮歌词滚动事件
    lineHigh() {
      const ulist = this.$refs.ul
      const list = ulist.getElementsByTagName("li");
      if(this.lineNo>0){
        list[this.lineNo-1].removeAttribute("class");//去掉上一行的高亮样式
      }
      list[this.lineNo].className = "lineHigh";//高亮显示当前行
    
      //文字滚动
      if(this.lineNo > this.Cpos){
        ulist.style.transform = "translateY("+(this.lineNo-this.Cpos)*this.offset+"px)"; //整体向上滚动一行高度
      }
    },
    
    // 重新播放是歌词重置事件
    goback() {
      const ulist = this.$refs.ul
      document.querySelector(".lineHigh").removeAttribute("class");
      ulist.style.transform = "translateY(0)";
      this.lineNo = 0; //lineNo清零，重新播放
    },

}

可参考用JS实现歌词与播放音乐同步