前端练手--网页音频播放器

最新推荐文章于 2024-07-10 15:25:37 发布

andrewlee88123

最新推荐文章于 2024-07-10 15:25:37 发布

阅读量309

点赞数

文章标签：前端 java 数据库 ViewUI

原文链接：http://www.cnblogs.com/pacific0437/archive/2013/02/19/2917754.html

版权

前端工程师一枚，工作不到一年，工作内容略杂，从数据库取数据到页面呈现全部我一个人一条龙服务。。。

从今天开始利用晚上时间多做一些前端练习，因为发现自己手写代码能力太差，如果给我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>