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 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> 48 <label><input name="mode" type="radio" value="3" />列表播放</label> 49 <label><input name="mode" type="radio" value="2" />单曲循环</label> 50 <label><input name="mode" type="radio" value="1" />单曲播放</label> 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> ${status.index + 1} 59 <input onclick="control(this);" class="control" name="control" type="image"
src="${basePath}/static/img/icon_startmusic.png">
60 <span class="musicName">${music.name}</span>
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="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>