Html5实现的音乐播放器

实现效果如下：

这是一个单页应用，主要是用到音乐网站的公共接口（这里是用到百度的公共接口：http://apistore.baidu.com/apiworks/servicedetail/1020.html）

代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3    <head>
  4       <title></title>
  5       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6        <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  7     <style>
  8         *{
  9             margin:0;
 10             padding:0;
 11         }
 12         body{
 13             background-color: #f0f0f0;
 14             background-image: url("imgs/bg3.jpg") !important;
 15             background-repeat: no-repeat;
 16             background-attachment: fixed
 17         }
 18         #list{
 19             margin-top: 20%;
 20         }
 21         .music{
 22             position: relative;
 23             height:3em;
 24             line-height:20px;
 25             width:85%;
 26             margin-top:2px;
 27             box-shadow: 5px 5px 5px #888888;
 28             background-color:beige;
 29             border-radius:4px;
 30             padding-left:10px;
 31             cursor: pointer;
 32             margin-left: 5.5%;
 33         }
 34         .music:hover{
 35             top: 2px;
 36             background-color: lightsalmon;
 37         }
 38         #search{
 39             position: fixed;
 40             background-color: white;
 41             width: 75%;
 42             height: 2.5em;
 43             line-height: 2.5em;
 44             padding-left: 1em;
 45             border: 1px solid forestgreen;
 46             margin-top: 1em;
 47             margin-left: 4.5%;
 48             box-shadow: 0px 5px 5px #888888;
 49             z-index: 2;
 50             top: .1% !important;
 51         }
 52         #search_name{
 53             border: 0px solid white;
 54             vertical-align: middle;
 55         }
 56         .search_img{
 57             position: relative;
 58             display: table;
 59             width: 2.5em;
 60             height: 2.5em;
 61             border:1px solid forestgreen;
 62             border-top-right-radius: 100%;
 63             border-bottom-right-radius: 100%;
 64             left: 100%;
 65             top: -2.6em;
 66             background-image: url("imgs/search.png");
 67             background-repeat: no-repeat;
 68             background-position: center;
 69             box-shadow: 5px 5px 5px #888888;
 70             background-color: forestgreen;
 71         }
 72         .head_img{
 73             height: 2.5em;
 74             top: .25em;
 75             position: relative;
 76             -webkit-border-radius: 50%;
 77             -moz-border-radius: 50%;
 78             border-radius: 50%;
 79         }
 80         .music_con {
 81             display: inline-block;
 82             margin-left: 1em;
 83             font-size: 9pt;
 84             font-family: 雅黑;
 85         }
 86         #footer{
 87             width: 100%;
 88             height: 4rem;
 89             background: palevioletred;
 90             position: fixed;
 91             bottom: 0px;
 92         }
 93 
 94         .f1{
 95             width: 7rem;
 96             height: 7rem;
 97             background-color: #d8dee6;
 98             border-radius: 100%;
 99             position: relative;
100             top: -3.5rem;
101             left: 1rem;
102             display: inline-block;
103         }
104         .f11{
105             background-size: 100%;
106             background-repeat: no-repeat;
107             background-image: url("imgs/dmxh.jpg");
108             animation:a 10s linear infinite;
109             -webkit-animation:a 10s linear infinite;
110             animation-play-state:running;
111         }
112         .f1>div{
113             position: absolute;
114             width: 100px;
115             background-color: greenyellow;
116             top: 50%;
117             margin-top: -50px;
118             left: 50%;
119             margin-left: -50px;
120             height: 100px;
121             -webkit-border-radius: 100%;
122             -moz-border-radius: 100%;
123             border-radius: 100%;
124         }
125         .f2{
126             display: inline-block;
127             width: 60%;
128             height: 100%;
129             margin-left: 7%;
130             position: absolute;
131             top:0%;
132         }
133         .bt{
134             position: relative;
135             top: 27.5%;
136             height:45%
137         }
138         .bt1{
139             left: 15%;
140         }
141         .bt2{
142             left: 25%;
143         }
144         .bt3{
145             left: 35%;
146         }
147         @keyframes change
148         {
149             from{transform:rotate(0deg);}
150             to{transform:rotate(360deg);}
151         }
152 
153         @-webkit-keyframes change
154         {
155             from{-webkit-transform:rotate(0deg);}
156             to{-webkit-transform:rotate(360deg);}
157         }
158 
159     </style>
160    </head>
161    <body>
162            <div id="search">
163             <input type="text" id="search_name">
164             <span class="search_img" onclick="search();"></span>
165         </div>
166         <div id="list"></div>
167         <div id="footer">
168             <div class="f1">
169                 <div class="f11">
170                 </div>
171             </div>
172             <div class="f2">
173                 <img src="imgs/zt.png" class="bt bt1" >
174                 <img src="imgs/bf.png" class="bt bt2" flag="bf">
175                 <img src="imgs/sy.png" class="bt bt3" flag="sy">
176             </div>
177         </div>
178 
179 
180         <audio id="ms" src="">您的浏览器暂不支持Avdio</audio>
181 
182         
183    </body>
184    <script src="js/jquery.js"></script>
185    <script>
186     function search(){
187         var name = $('#search_name').val();
188         var s = encodeURI(name);
189         $.ajax({
190             url:'http://apis.baidu.com/geekery/music/query?s='+s+'&size=10&page=1',
191             type:'GET',
192             dataType:'json',
193             headers:{
194                 apikey:'3188a4c805f4e0efb1993b92fa946fc5'
195             },
196             success:function(data){
197                 $("#list").empty();
198                 $.each(data.data.data,function(i,n){
199                     var c = n.filename.split('-');
200                     $("#list").append("<div class='music' hash='"+n.hash+"' head=''><img src='imgs/head1.png' class='"+n.hash+" head_img'/><div class='music_con'><span>"+c[0]+"</span><br><span>"+c[1]+"</span></div></div>");
201                     $.ajax({
202                         url:'http://apis.baidu.com/geekery/music/singer?name='+encodeURI(n.singername),
203                         type:'GET',
204                         dataType:'json',
205                         headers:{
206                             apikey:'3188a4c805f4e0efb1993b92fa946fc5'
207                         },
208                         success:function(d){
209                             var head = d.data.image;
210                             $("."+n.hash+"").attr("src",head);
211                             $(".music[hash='"+ n.hash+"']").attr("head",head);
212                         }
213                     });
214                 });
215                 
216                 $('.music').click(function(){
217                     var hash = $(this).attr("hash");
218                     var my = this;
219                     $.ajax({
220                         url:'http://apis.baidu.com/geekery/music/playinfo?hash='+hash,
221                         type:'GET',
222                         dataType:'json',
223                         headers:{
224                             apikey:'3188a4c805f4e0efb1993b92fa946fc5'
225                         },
226                         success:function(data){
227                             var head = $(my).attr("head");
228                             $('.f11').css("background-image","url("+head+")");
229                             var url = data.data.url;
230                             $("#ms").attr("src",url);
231                             $(".bt2").attr("flag","bf");
232                             $(".bt2").click();
233                             $(".f11").css("animation","change 10s linear infinite");
234                             $(".f11").css("-webkit-animation","change 10s linear infinite");
235                             ms.play();
236                         }
237                     });
238                 });
239             },
240             error:function(){
241                 alert('获取音乐列表失败');
242             }
243         });
244     }
245     ms.addEventListener('ended',function(){
246         alert('结束');
247     });
248 
249     $('.bt1').click(function(){
250            //分享
251     });
252     $('.bt2').click(function(){
253         //播放
254         var flag = $(this).attr("flag");
255         if(flag=='bf'){
256             $(this).attr("src","imgs/zt.png");
257             $(this).attr("flag","zt");
258             $(".f11").css("animation","change 10s linear infinite");
259             $(".f11").css("-webkit-animation","change 10s linear infinite");
260             $(".f11").css("animation-play-state","running");
261             ms.play();
262         }else{
263             $(this).attr("src","imgs/bf.png");
264             $(this).attr("flag","bf");
265             $(".f11").css("animation-play-state","paused");
266             ms.pause();
267         }
268     });
269     $('.bt3').click(function(){
270         //声音
271         var flag = $(this).attr("flag");
272         if(flag=='sy'){//点击静音
273             $(this).attr("src","imgs/jy.png");
274             $(this).attr("flag","jy");
275             ms.muted = true;
276         }else{//点击打开声音
277             $(this).attr("src","imgs/sy.png");
278             $(this).attr("flag","sy");
279             ms.muted = false;
280         }
281     });
282    </script>
283 </html>
View Code

如果有喜欢的可以看一下

posted @ 2016-08-27 15:40  暗夜心慌方  阅读(370)  评论(0)    收藏  举报