滚动歌词

把获取到的歌词用换行符 split 分割
使用正则判断并分割出时间和歌词
把正则匹配出的分、秒、毫秒转换成秒做 key 传入 temp 对象，或者 push 数组也可以，没有 key 的排序问题
通过 temp 遍历出 html 元素放入 content
监听 audio 的 [on]timeupdate 事件，关键字 e.target.currentTime 为当前播放时间
根据时间找到匹配的歌词元素，计算元素的 top 与父元素 top 的差，即为上滚的距离
滚动时给当前歌词元素加上 active class 使其突出

获取到的歌词可在 log 里查看

data.music = '歌词'; // 歌词在 log 自行复制
const temp = {};
const LRC = data.music;
const matchLrc = LRC.split(/\n/);
const reg = /\[(\d{2}):(\d{2})\.(\d{2})](.*)/;
   
   
for (let i = 0; i < matchLrc.length; i += 1) {
   const item = matchLrc[i];
   // exec 没有匹配返回 null
   const res = reg.exec(item);
   if (! reg) continue;
   const [_, m, s, ms, text] = res;
   // 将他们转成秒 毫秒也可以做秒的四舍五入操作
   // const key = (m * 60) + Math.round(s);
   // - 0 05 - 0 = 5
   // console.log((m * 60) + ((s + '.' + ms) - 0));
   const key = (m * 60) + (s - 0);
   temp[key] = text;
}
   
let html = '';

for (let time in temp) {
   html += `<p time=${time}>${temp[time]}</p>`
}

const lrcContent = document.querySelector('.lrc-content');

lrcContent.innerHTML = html;

const musicBtn = document.getElementById('musicBtn');
let index = -1;
musicBtn.ontimeupdate = e => {
   // 获取秒数 与 dom 元素对应
   // console.log(e.target.currentTime, 'time');
   const key = Math.floor(e.target.currentTime);
   if (! temp[key]) return;
   const p = lrcContent.querySelector(`p[time='${key}']`);
   // 此时的 p top值，大于 content，用 p - content 的 top 值，即为需要移动的距离
   const far = p.offsetTop - lrcContent.offsetTop;
   lrcContent.style.transform = `translate(-50%, -${far}px)`;
   p.classList.add('active');
   if (index > -1 && index !== key) lrcContent.querySelector(`p[time='${index}']`).classList.remove('active');
   index = key;
}