音樂(lè)是人們生活中不可或缺的一部分，在聽歌的時(shí)候，有時(shí)候想看一下歌詞，跟著歌曲的節(jié)奏一起唱，而Vue可以幫助我們實(shí)現(xiàn)識(shí)別歌詞的這一功能。

首先我們需要在Vue的data中定義一個(gè)lyrics數(shù)組，用來(lái)存儲(chǔ)歌詞，如下：

data: {
 lyrics: [
{ time: "0:00", text: "歌詞1" },
{ time: "0:03", text: "歌詞2" },
{ time: "0:07", text: "歌詞3" },
 ],
},

其中，time表示歌詞開始的時(shí)間，text表示歌詞的內(nèi)容。

接著，我們可以使用Vue的生命周期函數(shù)created，來(lái)綁定audio的timeupdate事件，監(jiān)聽歌曲播放過(guò)程中的時(shí)間，并根據(jù)時(shí)間來(lái)匹配歌詞。代碼如下：

created() {
this.$refs.audio.addEventListener("timeupdate", () =>{
for (let i = 0; i < this.lyrics.length; i++) {
if (
this.$refs.audio.currentTime > =
this.formatTimeToSeconds(this.lyrics[i].time) &&
(i === this.lyrics.length - 1 ||
this.$refs.audio.currentTime <
this.formatTimeToSeconds(this.lyrics[i + 1].time))
) {
this.currentIndex = i;
break;
}
}
});
},
methods: {
formatTimeToSeconds(time) {
// 將時(shí)間格式轉(zhuǎn)為秒數(shù)
return parseInt(time.split(":")[0]) * 60 + parseInt(time.split(":")[1]);
},
},

代碼中，我們使用了formatTimeToSeconds方法，將時(shí)間格式轉(zhuǎn)為秒數(shù)，方便計(jì)算。在timeupdate事件監(jiān)聽函數(shù)中，我們遍歷歌詞數(shù)組，找到當(dāng)前歌詞應(yīng)該顯示的位置，通過(guò)設(shè)置currentIndex來(lái)實(shí)現(xiàn)歌詞的高亮。

接著，在模板中，我們可以使用v-for指令來(lái)遍歷歌詞數(shù)組，使用v-bind:class指令來(lái)根據(jù)currentIndex來(lái)動(dòng)態(tài)設(shè)置歌詞的高亮效果。代碼如下：

<div class="lyrics">
<p
v-for="(item, index) in lyrics"
:key="index"
:class="{ active: currentIndex === index }"
>
{{ item.text }}
</p>
</div>

到這里，我們就完成了Vue識(shí)別歌詞的功能。通過(guò)使用Vue的生命周期函數(shù)和模板語(yǔ)法，我們可以方便地實(shí)現(xiàn)歌詞的高亮和滾動(dòng)效果，讓聽歌時(shí)的體驗(yàn)更加豐富。