js解析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文件解析则会出错。先凑合看吧，等我更新。