java上传 flash_Java+FlashWavRecorder实现网页录音并上传【新】

【注意】

【说明】

1.在线录音并直接上传到服务器中

【使用】

1.运行

1.请下载本项目,并导入myeclipse中

2.跑起项目,访问http://localhost:8080/recorder-online-upload查看效果

2.定制

1.打开WEB-INF/view/index.html

2.只有两段html注释中的代码是需要的

3.将上面代码中的${base}替换成自己项目的路径

4.将上面代码中form的action替换成自己的上传文件处理action

5.将main.js中一些base路径替换为自己对应的路径

【详细说明】

1.项目结构,详见下图:

3f3d01479b3efc779d9e3a84d3a701a5.png

2.IndexController

作用:

处理上传文件的后台代码,本例使用jfinal上传,如果使用其他框架请自行修改

核心代码:/**

* 在线上传音频示例

* @throws Exception

*/

public void upload() throws Exception{

Iterator iter = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(getRequest()).iterator();

while (iter.hasNext()) {

FileItem item = iter.next();

if(!item.isFormField()){

// 保存文件,简单的保存到本地,可以自行修改

item.write(new File("d://" + item.getName()));

}

}

// 返回值,1是成功

renderJson("{\"saved\": 1}");

}

返回值:

如果上传成功,一定要返回一个saved为1的json,其他可以自定义。

3.index.html

作用:

上传的html页面

核心代码:

显示声波

隐藏声波

麦克风权限

最后的录音事件:ready
录音时长:
上传状态:

注意:

需要将上面的${base}替换为自己的项目路径

需要将form中的action修改为对应的controller路径

4.main.js

作用:

相当于是一个js,一些路径需要修改

需要修改的代码:

a89b4336df72473011d7b9a9fea9d496.png

请将base替换为自己项目地址,或者使用相对路径

【录音上传】

1.部署到tomcat后,访问地址打开页面,如下:

63fcfd293f2f623b6c54a62b34d2904f.png

中间灰色部分是录音上传部分

2.点击录音按钮,允许录音权限,这个时候切记确保录音设备畅通(耳麦或麦克风)

081ae5a2ee2be95f6448fb86fa7b1f3a.png

3.再次点击录音按钮进行录音,此时可以点击显示声波,查看是否有声波改变

5dd094939a1c5cca14e9c6e6326b9570.png

4.录音完毕后,点击停止按钮,并点击上传按钮

93ef4579d5ade587af733b44f738b5bb.png

ok,提示saved就表示成功

5.查看上传音频,本例直接上传到d:

33dde465e1716614f2d39e3372047ca9.png

27981db43bafd77ef1555384155bfc64.png

【一些问题】

1.上传代码

本例使用jfinal上传,如果使用其他框架,那请修改上传代码,

不会写上传代码请百度之,不要再问上传代码怎么写了,这是基础。

2.java示例

本例是java写的,其实也就上传部分不同,如果使用其他语言,

进需要修改html页面中form的action路径和对应的上传代码。

3.切记录音设备开通

如果使用耳麦切记使用耳麦。。不要只用耳机,耳机不具备录音功能,

如果使用笔记本,切记保证可以正常录音。

阅读:15839次

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值