vue实现歌词与播放时间同步

引言
作为音乐播放器没有歌词怎么行！
实现结果如下：

在上一篇博文中我们已经讲了如何将从后台返回的歌词解析为我们所需要的格式，那么本篇的目的就是将这些歌词渲染到屏幕上并实现动态滚动效果。

1.先将歌词渲染到页面

<ul>
  <li
    v-for="(item, index) in lyric"
    :key="index"
  >
    {
  { item.str }}
  </li>
</ul>

lyric为解析好的歌词。
2.接着给他加上一点点细节css

ul {
   
        margin-top: 50px;
        margin-bottom: 50px;
        li {
   
          margin: 5px;
          height: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        :nth-child(-n + 3)