1.js文件
$(document).ready(function () {
var lrc = []; //创建歌词数组;
lrc.push("[00:00.805]陈一发儿 - 童话镇");
lrc.push("[00:10.000]作曲 : 暗杠 作词 : 竹君");
lrc.push("[00:15.000]编曲 : 暗杠");
lrc.push("[00:23.076]听说白雪公主在逃跑");
lrc.push("[00:26.466]小红帽在担心大灰狼");
//...中间省略N行...
lrc.push("[03:22.746]又陌生");
lrc.push("[03:24.488]啊~~啊~~啊~");
lrc.push("[10:00.000]完～");
var myAudio = $("audio")[0];
var lrcArr = [];
getLrc();
function getLrc() {
var timeReg = /\[\d{2}:\d{2}\.\d{3}\]/g;//匹配时间的正则表达式
var result = [];
for (var i=0;i<lrc.length;i++) {
var time = lrc[i].match(timeReg); //获取歌词里的时间
var value = lrc[i].replace(timeReg, ""); //获取纯歌词文本
for (var j=0;j<time.length;j++ ) {
var t = time[j].slice(1, -1).split(":"); //t[0]分钟，t[1]秒
var timeArr = parseInt(t[0], 10) * 60 + parseFloat(t[1]);
result.push([timeArr, value]);//以[时间(秒)，歌词]的形式存进result
}
}
lrcArr = result;//这个有点多余。。。
setInterval(showLrc, 200);//设置定时，每200毫秒更新一下
}
function showLrc() {
var curTime = myAudio.currentTime;//获取当前的播放时间
for (var i = 0; i < lrcArr.length; i++) {
if ((curTime >lrcArr[i][0])&&(curTime<lrcArr[i+1][0])) {
//播放时间大于对应歌词时间小于下一句歌词时间就显示当前歌词
document.getElementById("lyric").innerHTML = lrcArr[i][1];
break;//找到对应歌词就停，不停的话，呵呵。。。
}
}
}
})
2.主体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>lrctest</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/lrctest.js" type="text/javascript"></script>
</head>
<body>
<audio src="thz.mp3" controls="controls" autoplay="autoplay">
抱歉你的浏览器版本out了，去升级吧
</audio>
<div id="lyric"></div>
</body>
</html>
注意：lrc只能这样：“[00:23.076]听说白雪公主在逃跑”，不允许这样：
“[00:23.076]听[00:23.336]说[00:23.592]白[00:23.826]雪[00:24.061]公[00:24.321]主[00:24.586]在[00:24.921]逃[00:25.175]跑[00:25.745]”