<DOCTYPE html>
<html>
<head>
<title>手机音乐播放器</title>
<style>
*{margin:0;padding:0;}
body{
background:#000000;
/*性能优化：一个优秀的开发工程师一定是为服务器，CPU考虑（提高代码的加载效率网站打开效率）*/
}
#music{
position:relative;
width:322px;
height:635px;
//background:red;
margin:50px auto;
}
.m_top{
width:100%;
height:42px;
background:url("images/phone_top.png");
}
.m_info{
width:100%;
height:20px;
background:url("image/top.jpg")
}
.m_title{
width:320px;
height:40px;
color:#fff;
text-align:center;
line-height:40px;
font-size:24px;
background:#000;
border:1px solid white;
border-top:0;/*0/none都是没有 IE只识别0*/
border-bottom:0;
}
.m_song{
width:320px;
height:490px;
background:url("images/psb.jpg") no-repeat;
background-position:center;
background-size:cover;//等比例放大 也可以写100% 100% 因为图片太大了
border:1px solid #fff;
border-top:0;
border-bottom:0;
}
#m_song p{
color:#fff;
text-align:center;
line-light:20px;
}
.m_footer{
width:100%;
height:47px;
background:url("images/phone-bottom.png");
}
.btn{
position:absolute;
left:136px;/*距离参考物左端的距离*/
bottom:
width:50px;
height:50px;
background:url("images/normalmusic.svg");
background-size:cover;//图片太大
}
</style>
</head>
<body>
<div id="music">
<div class="m_top">//js一定要用_
</div>
<div class="m_info">
</div>
<div class="m_title">相伴潭州</div>
<div class="m_song">
</div>
<div class="m_footer"></div>
<div class="btn"></div>
</div>
<textarea style="display:none;" id="text">
[05:56:12]我来了
[06:00:00]我可以了
</textarea>
<audio src="music/10.mp3"></audio>
<script>
//找到点击按钮绑定点击事件
//在document文档下面通过ClassName来获取元素
var btn=document.getElementByClassName("btn")[0];
//找到音乐标签
var music=document.getElementById("#music");
var txt=document.getElementById("txt");
var m_song=document.getElementById("m_song");
var mark=true;//做一个标记保存音乐播放的状态
//绑定一个点击事件，点击播放音乐
btn.onclick=function(){//点击实现播放功能
if(mark)
{
music.play();
mark=false;
}else{
music.stop();
mark=true;
}
}//点击播放，点击暂停
//console.log(txt.value);
var lrc=txt.value;//获取歌词
var lrcArr=lrc.split("[");//去除里面的[
//console.log(lrcArr);
var html="";保存歌词
for(var i=0;i<lrcArr.length;i++)
{
var arr=lrcArr[i].split("]");
// console.log("arr[1]");
var times=arr[0].split(".");
var time=times[0].split(":");
//把时间转换成秒钟
var ms=time[0]*60+time[1]*1;
if(arr[1])
{
html+="<p id="+ms+">+arr[1]+</p>";//用一个变量来保存所有的歌词
}
m_song.innerHTML=html;//在歌子盒子里面显示
}
//歌词同步 监听到时间更新
var oP=document.getElementsByTagName("p");
music.addEventLister("timeupdate"，function(){
var cuTime=parseInt(this.currentTime);//获取当前播放时间
if(document.getElementById(cuTime))//如果存在的话就让他变色
{
for(var i=0;i<oP.length;i++)
{
oP[i].style.color="#fff";
}
document.getElementById(cuTime).style.color="#f00";
}
});
</script>
</body>
</html>
原文：http://www.cnblogs.com/think90/p/5797538.html