标签：
代码来自潭州java免费视频教程
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>音乐播放器</title> <style type="text/css"> *{margin:0;padding:0} body{font-size:12px;font-family:"微软雅黑";background:url("images/bg1.jpg")no-repeat;background-size:cover;} .music{width:720px;height:470px;background:#93c;margin:80px auto;} .music .m_ly{width:50%;height:470px;background:#90c;float:left;} .music .m_list{width:50%;height:470px;background:#ccf;float:left;} .music .m_ly h2{font-size:25px;font-weight:500;padding:15px 0 0 72px;} .music .m_ly .m_con{width:100%;height:300px;background:url("images/6.gif")top center;overflow:scroll;} .music .m_ly .m_play{width:100%;height:105px;background:#c6f;padding:17px 0 0 37px;} .music .m_ly .m_play .m_btn{width:300px;height:100px;} .music .m_ly .m_play .m_btn a{width:92px;height:96px;display:inline-block;}/* 行内块级元素能将a转成块级元素撑开空间位置 */ .music .m_ly .m_play .m_btn .b_pre{background:url("images/3.png");} .music .m_ly .m_play .m_btn .b_play{background:url("images/2.png");} .music .m_ly .m_play .m_btn .b_next{background:url("images/5.png");} .music .m_list{width:50%;height:470px;background:#cf9;} .music .m_list ul li{list-style:none;border-bottom:1px solid #000;line-height:40px;padding-left:30px;font-size:20px;} .music .m_list ul li:hover{border-bottom:1px solid #cff;} .music .m_list ul li a{color:#f3c;text-decoration:none;}/*去除a的下划线*/ .music .m_list ul li a:hover{color:#fff;} .sel{color:red;} </style> </head> <body> <div class="music"> <div class="m_ly"> <h2>不想做朋友 - 星弟</h2> <div class="m_con" id="lrcbox"></div> <div class="m_play"> <div class="m_btn"> <a href="#" class="b_pre"></a> <a href="#" class="b_play"></a> <a href="#" class="b_next"></a> </div> </div> </div> <div class="m_list"> <ul> <li><a href="#">不想做朋友</a></li> <li><a href="#">南山南</a></li> <li><a href="#">采薇</a></li> <li><a href="#">时间都去哪了</a></li> <li><a href="#">自由行走的花</a></li> <li><a href="#">选择原谅</a></li> </ul> </div> </div> <textarea rows="10" cols="50" id="lrc" style="display:none;"> [00:18.00]那句我还爱你差点说出口 [00:24.65]却被你一声问候 堵在了心头 [00:32.46]真的沦落成朋友 也能笑着接受 [00:41.06]只是见面时心会 比较痛 [00:49.72]其实我不洒脱只是装英雄 [00:56.22]那么爱你怎可能 一滴泪没有 [01:04.05]我说我会再牵手 有很多人等候 [01:12.89]可谁能给我 那样的感动 [01:19.99]不想和你做朋友 夜深的时候 [01:28.72]还希望有你温暖我胸口 [01:35.84]不想和你做朋友 我会再等候 [01:44.59]也许等到你 忘了我以后 [02:09.17]其实我不洒脱只是装英雄 [02:15.97]那么爱你怎可能 一滴泪没有 [02:23.34]我说我会再牵手 有很多人等候 [02:32.19]可谁能给我 那样的感动 [02:39.20]不想和你做朋友 夜深的时候 [02:48.11]还希望有你温暖我胸口 [02:55.22]不想和你做朋友 我会再等候 [03:03.98]也许等到你 忘了我以后 [03:11.39]不想和你做朋友 夜深的时候 [03:19.74]还希望有你温暖我胸口 [03:26.80]不想和你做朋友(不做朋友） [03:31.96]我会再等候（我会再等候） [03:35.92]也许等到你 忘了我以后 ... </textarea> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //创建mp3播放器 var audioDom=document.createElement("audio"); audioDom.src="mp3/3.mp3"; //audioDom.autoplay="autoplay";设置自动播放 var html=""; //获取歌词 var lrc=$("#lrc").val(); //时间和歌词分开 var lrcArr=lrc.split("["); for(var i=0;i<lrcArr.length;i++){ var sarr=lrcArr[i].split("]"); var timer=sarr[0].split(".");//时间 var message=sarr[1];//歌词 var stime=timer[0].split(":");//获取分钟和秒 var ms=stime[0]*60+stime[1]*1;//换算成秒 必须乘一个数转换成数字，否则就是字符串拼接 if(message){ html+="<div id=‘"+ms+"‘>"+message+"</div>"; } } $("#lrcbox").html(html); audioDom.addEventListener("timeupdate",function(){ var timer=this.currentTime; //var st=parseInt(timer);//通过时间驱动歌词 var temp=0; for(var i=0;i<timer;i++){ if(document.getElementById(""+i)){ $("#"+temp).removeClass("sel"); temp=i; $("#"+i).addClass("sel"); } } }); $(".b_play").click(function(){ audioDom.play(); }); }); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/tianyang01/p/5642249.html
