<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script src="js/" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/"/>
<link rel="stylesheet" type="text/css" href="css/"/>
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
}
#music-contain{
height: 700px;
width: 100%;
overflow: inherit;
}
#music-tittle{
height: 150px;
padding: 20px;
}
#music-tittle img{
background-color: black;
height: 90px;
width: 90px;
border-radius: 60%;
}
#download-APP{
margin-top: 40px;
width:100%;
height: 40px;
opacity: 0.8;
}
#music-foot{
text-align: center;
margin-bottom: 40px;
}
.blur {
filter: url(#blur); /* FireFox, Chrome, Opera */
background-position: center;
background-size: cover;
width: 130%;
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
filter: progid:(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
#disc{
background-image: url(img/);
background-size: 100% 100%;
/*height: 300px;
width: 300px;*/
margin-bottom: 40px;
}
#disc img{
height: 55%;
width: 55%;
border-radius: 60%;
margin-top: 22.5%;
}
#music-play{
height: 50px;
margin: 0px 20px;
}
#play{/*音乐播放按钮*/
height: 30px;
width: 30px;
}
#music-play>div{
float: left;
}
#progress{
width: 65%;
height: 30px;
padding: 10px;
}
#music-time{
padding: 5px;
}
</style>
<script type="text/javascript">
$(function(){
//设置disc的样式
function setdisc(){
var hei=$(window).width();
$("#disc").css({
'height': hei*0.8,
'width': hei*0.8
});
}
$("#play").click(function(){
var music = ("music");
if(){
();
$("#play img").attr('src','img/');
}else{
();
$("#play img").attr('src','img/');
}
})
function time(){
setInterval(function(){
var time1=parseInt();/*音乐的当前时间*/
var time2=parseInt();/*音乐的总时间*/
var time11=parseInt(time1/60)+":"+time1%60;
var time22=parseInt(time2/60)+":"+time2%60;
var jing=time1/time2*100+"%";
$(".progress div").css("width",jing);
$("#time1").text(time11);
$("#time2").text(time22);
//alert(time1+" "+time2);
},1000);
}
time();
if($("#music").played)
{
var time1=$("#music").currentTime;/*音乐的当前时间*/
var time2=$("#music").duration;/*音乐的总时间*/
$("#time1").text(time1);
$("#time2").text(time2);
//alert(time1+" "+time2);
}
else
//alert("pause");
setdisc();
if(('#reloaded')==-1){
=+"#reloaded";
();
}
})
</script>
<script type="text/javascript">
$(function(){
xuanzhuan();//头像旋转
/*获取url中的参数*/
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = (1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
// 这样调用：
var headImageUrl=getQueryString("headImageUrl");//头像
var imageUrl=getQueryString("imageUrl");//专辑头（转盘）
var userName=getQueryString("userName");//作者姓名
var musicName=getQueryString("musicName");//歌曲名
var dataUrl=getQueryString("dataUrl");//歌曲
/*获取url中的*/
function xuanzhuan(){/*作者头像一直旋转*/
var count=0;
var time=setInterval(function(){
count+=1;
var c="rotate("+parseInt(count)+"deg)";
$("#disc img").css('transform',c);
},100);
}/*作者头像一直旋转*/
$("#download-APP button").mousedown(function(){/*更改下载按钮的透明度*/
$(this).css('opacity','1');
})
/*设置作者名和歌曲名*/
change();
function change(){
//$("#media-body").find('h4').text(musicName);
//$("#media-body").find('span').text(userName);
//$("#headImageUrl").attr('src',headImageUrl);
//$("#imageUrl").attr('src',imageUrl);
// $("audio").attr('src',dataUrl);
//http://127.0.0.1:8020/music/?musicName=南山南&userName=刘德华
}
})
</script>
</head>
<body>
<img src="/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=32c015eaf6039245b5b8e94ceffdceb7/" class="blur navbar-fixed-top" />
<div class="navbar-fixed-top">
</div>
<div class="navbar-fixed-top"><!--头像、名称放置在这里-->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/" alt="...">
</a>
</div>
<div class="media-body" style="padding: 10px;">
<h4 class="media-heading" style="padding: 10px;">Media heading</h4>
<span id="" style="padding: 10px;">作者 </span>
</div>
</div>
</div><!--头像、名称放置在这里-->
<div style="margin: 150px 0;">
</div>
<div class="navbar-fixed-bottom"><!--音乐滚动条放置-->
<div ><!--存放碟片，头像转动-->
<!--<div >-->
<img src="img/"/>
<!--</div>-->
</div>
<div ><!--音乐控制组件-->
<div ><img src="img/"/></div>
<div >
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>
</div>
<div ><span >12</span>/<span >34</span></div>
</div><!--音乐控制组件-->
<audio controls="controls" autoplay="" loop="loop" preload="auto">
你的浏览器不支持audio标签
<source src="img/1.mp3" type='audio/mp3' />
</audio>
<div >
<div style="float: left;margin-left: 30px;"><img style="height: 40px;width: 40px;margin-right: 20px;" src="img/" alt="" />汇泉音乐</div>
<div style="float: right;margin-right: 30px;"><a href=""><button class="btn btn-primary" style="margin-right: 0px;">下载app</button></a></div>
</div>
</div><!--音乐滚动条放置-->
</body>
</html>
