前端练手--网页音频播放器
前端工程师一枚,工作不到一年,工作内容略杂,从数据库取数据到页面呈现全部我一个人一条龙服务。。。
从今天开始利用晚上时间多做一些前端练习,因为发现自己手写代码能力太差,如果给我api,再加上我保存的以前两个项目的工程代码,自己能完成很多任务。
但如果只有一个notepad++ 让我完全手写前端代码,漏洞百出啊,各种 fields 写成field,Ext.Ajax.request写成了 Ext.Ajax.Request,Ext.grid.Panel又写错成了Ext.grid.panel。
所以多通过练习提高一下自己手写代码能力吧。
今天做个网页音频播放器,这下听歌的时候就不会被领导从后面看到了,戴着耳机肯定以为我在支撑业务, 饿 其实是开玩笑了,其实自从SHE 第十张专辑play之后 我就几乎不听歌了。
我先写的后台读取本地文件代码,大体上是这样,暂时还没写一些容错代码(例如文件找不到之类的)
public File[] getFileList(String str){ File a = new File(str); File[] sd = a.listFiles(); return sd; }
然后是在servlet里面拼接成符合格式要求的字符串,再往前台发阿发
File[] musicFiles = getFile.getFileList("D:\\workspace\\Local_Player\\WebContent\\MusicFile"); String respstr = "["; String whethercomma = ", "; for (int i = 0; i < musicFiles.length; i++) { if (i == musicFiles.length - 1) { whethercomma = ""; } String as = musicFiles[i].getPath(); respstr = respstr + "["+i+","+"'" + as + "']" + whethercomma; } respstr = respstr + "]";
来请求就发过去了,注意下面代码必须要加try catch
resp.getWriter().write(respstr);
前台代码如下 引入必要的JS文件,我用的EXTJS 毕竟EXT项目做得多一些 此外也会JQuery的
<script type="text/javascript" src="extjs-4.1.1/ext-all-debug.js"></script> <script type="text/javascript" src="js/musicplay.js"></script>
页面部分
<div id = "playlist"></div> <audio id = "player" src = "" controls = "true" loop = "true"></audio>
musicplay.js 代码如下
Ext.onReady(function() { var MusicStore = new Ext.data.SimpleStore({ fields : ["no", "address"], data : [] }) var playlistpanel = Ext.create("Ext.grid.Panel", { renderTo : Ext.get("playlist"), title : 'playList', height : 200, width : 600, store : MusicStore, columns : [{ text : 'No', dataIndex : 'no' }, { text : '歌曲路径', dataIndex : 'address', width : 500 }], listeners : { itemdblclick : function(v, record, item, index, e, eOpts) { var a = record.data.address.split(/\\/); //console.log(a.pop()); var musicAddress = 'MusicFile/'+a.pop(); console.log('现在播放'+musicAddress) Ext.get("player")["dom"]['src']=musicAddress; document.getElementById('player').play() } } }) Ext.Ajax.request({ url : "musicplay", async : false, type : 'ajax', reader : { type : 'array' }, callback : function(options, success, response) { console.log("回来了"); var s = response.responseText; MusicStore.loadData(Ext.JSON.decode(s.replace( /\\/g, '\\\\'))); } }); })
web.xml里面配一下servlet就基本OK了
<servlet> <display-name>musicplay</display-name> <servlet-name>MusicPlayerServlet</servlet-name> <servlet-class>servlet.MusicPlayerServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>MusicPlayerServlet</servlet-name> <url-pattern>/musicplay</url-pattern> </servlet-mapping>
调试的时候遇到servlet返回前台数据中文乱码的问题,又加了个filter,java那部分代码就不贴了
<filter> <display-name>EncodingFilter</display-name> <filter-name>EncodingFilter</filter-name> <filter-class>filter.EncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter>
基本完成了 打开页面 会通过Ajax 向后台发送数据,后台根据文件夹里面的音频文件返回播放列表,页面双击播放列表里面的歌曲名就能播放了
于是乎一个奇丑无比的页面播放器暂时完工了。
目前来讲还有以下问题
1后台代码逻辑完善,各种try catch加上
2前台页面美化,更好看一点
3多浏览器兼容性 目前就谷歌可以放 手头只有低版本火狐 和IE 这两个都放不了
4中文歌曲还是放不了,浏览器找不到,这个我估计明天肯定能解决
明晚完善!!