用HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
效果如下：（鼠标点击按钮可以实现播放或暂停，按钮会旋转，实现了歌词同步，功能还需改进）
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="keywords" content="音乐播放器播放两首歌"><meta name="description" content="手机大小的简单的音乐播放器播放两首歌"><title>PC版手机音乐播放器开发</title><style type="text/css">*{margin:0px;padding:0px;}body{background:#000000;}#phone{position:relative;width:322px;height:640px;margin:20px auto;/* background:#990033; */}.top{width:322px;height:42px;background:url("images/phone_top.png");}.info{width:322px;height:20px;background:url("images/top.jpg");}h2.song_title{width:320px;height:40px;background:#000000;color:#ffffff;text-align:center;line-height:40px;border-right:1px solid #ffffff;border-left:1px solid #ffffff;}.song_lrc{width:320px;height:490px;background:url("images/0.jpg") no-repeat;background-size:cover;border-right:1px solid #ffffff;border-left:1px solid #ffffff;overflow:hidden;}.song_lrc p{height:20px;line-height:20px;font-size:14px;font-weight:bold;text-align:center;color:#625959;}.footer{width:322px;height:47px;background:url("images/phone_bottom.png");}#btn{position:absolute;left:140px;bottom:50px;width:50px;height:50px;background:url("images/normalmusic.svg");background-size:100% 100%;}.rotate{animation:rot 5s linear infinite;/*CSS3自定义动画：名称 时间 匀速运动 无限重复*/}@keyframes rot{/*CSS3变换：旋转*/from{transform:rotate(0deg);}to{transform:rotate(360deg);}}#content{position:relative;top:0;}</style></head><body><div id="phone"><div class="top"></div><div class="info"></div><h2 class="song_title">刚好遇见你</h2><div class="song_lrc"><div id="content"></div></div><div class="footer"></div><div id="btn" class=""></div></div><!--HTML5音频播放标签--><audio src="music/李玉刚-刚好遇见你.mp3" id="myMusic"></audio><textarea id="text" style="display:none">[00:00.95]刚好遇见你 - 李玉刚[00:02.74]作词：高进[00:03.70]作曲：高进[00:04.75]编曲：关天天[00:12.56]我们哭了[00:15.27]我们笑着[00:18.60]我们抬头望天空[00:21.43]星星还亮着几颗[00:24.63]我们唱着[00:27.56]时间的歌[00:30.62]才懂得相互拥抱[00:34.00]到底是为了什么[00:36.94]因为我刚好遇见你[00:40.32]留下足迹才美丽[00:43.69]风吹花落泪如雨[00:46.48]因为不想分离[00:49.57]因为刚好遇见你[00:52.59]留下十年的期许[00:55.69]如果再相遇[00:59.15]我想我会记得你[01:14.28]我们哭了[01:16.88]我们笑着[01:20.29]我们抬头望天空[01:22.96]星星还亮着几颗[01:26.11]我们唱着[01:29.11]时间的歌[01:32.56]才懂得相互拥抱[01:35.36]到底是为了什么[01:38.47]因为我刚好遇见你[01:41.84]留下足迹才美丽[01:44.83]风吹花落泪如雨[01:47.97]因为不想分离[01:51.02]因为刚好遇见你[01:54.09]留下十年的期许[01:57.23]如果再相遇[02:00.69]我想我会记得你[02:03.69]因为刚好遇见你[02:06.43]留下足迹才美丽[02:09.57]风吹花落泪如雨[02:12.64]因为不想分离[02:15.76]因为刚好遇见你[02:18.78]留下十年的期许[02:21.83]如果再相遇[02:24.98]我想我会记得你[02:31.07]因为我刚好遇见你[02:34.13]留下足迹才美丽[02:37.25]风吹花落泪如雨[02:40.37]因为不想分离[02:43.43]因为刚好遇见你[02:46.48]留下十年的期许[02:49.58]如果再相遇[02:52.67]我想我会记得你</textarea><script type="text/javascript">var myMusic=document.getElementById("myMusic");var btn=document.getElementById("btn");var txt=document.getElementById("text");var con=document.getElementById("content");var onOff=true;//开关记录播放状态 btn.onclick=function(){if(onOff==true){myMusic.play();this.className="rotate";}else{myMusic.pause();this.className="";}onOff=!onOff;}var html='';//定义一个空变量来存储歌词的词部分//console.log(txt.value);//获取歌词部分，包括[时间]+词var lrc=txt.value.split("[");//获取歌词并从[切割开 //console.log(lrc);//测试lrc是什么//循环遍历到每句歌词for(var i=0;i<lrc.length;i++){//console.log(lrc[i]);//测试lrc数组每个元素var arr=lrc[i].split("]");//从]切割，这样时间和词就切割开来了//console.log(arr[1]);//arr[0]是时间，arr[1]是词，时间形如分秒毫秒00:36.94var t=arr[0].split(".");//将分秒和毫秒分割开var ti=t[0].split(":");var time=ti[0]*60+ti[1]*1;//获取歌词时间，注意，如果没有*1，将会是字符串拼接if(arr[1]){//如果词不为空或undefined(分割之后可能会有空格或undefined)html+="<p id="+time+">"+arr[1]+"</p>";}}con.innerHTML=html;var allP=document.getElementsByTagName("p");//获取所有的p标签，这样再播完某句歌词的时候该歌词可以恢复原来的样式var num=0;//记录歌词移动的次数，因为歌词要往上移动，那么就要不断重新设置所对应容器的top值//console.log(parseInt(this.currentTime));//当前播放时间//歌词同步 myMusic.addEventListener("timeupdate",function(){var currTime=parseInt(this.currentTime);//让当前播放的歌词变色、增大if(document.getElementById(currTime)){//先把所有的p标签内容改为原来的颜色for(var i=0;i<allP.length;i++){allP[i].style.color="#625959";allP[i].style.fontSize="14px";}document.getElementById(currTime).style.color="#ff0000";document.getElementById(currTime).style.fontSize="18px";if(allP[9+num].id==currTime){//唱到第9行之后，每唱完一句歌词往上移一个行高即top减20pxcon.style.top=-num*20+"px";num++;}}});//监听歌曲是否播完 myMusic.addEventListener("ended",function(){btn.className="";onOff=true;//把开关更改为初始状态 con.style.top=0;//把歌词变回初始位置 num=0;//把歌词同步相关的num值改为初始状态this.currentTime=0;//把当前歌曲的进度改为初始状态 })</script></body></html>
还有bug，待更新......
