看一個大佬寫的一個音樂播放器覺得好厲害崎场，就想著來研究一下埋泵，礙于能力有限，琢磨了一天寫了一個簡單的歌詞同步么介。
話不多說娜遵，上栗子：
效果就是這樣，因為沒寫樣式直接用的H5的audio標簽和控件壤短，所以很簡陋设拟，而且不同瀏覽器還有不一樣的樣式。久脯。纳胧。不要在意這些細節(jié)，我們的重點是讓歌詞同步顯示出來桶现。
上HTML碼：
<!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>
很簡單就一個audio和一個顯示歌詞的div。
（不要問我為什么js寫在外面骡和，我怕你一頁看不完T_T）
下面上js文件：
$(document).ready(function () {
var lrc = []; //創(chuàng)建歌詞數(shù)組;
lrc.push("[00:00.805]陳一發(fā)兒 - 童話鎮(zhèn)");
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;//找到對應歌詞就停绵脯，不停的話，呵呵休里。蛆挫。。
}
}
}
})
完結(jié)～
總結(jié)一下：很簡單基本什么都沒有妙黍，歌曲文件在本地悴侵，需要手動push每一行歌詞進去，這個有點惡心拭嫁，畢竟還不會從服務器加載歌詞可免，只能用這個最笨蛋的法子。
雖然貼到這感覺工作量不大做粤，但我這菜狗子還是調(diào)了大半天才讓歌詞同步顯示出來 浇借。。怕品。唉
Ps：如果的你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]”
還是別尋他法吧妇垢。 哈哈
如果你是個小白，這個方法可以看看，如果你是大神闯估，恢总，，（哪位大神臨幸我了睬愤，求抱大腿）
菜鳥如我片仿，且學且珍惜！
