一疆拘、根據(jù)歌曲id獲取歌詞
// 定義一個(gè)歌詞數(shù)組用于頁(yè)面渲染
const lyricList = ref([]);
// 獲取歌詞方法
const getLyric = async () => {
// 異步接口調(diào)用
const res = await getLyricById(songId);
// 歌詞
const lyric = res.data.lrc.lyric;
// 將歌詞字符串格式化后賦值給數(shù)據(jù)源
lyricList.value = formatLyric(lyric);
};
從后臺(tái)拿到歌詞數(shù)據(jù)著蛙，默認(rèn)是字符串格式像這樣
[00:00.00]如愿 (電影《我和我的父輩》主題推廣曲) - 王菲
[00:16.53]曲版權(quán)管理方：索尼音樂(lè)版權(quán)代理（北京）有限公司
[00:19.51]
[00:31.52]你是 遙遙的路
[00:34.34]
[00:35.09]山野大霧里的燈
[00:37.94]
[00:39.59]我是孩童啊 走在你的眼眸
[00:46.11]你是 明月清風(fēng)
[00:48.79]
[00:49.62]我是你照拂的夢(mèng)
[00:52.10]
[00:54.48]見(jiàn)與不見(jiàn)都一生 與你相擁
[01:00.46]而我將 愛(ài)你所愛(ài)的人間
[01:03.76]
[01:04.38]愿你所愿的笑顏
[01:07.80]你的手我蹣跚在牽
二、格式化歌詞字符串為數(shù)據(jù)
/**
* 將歌詞字符串解析為歌詞數(shù)組
* @param {*} lyric 歌詞字符串 如 ""
* @returns array 如： [{ time: "31.52", words: "你是 遙遙的路" }]
*/
const formatLyric = (lyric) => {
const lyricList = [];
// 定義一個(gè)暫存變量接收日期字符串
let timeStr = "";
// 把歌詞數(shù)組用換行符\n分割成數(shù)組
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;
};
/**
* 將時(shí)間字符串解析為秒
* @param {*} timeStr 時(shí)間字符串
* @returns 秒
*/
const parseTime = (timeStr) => {
const parts = timeStr.split(":");
return +parts[0] * 60 + +parts[1];
};
lyricList這就是最終生成的數(shù)組格式是這樣的：
image.png
三、循環(huán)lyricList數(shù)據(jù)渲染歌詞dom
注意這里綁定了
3個(gè)ref節(jié)點(diǎn)下面要用到
lyricWarp lyricUl lyricLi
<!-- 歌詞滾動(dòng)包裹盒子 -->
<div class="m-song-scroll" ref="lyricWarp">
<!-- 歌詞內(nèi)容體 -->
<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標(biāo)簽綁定timeupdate事件獲取實(shí)時(shí)播放時(shí)間
<!-- 播放器 -->
<audio :src="songUrl" @timeupdate="audioTime" @ended="audioEnded" controls></audio>
五、歌詞滾動(dòng)
lyricWarp.value.offsetHeight / 2獲取歌詞視口高度的一般
lyricLi.value[0].offsetHeight獲取每條歌詞的的高度
總偏移量就等于lyricWarp.value.offsetHeight / 2 - lyricLi.value[0].offsetHeight * (i + 1)
// 歌詞的包裹容器dom
const lyricWarp = ref(null);
// 歌詞內(nèi)容體dom
const lyricUl = ref(null);
// 每一條歌詞的dom
const lyricLi = ref(null);
// 當(dāng)前激活的歌詞索引
const lyricIndex = ref(0);
// 當(dāng)前播放時(shí)間
let currentTime = "";
// 音頻播放時(shí)間更新的事件
const audioTime = (e) => {
// 當(dāng)前播放的時(shí)間
currentTime = e.target.currentTime;
for (let i = 0; i < lyricList.value.length; i++) {
// 如果播放時(shí)間大于當(dāng)前歌曲條目的時(shí)間
if (currentTime > lyricList.value[i].time) {
// 賦值激活選項(xiàng)
lyricIndex.value = i;
// 歌詞內(nèi)容體dom通過(guò)transform:translateY實(shí)現(xiàn)歌詞滾動(dòng)
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)
);
// 歌詞內(nèi)容體
.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; // 需要定死高度--好計(jì)算
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;
}
}
}
}
