JavaScript解析lrc文件音乐歌词

最近尝试做一个音乐播放器，遇到歌词匹配问题。

做歌词匹配，首先要将lrc文件中的信息读取出来。以下是lrc文件部分内容



先参考以下网易云音乐歌词部分的HTML。



根据以上的HTML，我的思路是讲lrc文件解析成一个json数组。如下



通过Ajax从后台取得一个lrc文件进行解析。也可以在后台直接用PHP/JAVA解析，再传一个json数组到前台，这里主要演示使用js进行解析

以下是代码的实现，代码肯定有许许多多的不足，仅供参考使用。

<script>
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

xhr.open("GET", "lyric2.lrc", true);
xhr.send();

xhr.onreadystatechange = function() {

if(xhr.readyState === 4 && xhr.status === 200) {
var lyricStr = xhr.responseText;

// 匹配歌词文本中的换行符.制表符
var regexTrim = new RegExp("[\\r\\n]", "g");
// 匹配歌词文本中的时间  例如 [00:04.11]， 这种写法比较流氓，虽然可行。但只能匹配99分钟之内的时间格式 [99.04.11]
var regexGetTime = new RegExp("\\[.{8}\\]", "g");
// 匹配歌词文本中的歌词  例如 刘瑞琦 - 晴天
var regexGetLyric = new RegExp("[^\\[\\]\\:\\.\\d]+", "g");
// 用于存放时间
var aTime = [];
// 用于存放歌词
var aLyric = [];
// 存放json对象 例如 {"time": "4.11", "lyric": "刘瑞琦 - 晴天"}
var jsonLyric = [];
var result;

// 删除歌词文本中的所有换行符.制表符
var lyricStr2 = lyricStr.replace(regexTrim, '');

// 将匹配到的时间存入数组，exec()返回的是数组，该数组只存放每一次匹配到的值。
while((result=regexGetTime.exec(lyricStr2)) != null) {
aTime.push(result.toString());
}

// 将匹配到的歌词存入数组
while((result=regexGetLyric.exec(lyricStr2)) != null) {
aLyric.push(result.toString());
}

for(var i=0, j=aTime.length; i<j; i++) {
var obj = {};
obj.lyric = aLyric[i];
obj.time = getTime(aTime[i]);
jsonLyric.push(obj);
}

// 打印json数组
console.log(jsonLyric);
}
}

// 将 [00:04.11] 转化为 4.11(以 秒.毫秒 格式)
function getTime(time) {
var str = time;
// 删除 '['
str = str.substr(1);
// 删除 ']'
str = str.substr(0, str.length-1);
var minutes = parseInt(str.slice(0, str.indexOf(':')));
var seconds = parseFloat(str.substr(str.indexOf(':')+1));
var newTime = (minutes*60 + seconds).toFixed(2);
return newTime;
}

</script>

打印出来的结果。



可以通过以下的函数将歌词添加到指定的地方(这里演示的为添加到body中)。



添加后的结果。



以上代码只能解析这种形式开头的lrc文件。



而以下开头的lrc文件解析则会出错。先凑合看吧，等我更新。