前端LRC歌詞解析播放插件

monw3c 發布于2019-08-02 16:11 / 2829人閱讀

摘要：前端歌詞解析播放插件寫音樂播放器的時候，做了顯示歌詞的功能，而歌詞內容為格式。為了顯示歌詞，就參考其他庫根據自己的想法實現了一個基于的文件解析庫。使用方法歌詞播放時的回調是當前播放行是當前播放的歌詞監聽歌詞設置事件。

前端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

直接引入文件的方式

兩種方法根據實際情況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哦~

GPU云服務器云服務器 js歌詞播放效果 js帶歌詞音樂播放器歌詞解析c語言播放插件 js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54831.html

前端LRC歌詞解析播放插件

摘要：前端歌詞解析播放插件寫音樂播放器的時候，做了顯示歌詞的功能，而歌詞內容為格式。為了顯示歌詞，就參考其他庫根據自己的想法實現了一個基于的文件解析庫。使用方法歌詞播放時的回調是當前播放行是當前播放的歌詞監聽歌詞設置事件。前端LRC歌詞解析播放插件寫音樂播放器的時候，做了顯示歌詞的功能，而歌詞內容為lrc格式。為了顯示歌詞，就參考其他庫根據自己的想法實現了一個基于JavaScript的l...

shiguibiao 2019-08-23 16:47 評論0 收藏0
lrc滾動歌詞解析及顯示

摘要：以為擴展名的歌詞文件可以在各類數碼播放器中同步顯示。這是用于總體調整顯示快慢的，但多數的可能不會支持這種標簽。如何實現歌詞的解析解析思路如下根據字符串，通過換行符分成數組的每一項。相應的正則表達式以為例，統一解析成以秒為單位的秒。 lrc歌詞格式是什么樣的？ lrc是英文lyric（歌詞）的縮寫，被用做歌詞文件的擴展名。以lrc為擴展名的歌詞文件可以在各類數碼播放器中同步顯示。LRC...

android_c 2019-08-21 10:39 評論0 收藏0
用 TS + Vue 重寫 APlayer HTML5 音樂播放器

摘要：簡介是一款簡潔漂亮的音樂播放器在我第一次看到這款播放器顏值的時候讓我眼前一亮，我非常崇拜那些能設計出好看界面的設計師但是在用過之后發現還是有不足的地方這是我曾經提過的用了一段時間，很喜歡簡潔的，提一些其他可改進的建議我認為有必要提供動態管理簡介 @DIYgod/APlayer 是一款簡潔漂亮的 HTML5 音樂播放器 (〃?ω?) 在我第一次看到這款播放器顏值的時候讓我眼前一亮，我...

BingqiChen 2019-08-20 18:15 評論0 收藏0