html一个音乐播放界面

来源：互联网发布：梦幻西游手游知乎编辑：程序博客网时间：2024/06/12 11:55
<!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/jquery.min.js" type="text/javascript" charset="utf-8"></script>    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>     <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.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.svg#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:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */}#disc{background-image: url(img/bg4.png);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 = document.getElementById("music");             if(music.paused){         music.play();         $("#play img").attr('src','img/pause.png');            }else{         music.pause();                     $("#play img").attr('src','img/play.png');            }    })              function time(){              setInterval(function(){              var time1=parseInt(music.currentTime);/*音乐的当前时间*/            var time2=parseInt(music.duration);/*音乐的总时间*/            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(location.href.indexOf('#reloaded')==-1){    location.href=location.href+"#reloaded";    location.reload();         }   })   </script>    <script type="text/javascript">    $(function(){    xuanzhuan();//头像旋转        /*获取url中的参数*/    function getQueryString(name) {    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');    var r = window.location.search.substr(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/2.html?musicName=南山南&userName=刘德华            }                })    </script></head><body><img src="http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=32c015eaf6039245b5b8e94ceffdceb7/d788d43f8794a4c28c10040c04f41bd5ad6e39e2.jpg" class="blur navbar-fixed-top" /><div id="music-contain" class="navbar-fixed-top">    </div>    <div id="music-tittle" class="navbar-fixed-top"><!--头像、名称放置在这里-->         <div class="media">  <div class="media-left">    <a href="#">      <img class="media-object" id="headImageUrl" src="img/bgimg2.jpg" alt="...">    </a>  </div>  <div class="media-body" id="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 id="music-body" style="margin: 150px 0;">          </div>            <div id="music-foot" class="navbar-fixed-bottom"><!--音乐滚动条放置-->     <div id="disc"><!--存放碟片，头像转动-->     <!--<div id="music-pho">-->     <img id="imageUrl" src="img/bgimg2.jpg"/>     <!--</div>-->     </div>     <div id="music-play"><!--音乐控制组件-->     <div id="play"><img src="img/pause.png"/></div>     <div id="progress">     <div class="progress">  <div id=" progress-tiao" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:  0%">  </div></div>     </div>     <div id="music-time"><span id="time1">12</span>/<span id="time2">34</span></div>     </div><!--音乐控制组件-->    <audio id="music" controls="controls" autoplay="" loop="loop" preload="auto">      你的浏览器不支持audio标签      <source src="img/1.mp3" type='audio/mp3' />     </audio>            <div id="download-APP">            <div style="float: left;margin-left: 30px;"><img style="height: 40px;width: 40px;margin-right: 20px;" src="img/f.gif" alt="" />汇泉音乐</div>            <div style="float: right;margin-right: 30px;"><a href="http://www.baidu.com"><button class="btn btn-primary" style="margin-right: 0px;">下载app</button></a></div>            </div>     </div><!--音乐滚动条放置--></body></html>
阅读全文
0 0