代码来自潭州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>
时间： 2024-10-05 12:31:48