前端LRC歌詞解析播放插件

前端LRC歌詞解析播放插件

寫音樂播放器的時候，作了顯示歌詞的功能，而歌詞內容爲lrc格式。爲了顯示歌詞，就參考其餘庫根據本身的想法實現了一個基於JavaScript的lrc文件解析庫。
本項目已開源，地址：https://github.com/lyswhut/lr...
demo地址：https://lyswhut.github.io/lrc...

安裝方法

本項目已發佈到 npm 上，因此可用 npm 安裝或者直接引入文件的方式使用。

安裝方法1

使用 npm 安裝：

npm install lrc-file-parser -S

導入：

// import
import Lyric from 'lrc-file-parser'

安裝方法2

直接引入文件的方式

<script src="./lrc-file-parser.min.js"></script>

兩種方法根據實際狀況2選1便可。

使用方法

var lrc = new Lyric({
  onPlay: function (line, text) { // 歌詞播放時的回調
    console.log(line, text) // line 是當前播放行
                            // text 是當前播放的歌詞
  },
  onSetLyric: function (lines) { // 監聽歌詞設置事件。當設置歌詞時，歌詞解析完畢會觸發此回調。
    console.log(lines) // lines 是一個數組[{time,text}]，裏面包含播放時間及對應的歌詞文本。
  },
  offset: 150 // 歌詞偏移時間單位毫秒, 默認 150 ms
})

lrc.setLyric(lyricStr) // 設置歌詞，此處傳入lrc文件的文本內容
                      // 注意：設置歌詞將自動暫停歌詞播放
lrc.play(30000) // 播放歌詞，傳入開始播放時間，30000是播放時間，單位：ms
lrc.pause() // 暫停播放歌詞

好用的話請在GitHub給個star哦~