歌词滚动效果

html

<style>
  .container ul {
    transition: 0.2s translateY(-100px);
  }
  .container ul li {
    color: #000;
    transition: 0.2s;
  }
  .container ul li.active {
    color: #f00;
    transform: scale(1.2);
  }
</style>
<!-- audio -->
<audio src="./assets/music.mp3" controls></audio>
<div class="container">
  <ul class="lrc-list">
    <!-- 动态生成 -->
    <li class="active">歌名</li>
    <li>歌手</li>
    <li></li>
    <li>歌词...</li>
  </ul>
</div>
<script src="lrc.js"></script>
<script>
  // 1.解析歌词字符串，得到一个歌词数组[{time: number, word: string}]
    const parseLrc = () => {
        let list = lrcList.split('\n').map(item => {
            let parts = item.split(']');
            let ts = parts[0].substring(1).split(':');

            return {
                timer: +(ts[0])*60 + +ts[1];
                word: parts[1];
            }
        })
    }
  // 3. 动态生成歌词元素
  function create(list = list){
      // 2.获取播放器进度，计算当前高亮的歌词
      let currentTime = document.querySelector('audio').currentTime;
      let currentLrcIndex = list.findLastIndex(item => item.timer < currentTIme);
    list.forEach((item, index) => {
        var li = document.createElement('li');
        li.textContent = item.word;
        li.className = "";
        if(currentLrcIndex == index) li.className = 'active';
        document.querySelector('ul').appendChild(li);
    })
    render(currentLrcIndex);
  }
  // 4. 动态滚动歌词容器
  function render(index){
    let offset = liHeight * index + liHeight / 2 - ulHeight / 2;
    let maxOffset = document.querySelector('ul').clientHeight;
    if(offset < 0) offset = 0;
    if(offset > maxOffset) offset = maxOffset;
    document.querySelector('ul').style.transform = `translateY(-${offset}px)`
  }
  // 5. 监听播放器时间更新
  document.querySelector('audio').addListenEvent('timeUpdate', create);
</script>

// 歌词字符串
var lrcList = `
    [00:01.06]难念的经
    [00:03.95]演唱：周华健
    [00:06.78]
    [00:07.31]笑你我枉花光心计
    [00:09.16]爱竞逐镜花那美丽
    [00:11.87]怕幸运会转眼远逝
`;

歌词滚动效果 ​

歌词滚动效果