A JavaScript library for parsing LRC file, and select lyric to highlight.
You can install via npm:
$ npm install lyrics.js
Or via Git reporsitory:
$ git clone https://github.com/frank-deng/js-lyrics.git
Load .lrc file while initializing parser:
var lrc = new Lyrics(LRC_text);
Load .lrc file and replace previous loaded lyrics using the same parser object:
lrc.load(LRC_text);
Load .lrc file from URL:
var lrc = new Lyrics();
var xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', function(e){
if (4==xhr.readyState && 200==xhr.status){
lrc.load(xhr.responseText);
}
});
xhr.open("GET", "/path/to/lyrics.lrc", true);
xhr.send(null);
PS: To specify time offset for .lrc file, please add the following tag into your .lrc file:
[offset:t]
t is time offset in milliseconds, positive value to shift time up, negative value to shift time down.
Lyrics.select(time);
This method will return -1 when the time given is ahead the first lyric's time or time parameter is invalid.
var lrc = new Lyrics(LRC_text);
document.getElementById('audio_player').addEventListener('timeupdate', function(){
//Unhighlight all the lyrics
var lyric_selected = lyrics_container.querySelectorAll('p[selected]');
for (var i = 0; i < lyric_selected.length; i++) {
lyric_selected[i].removeAttribute('selected');
}
//Get the lyric to highlight
var lyric_selected = lrc.select(this.currentTime);
//Highlight the lyric
if (lyric_selected != undefined && lyric_selected >= 0) {
lyrics_container.querySelectorAll('p')[lyric_selected].setAttribute('selected', 'selected');
}
});
You may launch text.html and test.min.html from test/ folder using brwoser to see the result of all the QUnit based test cases.
一个用于解析LRC文件的JavaScript库，也用于选择需要高亮的歌词。
使用**npm**安装：
$ npm install lyrics.js
从Git仓库安装：
$ git clone https://github.com/frank-deng/js-lyrics.git
初始化解析器的同时加载.lrc文件中的内容：
var lrc = new Lyrics(LRC_text);
加载.lrc文件中的内容，并替换之前加载的歌词：
lrc.load(LRC_text);
从URL加载.lrc文件：
var lrc = new Lyrics();
var xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', function(e){
if (4==xhr.readyState && 200==xhr.status){
lrc.load(xhr.responseText);
}
});
xhr.open("GET", "/path/to/lyrics.lrc", true);
xhr.send(null);
PS：如果需要为.lrc指定时间偏移量，请在.lrc文件中加上如下标签：
[offset:t]
t为时间偏移量，单位为毫秒，正数为延后，负数为提前。
Lyrics.select(time);
当时间早于第1条歌词的时间，或time参数非法时，返回-1。
var lrc = new Lyrics(LRC_text);
document.getElementById('audio_player').addEventListener('timeupdate', function(){
//所有歌词取消高亮
var lyric_selected = lyrics_container.querySelectorAll('p[selected]');
for (var i = 0; i < lyric_selected.length; i++) {
lyric_selected[i].removeAttribute('selected');
}
//获取要高亮的歌词
var lyric_selected = lrc.select(this.currentTime);
//高亮歌词（如果有）
if (lyric_selected != undefined && lyric_selected >= 0) {
lyrics_container.querySelectorAll('p')[lyric_selected].setAttribute('selected', 'selected');
}
});
用浏览器打开test/目录下的test.html和test.min.html，可以查看QUnit测试用例的运行结果。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent