用最笨的js方法写个带歌词同步的播放器
2017-04-14 本文已影响186人
Elecrabbit
看一个大佬写的一个音乐播放器觉得好厉害，就想着来研究一下，碍于能力有限，琢磨了一天写了一个简单的歌词同步。
话不多说，上栗子：
效果就是这样，因为没写样式直接用的H5的audio标签和控件，所以很简陋，而且不同浏览器还有不一样的样式。。。不要在意这些细节，我们的重点是让歌词同步显示出来。
上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 = []; //创建歌词数组;
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;//找到对应歌词就停，不停的话，呵呵。。。
}
}
}
})
完结～
总结一下：很简单基本什么都没有，歌曲文件在本地，需要手动push每一行歌词进去，这个有点恶心，毕竟还不会从服务器加载歌词，只能用这个最笨蛋的法子。
虽然贴到这感觉工作量不大，但我这菜狗子还是调了大半天才让歌词同步显示出来 。。。唉
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]”
还是别寻他法吧。 哈哈
如果你是个小白，这个方法可以看看，如果你是大神，，，（哪位大神临幸我了，求抱大腿）
菜鸟如我，且学且珍惜！
