Vue3-歌词根据时间自动滚动

创建结构，给合适的样式

<div class="lyric" v-show="isLyric" @click="isLyric = !isLyric" ref="playLrc">
    <div class="scroll-lrc">
        <p
            :class="{ active: getStateFn(item.time, item.pre) }"
            v-for="(item, index) in $store.getters.listLyric"
            :key="index"
        >{{ item.content }}</p>
    </div>
</div>

.lyric {
    width: 7.5rem;
    height: 7.1rem;
    position: relative;
    left: 0;
    top: 3rem;
    z-index: 10000;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: scroll;
    padding: 0.2rem 0 0.4rem;
    .scroll-lrc {
        width: 7.1rem;
        position: absolute;
        left: calc(50% - 3.55rem);
        top: 1.5rem;
        overflow: hidden;
        p {
            width: 7.5rem;
            text-align: center;
            color: #fff;
        }
        p.active {
            color: #ff0000;
        }
    }
}

通过接口能够获取到的歌词大致如下

[00:01.930]词：周仁
[00:02.890]曲：张博文
[00:03.900]OP：腾煌星象
[00:03.900]出品：网易飓风工作室
[00:13.210]
[00:15.200]填不满半排观众的电影
[00:18.820]直到散场时突然亮起灯
[00:22.730]字幕定格在某某出品和发行
[00:26.000]我目送 他们行色匆匆
[00:29.580]像个自不量力的复读生
[00:33.150]完不成金榜题名的使命
[00:36.980]命不是猜剪刀石头布的决定
[00:40.730]那么任性
[00:44.220]我吹过你吹过的晚风
[00:47.820]那我们算不算 相拥
[00:51.430]可如梦初醒般的两手空空
[00:55.040]心也空
[00:58.600]我吹过你吹过的晚风
[01:02.200]是否看过同样 风景
[01:05.799]像扰乱时差留在错位时空
[01:09.370]终是空 是空
[01:30.580]数不完见证许愿的繁星
[01:34.010]没灵验谁来安慰坏心情
[01:37.930]十字路口闪烁不停的信号灯
[01:41.190]有个人 显然心事重重
[01:44.810]三个字 只能说给自己听
[01:48.340]仰着头不要让眼泪失控
[01:52.200]哪里有可以峰回路转的宿命
[01:55.920]我不想听
[01:59.500]我吹过你吹过的晚风
[02:03.060]那我们算不算 相拥
[02:06.700]可如梦初醒般的两手空空
[02:10.259]心也空
[02:13.629]我吹过你吹过的晚风
[02:17.430]是否看过同样 风景
[02:21.060]像扰乱时差留在错位时空
[02:24.539]终是空 是空
[02:31.800]我吹过你吹过的晚风
[02:35.349]空气里弥漫着 心痛
[02:38.930]可我们 最后 在这错位时空
[02:42.599]终成空
[02:46.150]我吹过你吹过的晚风
[02:49.650]空气里弥漫着 心痛
[02:53.250]可我们 最后 在这错位时空
[02:56.830]终成空 成空
[03:02.210]
[03:03.210]编曲：陈林
[03:04.210]分轨混音：Mr.鱼
[03:05.210]制作人：艾辰
[03:06.210]贝斯：谭玮
[03:07.210]吉他：望雷
[03:08.210]监制/统筹：孙斌@子文沐凡
[03:09.210]贴唱/和声：沙栩帆
[03:11.210]企划：丁柏昕/袁晓童
[03:12.210]宣发：徐思灵/苏琦惠
[03:13.210]出品人：谢奇笛/凌联兴
[03:14.210]本歌曲来自〖飓风计划〗
[03:15.210]10亿现金激励，千亿流量扶持！
[03:16.210]业务联系：jf399@vip.163.com

JS处理字符串，DOM，使得歌词滚动起来

在vue的store的getter里处理歌词，分别换行、去除空行、分割内容、时分秒

listLyric(state) {
  if (state.lyric == null) {
    return
  }
  // 换行
  let arr1 = state.lyric.split(/\n/);
  // 去空行
  let arr2 = arr1.filter((item, index) => {
    if (item == null || item == "") {
      return false
    } else {
      return true
    }
  })
  // 分隔 内容 时分秒
  let arr3 = arr2.map((item, index) => {
    let min = parseInt(item.slice(1, 3))
    let sec = parseInt(item.slice(4, 6))
    let mil = parseInt(item.slice(7, 10))
    let time = min * 60 * 1000 + sec * 1000 + mil
    let content = item.slice(11, item.length)
    return {
      content: content,
      min: min,
      sec: sec,
      mil: mil,
      time: time,
      item: item
    }
  })
  // 加入pre属性，为了判断当前歌词到哪一句了
  arr3.forEach((item, i) => {
    if (i == 0) {
      item.pre = 0;
    } else {
      item.pre = arr3[i - 1].time;
    }
  })
  
  // ES6扩展运算符...克隆数组
  let arr4 = [...arr3];
  // 时间全部往后移动一格
  arr4.forEach((item, i) => {
    item.pre = item.time
    if (i + 1 > arr4.length - 1) {
      item.time = arr4[i].time
    } else {
      item.time = arr4[i + 1].time
    }
  })
  return arr4;
}

歌词处理完毕

引用歌词，并实现滚动

// 歌词处于上一句结束且当前为结束时，返回true
getStateFn(nowTime, preTime) {
    return this.currentTime * 1000 < nowTime && this.currentTime * 1000 > preTime;
},

仅当歌词处于上一句结束且当前为结束时，给active属性

<p
    :class="{ active: getStateFn(item.time, item.pre) }"
    v-for="(item, index) in $store.getters.listLyric"
    :key="index"
>{{ item.content }}</p>

当dom属性为active，给高亮展示

p.active {
    color: #ff0000;
}

效果图