隨著數字音樂市場的不斷增長，越來越多的人開始享受音樂和歌詞在一起的體驗。現在，Vue可以幫助你實現在你的網站或應用中添加歌曲字幕的功能，以讓你的用戶更好地體驗你的內容。

// 引入 Vue 和歌詞解析庫lyric-parser
import Vue from 'vue'
import Lyric from 'lyric-parser'
// 創建一個自定義指令，在網頁中使用 v-lyric
Vue.directive('lyric', {
 bind(el, binding, vnode) {
// 首先獲取歌曲和歌詞
const audio = el.getElementsByTagName('audio')[0]
const lrc = binding.value
if (!lrc) return
// 創建一個 Lyric 實例
const lyric = new Lyric(lrc, scroll)
// 將歌詞賦值給 audio
audio.lyric = lyric
},
})
// 添加一個滾動函數，將歌詞滾動到正確的位置
function scroll(time) {
const el = this.$el
const list = el.querySelectorAll('.lrc-list >li')
const currentLine = el.querySelector('.current') || list[0]
const currentIndex = Array.from(list).indexOf(currentLine)
const targetLine = list[currentIndex + 1]
if (targetLine && time >targetLine.getAttribute('data-time') - 0.1) {
currentLine.classList.remove('current')
targetLine.classList.add('current')
const offset = targetLine.offsetTop - el.querySelector('.lrc-list').offsetTop
el.querySelector('.lrc-list').style.transform = `translateY(-${offset}px)`
}
}

接下來，這個指令就可以用在 Vue 模板中了：

如上所示，我們給 audio 標簽綁定了 v-lyric 指令，并把歌曲和歌詞作為參數傳了進去。然后，我們在 lrc-list 中使用 v-for 循環生成了每句歌詞，并用 data-time 存儲了每句歌詞的時間。

最后，我們給 audio 標簽綁定了 timeupdate 事件，每當歌曲播放時間更新時，就會觸發 handleTimeupdate 函數：

// 定義 handleTimeupdate 函數
handleTimeupdate(e) {
 const audio = e.target
 const lyric = audio.lyric
 if (!lyric) return
 // 獲取當前時間
 const currentTime = audio.currentTime
 // 同步歌曲播放時間和歌詞
 lyric.seek(currentTime * 1000)
}

以上就是使用 Vue 添加歌詞的方法。當然，這只是一個簡單的示例，在實際應用中，你還需要考慮諸如歌詞同步、歌詞顯示效果和動畫等方面的問題。唯一不同的是，在實現這些功能時，你可以使用 Vue 提供的豐富的生命周期鉤子函數和組件化設計來優化你的代碼。