http://10.7.1.98/201401zhangmengyuan/H5/2-7%20player/
1 改进音乐播放器（课堂示例2-7）
10
分
任务尚未发布或者你没有权限查看任务内容。
任务讨论
<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
<script>
$(function(){
//播放器样式设置
playwidth = $(window).width();
outerwidth = playwidth*0.9;
$("#outer").css('width',outerwidth);
$("#rate").css('width',outerwidth*0.6);
$("#ratetime").css('width',outerwidth*0.1);
//设置内容区域的高度，确保播放区域位于页面靠下位置
$("#content").css('height',$(window).height()*0.75);
//获取audio元素
var audio = document.getElementById("audios");
$("#content a").click(function(){
var text = $(this).text();//获取文字是播放还是停止
if(text=="播放"){
//选中哪首音乐哪首音乐开始播放
var which = $(this).attr('href');
audio.src = which;
audio.play();
//文字变成“停止”
$("#content a").text("播放");
$(this).text("停止");
//音乐播放器按钮图标变成“暂停”图标
//设置播放状态背景图片位置为（-70px -25px）
$("#playp").css('background-position','-70px -25px');
var timer=setInterval(function(){
var total = audio.duration;
var now = audio.currentTime;
//播放进度随时显示
var progress = now/total;
var width = progress*($("#rate").width());
$("#ratemid").css('width',parseInt(width));
//播放时间的提示更新
var totalTime = (total/60).toFixed(2);
var nowtime = (now/60).toFixed(2);
$("#ratetime").text(nowtime+'/'+totalTime);
},1000);
//点击暂停按钮
$("#playp").click(function(){
audio.pause();
$("#playp").css('background-position','-50px -25px');
});
//快进、快退
$("#next").click(function(){
audio.currentTime=audio.currentTime+4;
});
$("#prv").click(function(){
audio.currentTime=audio.currentTime-4;
});
}
else{
//链接文字变成“播放”
$(this).text("播放");
//视频停止播放
audio.pause();
//进度条停止更新，时间停止更新
clearInterval(timer);
//音乐播放器按钮图标变成“播放”图标
//设置播放状态背景图片位置为（-50px -25px）
$("#playp").css('background-position','-50px -25px');
//点击开始按钮
$("#playp").click(function(){
audio.play();
$("#playp").css('background-position','-70px -25px');
});
//快进、快退
$("#next").click(function(){
audio.currentTime=audio.currentTime+4;
});
$("#prv").click(function(){
audio.currentTime=audio.currentTime-4;
});
}
return false;
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fullscreen">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">在线音乐</a></li>
<li><a href="#">本地音乐</a></li>
</ul>
</div>
</div><!-- /header -->
<div data-role="content" id="content" >
<div>
<div style="float:left;width:80%;height:30px;font:12px;">千千阙歌</div>
<div style="float:left;width:20%;height:30px;font:12px;">
<a href='music/02.mp3' id='play'>播放</a>
</div>
</div>
<div>
<div style="float:left;width:80%;height:30px;font:12px;">思念人之屋</div>
<div style="float:left;width:20%;height:30px;font:12px;">
<a href='music/01.mp3' id='play'>播放</a>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="ui-bar">
<audio src="music/02.mp3" id='audios' ></audio>
<!-- 播放器外边框 -->
<div id="outer">
<!-- 播放器控制区域: 上一首 下一首 播放 暂停 -->
<div id="control">
<div id="prv"> </div>
<div id="playp" class='ply'></div>
<div id="next"> </div>
</div>
<!-- 播放器控制区域结束 -->
<!-- 播放进度-->
<div id="rate">
<div id="ratetop"></div>
<div id="ratemid"></div>
<div id="ratemidtop"> </div>
<div id="ratebom"></div>
</div>
<!-- 播放进度结束-->
<div id="ratetime">
</div>
<!-- 音量-->
<div id="volume"></div>
<!-- 音量结束-->
</div>
<!-- 播放器外边框结束 -->
</div>
</div><!-- /page -->
</body>
</html>
