一、根据歌曲id获取歌词

// 定义一个歌词数组用于页面渲染
const lyricList = ref([]);
// 获取歌词方法
const getLyric = async () => {
  // 异步接口调用
  const res = await getLyricById(songId);
  // 歌词
  const lyric = res.data.lrc.lyric;
  // 将歌词字符串格式化后赋值给数据源
  lyricList.value = formatLyric(lyric);
};

从后台拿到歌词数据，默认是字符串格式像这样

[00:00.00]如愿 (电影《我和我的父辈》主题推广曲) - 王菲
[00:16.53]曲版权管理方：索尼音乐版权代理（北京）有限公司
[00:19.51]
[00:31.52]你是 遥遥的路
[00:34.34]
[00:35.09]山野大雾里的灯
[00:37.94]
[00:39.59]我是孩童啊 走在你的眼眸
[00:46.11]你是 明月清风
[00:48.79]
[00:49.62]我是你照拂的梦
[00:52.10]
[00:54.48]见与不见都一生 与你相拥
[01:00.46]而我将 爱你所爱的人间
[01:03.76]
[01:04.38]愿你所愿的笑颜
[01:07.80]你的手我蹒跚在牵

二、格式化歌词字符串为数据

/**
 * 将歌词字符串解析为歌词数组
 * @param {*} lyric 歌词字符串 如 ""
 * @returns array 如： [{ time: "31.52", words: "你是 遥遥的路" }]
 */
const formatLyric = (lyric) => {
  const lyricList = [];
  // 定义一个暂存变量接收日期字符串
  let timeStr = "";
  // 把歌词数组用换行符\n分割成数组
  lyric.split("\n").forEach((item) => {
    // 去除最后一行分割的空字符串
    if (item === "") return;
    // item 如 "[00:31.52]你是 遥遥的路"
    // parts 如 ["[00:31.52","你是 遥遥的路"]
    const parts = item.split("]");
    // timeStr 如 00:31.52
    timeStr = parts[0].slice(1);
    // 空歌词不要
    if (parts[1] !== " " && parts[1] !== "") {
      lyricList.push({
        time: parseTime(timeStr),
        words: parts[1],
        // 人造id
        uid: Math.random().toString().slice(-6),
      });
    }
  });
  return lyricList;
};
/**
 * 将时间字符串解析为秒
 * @param {*} timeStr 时间字符串
 * @returns 秒
 */
const parseTime = (timeStr) => {
  const parts = timeStr.split(":");
  return +parts[0] * 60 + +parts[1];
};

lyricList这就是最终生成的数组格式是这样的：

image.png

三、循环lyricList数据渲染歌词dom

注意这里绑定了3个ref节点下面要用到
lyricWarp lyricUl lyricLi

<!-- 歌词滚动包裹盒子 -->
<div class="m-song-scroll" ref="lyricWarp">
  <!-- 歌词内容体 -->
  <div class="m-song-iner" ref="lyricUl">
    <!-- 每一条歌词item -->
    <div
      ref="lyricLi"
      class="m-song-lritem"
      v-for="(item, index) in lyricList"
      :key="item.uid"
      :class="{ activeLyric: lyricIndex === index }"
    >
      <span class="m-song-lrori">{{ item.words }}</span>
    </div>
  </div>
</div>

四、音频控件

为audio标签绑定timeupdate事件获取实时播放时间

<!-- 播放器 -->
<audio :src="songUrl" @timeupdate="audioTime" @ended="audioEnded" controls></audio>

五、歌词滚动

lyricWarp.value.offsetHeight / 2获取歌词视口高度的一般
lyricLi.value[0].offsetHeight获取每条歌词的的高度
总偏移量就等于lyricWarp.value.offsetHeight / 2 - lyricLi.value[0].offsetHeight * (i + 1)

// 歌词的包裹容器dom
const lyricWarp = ref(null);
// 歌词内容体dom
const lyricUl = ref(null);
// 每一条歌词的dom
const lyricLi = ref(null);
// 当前激活的歌词索引
const lyricIndex = ref(0);
// 当前播放时间
let currentTime = "";
// 音频播放时间更新的事件
const audioTime = (e) => {
  // 当前播放的时间
  currentTime = e.target.currentTime;
  for (let i = 0; i < lyricList.value.length; i++) {
    // 如果播放时间大于当前歌曲条目的时间
    if (currentTime > lyricList.value[i].time) {
      // 赋值激活选项
      lyricIndex.value = i;
      // 歌词内容体dom通过transform:translateY实现歌词滚动
      console.log(lyricWarp.value.offsetHeight, lyricLi.value[0].offsetHeight);
      const translateY =
        lyricWarp.value.offsetHeight / 2 -
        lyricLi.value[0].offsetHeight * (i + 1);
      lyricUl.value.style.transform = `translateY(${translateY}px)`;
    }
  }
};

附：歌词样式

// 歌词样式
// 歌词视口样式定高50px
.m-song-scroll {
  height: 70px;
  text-align: center;
  color: hsla(0, 0%, 100%, 0.6);
  overflow: hidden;
  -webkit-mask: -webkit-linear-gradient(
    top,
    #000,
    #000 70%,
    rgba(0, 0, 0, 0)
  );
  // 歌词内容体
  .m-song-iner {
    transition: transform 0.3s ease-out;
    // 每条歌词样式
    .m-song-lritem {
      box-sizing: border-box;
      .m-song-lrori {
        display: block;
        font-size: 13px;
        height: 25px; // 需要定死高度--好计算
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: PingFangSC-Regular;
      }
    }
    // 激活歌词样式
    .m-song-lritem.activeLyric {
      .m-song-lrori {
        color: #fefefe;
        font-size: 15px;
      }
    }
  }
}