通过上面的代码就可以LRC文件读取成文本，然后就可以进行下一步处理了。

提取分离

因为时间我歌词的分隔是很有规律的，先通过\n将所有文字分隔成一行行存入数组，然后根据文章开始分析的思路一步一步提取分离。为此写一个解析歌词的函数。

function parseLyric(text) { 
    //将文本分隔成一行一行，存入数组 
    var lines = text.split('\n'), 
        //用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx] 
        pattern = /\[\d{2}:\d{2}.\d{2}\]/g, 
        //保存最终结果的数组 
        result = []; 
    //去掉不含时间的行 
    while (!pattern.test(lines[0])) { 
        lineslines = lines.slice(1); 
    }; 
    //上面用'\n'生成生成数组时，结果中最后一个为空元素，这里将去掉 
    lines[lines.length - 1].length === 0 && lines.pop(); 
    lines.forEach(function(v /*数组元素值*/ , i /*元素索引*/ , a /*数组本身*/ ) { 
        //提取出时间[xx:xx.xx] 
        var time = v.match(pattern), 
            //提取歌词 
            vvalue = v.replace(pattern, ''); 
        //因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔 
        time.forEach(function(v1, i1, a1) { 
            //去掉时间里的中括号得到xx:xx.xx 
            var t = v1.slice(1, -1).split(':'); 
            //将结果压入最终数组 
            result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]); 
        }); 
    }); 
    //最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词 
    result.sort(function(a, b) { 
        return a[0] - b[0]; 
    }); 
    return result; 
} 

这一步，我们便得到 了一个总的数组，它的元素是一些小的数组，这些小数组包含两个元素，一个是时间，并且这个时间已经由分:秒的形式转化为了秒，一个是时间对应的歌词[['秒数','歌词'], ['秒数','歌词']…]。

歌词同步

接下来就是先把全部歌词显示到页面，进行滚动式显示，或者也可以不全部显示，像电影字幕一样，唱一句显示一句。

下面看如何同步。当歌曲播放时，监听audio标签的ontimeupdate事件，即时更新显示歌词到页面即可。

//获取页面上的audio标签 
var audio = document.getElementsByTagName('audio'), 
    //显示歌词的元素 
    lyricContainer = document.getElementById('lyricContainer'); 
//监听ontimeupdate事件 
audio.ontimeupdate = function(e) { 
    //遍历所有歌词，看哪句歌词的时间与当然时间吻合 
    for (var i = 0, l = lyric.length; i < l; i++) { 
        if (this.currentTime /*当前播放的时间*/ > lyric[i][0]) { 
            //显示到页面 
            lyricContainer.textContent = that.lyric[i][1]; 
        }; 
    }; 
};