JavaScript开发简易音乐播放器

<div id="box">
<img src="images/1.gif" width="248" height="280" alt="联动图片" />
<div class="lrcbox">
<ul id = "lrcList"></ul>
</div>
</div>
<audio id ="audio" src="mp3/2.mp3" controls="controls" autoplay loop>
Your browser does not support the audio tag.
</audio>
<!--E music-->
<!--解析歌词:
a.把时间绑定给对应的歌词作为id;
b.获取歌词，并做响应的特效 -->
<textarea id="lrcnt" style="display:none;">
[00:02.00]求佛
[00:04.40]词曲：陈超
[00:06.48]演唱：誓言
[00:08.48]
[00:35.50]当月光洒在我的脸上
[00:39.36]我想我就快变了模样
[00:44.25]有一种叫做撕心裂肺的汤
[00:48.16]喝了它有神奇的力量
[00:51.30]
[00:52.93]闭上眼   看见天堂
[00:56.02]那是藏着你笑的地方
[01:00.96]我躲开无数个猎人的枪
[01:04.78]赶走坟墓爬出的忧伤
[01:08.00]
[01:08.56]为了你  我变成狼人模样
[01:12.67]为了你  染上了疯狂
[01:16.73]为了你  穿上厚厚的伪装
[01:20.99]为了你  换了心肠
[01:24.02]
[01:26.11]我们还能不能再见面
[01:29.10]我在佛前苦苦求了几千年
[01:33.26]愿意用几世换我们一世情缘
[01:37.45]希望可以感动上天
[01:41.08]
[01:41.68]我们还能不能能不能再见面
[01:45.79]我在佛前苦苦求了几千年
[01:49.96]当我在踏过这条奈何桥之前
[01:54.13]让我再吻一吻你的脸
[01:58.05]
[02:33.20]闭上眼   看见天堂
[02:36.16]那是藏着你笑的地方
[02:41.22]我躲开无数个猎人的枪
[02:44.97]赶走坟墓爬出的忧伤
[02:48.08]
[02:48.68]为了你  我变成狼人模样
[02:52.82]为了你  染上了疯狂
[02:57.04]为了你  穿上厚厚的伪装
[03:01.23]为了你  换了心肠
[03:04.10]
[03:06.03]我们还能不能再见面
[03:09.24]我在佛前苦苦求了几千年
[03:13.38]愿意用几世换我们一世情缘
[03:17.64]希望可以感动上天
[03:21.23]
[03:21.83]我们还能不能能不能再见面
[03:25.90]我在佛前苦苦求了几千年
[03:30.12]当我在踏过这条奈何桥之前
[03:34.38]让我再吻一吻你的脸
[03:39.11]
[03:39.71]我们还能不能再见面
[03:42.68]我在佛前苦苦求了几千年
[03:46.80]愿意用几世换我们一世情缘
[03:51.00]希望可以感动上天
[03:55.28]我们还能不能能不能再见面
[03:59.29]我在佛前苦苦求了几千年
[04:03.63]当我在踏过这条奈何桥之前
[04:07.59]让我再吻一吻你的脸
[04:12.02]让我再吻一吻你的脸
[04:16.11]让我再吻一吻你的脸
[04:21.92]
</textarea>

<style type="text/css">
*{margin:0; padding: 0;}
body{font-family: "微软雅黑";font-size: 14px;background:url('images/bg.jpg') no-repeat top center;background-size: cover;}
ul,li{list-style: none;}
#box{width: 630px;overflow:hidden;border: 2px solid #99CC99; margin:120px auto;border-radius: 10px;box-shadow:0 0 40px #99CC99; }
#box img{float:left;}
#box .lrcbox{width: 368px;height:280px;padding-left:10px;overflow:hidden;border-left:2px solid #99CC99;float:left;}
#box .lrcbox li{width:240px;padding:8px;color:#fff; }
#box .lrcbox li.hover{color:#993399; font-size: 20px;}
#lrcList{transition: all 0.3s ease;}
#audio{margin:-100px 0 100px 365px;}
</style>

<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var audioDom = $("audio");
window.onload = function(){
lrc.init($("lrcnt").value);
//监控当前音乐，获取到对应的时间与歌词进行匹配
audioDom.ontimeupdate = function(){
var t = parseInt(this.currentTime);
lrc.jump(t);
}
};

//定义对象
var lrc = {
//定义正则表达式用于表示歌词左右的空格
regex_trim:/^\s+|\s+$/,
init:function(lrctxts){
//把歌词分割成数组,以分号隔开,时间和歌词是一起的
var txts = lrctxts.split("\n");
var html = "";
for(var i=0; i<txts.length;i++){
//剔除左右的空格
var item = txts[i].replace(this.regex_trim,"");
//将歌词和时间分割
var ms = item.split("]");
var mt = ms[0].replace("[","").split(":");
//alert(mt);
//将时间转换成秒为单位并赋给对应的歌词作为它的id
var m = parseInt(mt[0]*60+mt[1]*1);
console.log(m);
var txt = ms[1];
console.log(txt);

//歌词不为空的时候进行拼接
if(txt!=""){
html+="<li id='t_"+m+"'>"+txt+"</li>";
}
}
$("lrcList").innerHTML += html;
},

//歌词移动
jump:function(duration){
//获取时间对应的具体的歌词
var dom = $("t_"+duration);

//获取ul对象
var lrcbox = $("lrcList");

if(dom){
//定义用于存放兄弟元素的数组
var arr = this.siblings(dom);
//遍历每一个兄弟元素并去掉其hover样式
for(var i = 0;i<arr.length;i++){
arr[i].className = "";
}
//给对应的对象（当前播放歌词）添加样式
dom.className = "hover";
var index = this.indexof(dom)-3;
lrcbox.style.marginTop = (index < 0?0:index)*-35+"px";
}
},
//获取具体的对象(当前播放的歌词)
indexof:function(dom){
//获取ul下面的所有li
var listDoms = dom.parentElement.children;
//遍历获取到歌曲播放的当前歌词并返回
for(var i=0; i<listDoms.length; i++){
if(listDoms[i] == dom){
index = i;
break;
}
}
return index;
},
//当前未播放的歌词对象
siblings:function(dom){
var listDoms = dom.parentElement.children;
var arr =[];
//判断获取到的是否为兄弟元素(已经播放过去的歌词)
for(var i = 0; i < listDoms.length;i++){
if(listDoms[i]!= dom){
arr.push(listDoms[i]);
}
}
return arr;
},
};
</script>