一、根据歌曲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;
}
}
}
}
