音乐播放页面控制

最新推荐文章于 2024-03-05 15:32:42 发布
转载最新推荐文章于 2024-03-05 15:32:42 发布 · 401 阅读
CC 4.0 BY-SA版权
原文链接：https://www.mk2048.com/blog/blog.php?id=hbk1a1k11jaa&title=%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E9%A1%B5%E9%9D%A2%E6%8E%A7%E5%88%B6
文章标签：
#web
前端专栏收录该内容
241 篇文章
订阅专栏
  1 <%@ page language="java" contentType="text/html; charset=utf-8"
  2     pageEncoding="utf-8"%>
  3 <%@ include file="base.jsp"%>
  4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5 <html>
  6 <head>
  7 <meta charset="utf-8">
  8     <link rel="stylesheet" href="${basePath}/static/css/bootstrap.min.css" />
  9     <link rel="stylesheet" href="${basePath}/static/css/public.css" />
 10     <style type="text/css">
 11         .playMusic{
 12             width: 80%;
 13             padding:0;
 14               margin: 50px 0 0 100px;
 15         }
 16         
 17         /* .sel_btn{
 18             height: 25px;
 19             line-height: 25px;
 20             padding: 0 11px;
 21             background: #02bafa;
 22             border: 1px #26bbdb solid;
 23             border-radius: 3px;
 24             color: #000;
 25             display: inline-block;
 26             text-decoration: none;
 27             font-size: 14px;
 28             outline: none;
 29         }
 30         .ch_cls{
 31             background: #e4e4e4;
 32         }
 33         #sel_btn1{
 34             text-decoration:none;
 35         } */
 36         
 37     </style>
 38     
 39     <script type="text/javascript" src="${basePath}/static/js/jquery-1.12.2.min.js" ></script>
 40     <script type="text/javascript" src="${basePath}/static/js/bootstrap.min.js" ></script>
 41     
 42 <title>音频管理</title>
 43 </head>
 44 <body>
 45     <div class="playMusic" >
 46         <div class="radio">
 47             <label>
　　　　　　　　　　　　<input name="mode" type="radio" checked="checked" value="4" />循环播放
　　　　　　　　　 </label>&nbsp;&nbsp;&nbsp;&nbsp;
 48             <label><input name="mode" type="radio" value="3" />列表播放</label>&nbsp;&nbsp;&nbsp;&nbsp;
 49             <label><input name="mode" type="radio" value="2" />单曲循环</label>&nbsp;&nbsp;&nbsp;&nbsp;
 50             <label><input name="mode" type="radio" value="1" />单曲播放</label>&nbsp;&nbsp;&nbsp;&nbsp;
 51         </div><br>
 52     
 53         <div>
 54             <ul>
 55                 <c:if test="${!empty musicList}">
 56                     <c:forEach items="${musicList}" var="music" varStatus="status">
 57                         <c:if test="${music.status=='2'}">
 58                             <li>&nbsp;&nbsp;${status.index   1}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 59                                 <input onclick="control(this);" class="control" name="control" type="image" 
　　　　　　　　　　　　　　　　　　　　　　　　　src="${basePath}/static/img/icon_startmusic.png">&nbsp;&nbsp;&nbsp;&nbsp; 

 60                                 <span class="musicName">${music.name}</span>&nbsp;&nbsp;&nbsp;&nbsp; 

 61                                 <input class="musicing" name="musicing" type="image" src="" value="">

 62                                 <input onclick="del(this);" class="del" name="del" type="image" align="right" 
　　　　　　　　　　　　　　　　　　　　　　　　　　src="${basePath}/static/img/icon_delectmusic.png">

 63                                 <div style="width:100%; height:2px;margin-top: 6px; margin-bottom: 9px; 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　border-top:2px solid #D1D1D1; clear:both;">
　　　　　　　　　　　　　　　　　　　　　</div>
 64                            </li>
 65                         </c:if>
 66                     </c:forEach>
 67                 </c:if>
 68             </ul>
 69         </div><br>
 70         <%-- 
　　　　　　　　　　<a class="sel_btn ch_cls" id="sel_btn1" href="${basePath}/user/toDevicePalystatus">设备播放状态</a>
　　　　　　 --%>
 71     </div>
 72     
 73     <script type="text/javascript">
 74     
 75         var flag = true;//未播放
 76         
 77         function getUrl(){
 78             return "${basePath}"
 79         }
 80         var dizhi = getUrl(); //获取地址
 81         
 82         //把所有歌曲显示成可播放模式
 83         function def(){
 84             var allLi = $("ul").children("li");//所有的allLi
 85             for(var i =0;i<allLi.length;i  ) {
 86                 var musicing = allLi.find(".musicing").attr('src');
 87                 var pathclose1 = "${basePath}/static/img/icon_startmusic.png"
 88                 allLi.find(".control").attr('src',pathclose1);
 89                 var pathclose2 = "";
 90                 allLi.find(".musicing").attr('src',pathclose2);
 91             }
 92         } 
 93         
 94         function control(e){
 95             var path1;//播放|暂停
 96             var path2;//未播放|播放中
 97             
 98             var play_status;//是否播放,1播放 2暂停
 99             var play_model;//播放模式,4循环播放 3列表播放 2单曲循环 1单曲播放
100             var play_music;//音乐名
101             
102             var isopen = $(e).parent("li").find(".musicing").attr('src');    //当前播放状态
103             if(isopen == ""){
104                 def();
105                 flag = true;
106             }
107             if(flag){
108                 //alert("播放");
109                 path1 = "${basePath}/static/img/icon_stopmusic.png"
110                 $(e).attr('src',path1);
111                 path2 = "${basePath}/static/img/icon_musicing.gif"
112                 $(e).parent("li").find(".musicing").attr('src',path2);
113                 flag = false;
114                 
115                 play_status = "1";//1播放
116                 play_model = $("input[name='mode']:checked").val();//播放模式
117                 play_music = $(e).parent("li").find(".musicName").text();//音乐名
118                 //console.info(play_status,play_model,play_music);
119                 //alert(play_music);
120                 $.ajax({  
121                     type:"post",  
122                     url:dizhi "/web/playMusic",  
123                     data:{"play_status":play_status,"play_model":play_model,"play_music":play_music},  
124                     dataType:"json",  
125                     success:function(data){  
126                         /* if(data.status){  
127                             alert("111");  
128                         }else{  
129                             alert("000");                    
130                         } */  
131                     }  
132                 });    
133                 
134             }else{
135                 //alert("暂停");
136                 path1 = "${basePath}/static/img/icon_startmusic.png"
137                 $(e).attr('src',path1);
138                 path2 = "";
139                 $(e).parent("li").find(".musicing").attr('src',path2);
140                 flag = true;
141                 
142                 play_status = "2"; //2暂停
143                 play_model = $("input[name='mode']:checked").val();//播放模式
144                 play_music = $(e).parent("li").find(".musicName").text();//音乐名
145                 //console.info(play_status,play_model,play_music);
146                 //alert(play_music);
147                 $.ajax({  
148                     type:"post",  
149                     url:dizhi "/web/playMusic",  
150                     data:{"play_status":play_status,"play_model":play_model,"play_music":play_music},  
151                     dataType:"json",  
152                     success:function(data){  
153                         /* if(data.status){  
154                             alert("111");  
155                         }else{  
156                             alert("000");                    
157                         } */  
158                     }  
159                 });  
160                 
161             }
162             
163         }    
164       
165        //删除歌曲
166         function del(e){
167             
168             //alert("确定删除！");
169              if(confirm('确定要删除该音乐吗?')){    //删除提示
170                      var play_music = $(e).parent("li").find(".musicName").text();//音乐名
171                     $.ajax({  
172                         type:"post",  
173                         url:dizhi "/web/deleteMusic",  
174                         data:{"name":play_music},  
175                         dataType:"json",  
176                         success:function(data){  
177                             if(data.status == "0"){  
178                                 //alert("111"); 
179                                  $(e).parent("li").remove();//前台显示删除当前li  
180                             }else{  
181                                 alert("删除失败！");                    
182                             }  
183                         }  
184                     });
185              }
186              
187         }
188         
189     </script>
190     
191 </body>
192 </html>