【注意】
【说明】
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.项目结构,详见下图:
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页面
核心代码:
显示声波
隐藏声波
麦克风权限
注意:
需要将上面的${base}替换为自己的项目路径
需要将form中的action修改为对应的controller路径
4.main.js
作用:
相当于是一个js,一些路径需要修改
需要修改的代码:
请将base替换为自己项目地址,或者使用相对路径
【录音上传】
1.部署到tomcat后,访问地址打开页面,如下:
中间灰色部分是录音上传部分
2.点击录音按钮,允许录音权限,这个时候切记确保录音设备畅通(耳麦或麦克风)
3.再次点击录音按钮进行录音,此时可以点击显示声波,查看是否有声波改变
4.录音完毕后,点击停止按钮,并点击上传按钮
ok,提示saved就表示成功
5.查看上传音频,本例直接上传到d:
【一些问题】
1.上传代码
本例使用jfinal上传,如果使用其他框架,那请修改上传代码,
不会写上传代码请百度之,不要再问上传代码怎么写了,这是基础。
2.java示例
本例是java写的,其实也就上传部分不同,如果使用其他语言,
进需要修改html页面中form的action路径和对应的上传代码。
3.切记录音设备开通
如果使用耳麦切记使用耳麦。。不要只用耳机,耳机不具备录音功能,
如果使用笔记本,切记保证可以正常录音。
阅读:15839次