java 网页录音并上传_Java+FlashWavRecorder实现网页录音并上传

【注意】

【前言】

肯定有需求要网页录音，而且要上传，这奇葩需求，

然后找到了FlashWavRecorder，

【原始版本】

1.下载

在上面的地址下载zip解压之后，文件夹里面有个index.html，打开之后这效果：

2.录音权限

必须保证你的电脑有麦克风，也就是说台式机你得有耳麦，笔记本保证麦克风没有坏掉，

有麦克风的情况下，点击上面的红框内的按钮，然后选择允许，如下：

可能有的人会说我点了没反应，或者firebug报错啊，神，插上麦克风。。

3.录音

之后你就可以试的录音了，自己研究吧，挺简单。

【上传】

1.上传

flash录音很好实现，比较难的是录音后直接上传录音文件到服务器，

FlashWavRecorder做到了，

看了下as源码，大概是js调用swf中的方法，

swf会把录音放到内存，然后编码，然后传到服务器，

服务器就可以保存了。

2.php

这个插件是好，对于用java程序员来说，as代码，php代码都是坑啊，

幸好as代码和java类似，还能看懂点，php以前也看过点。

【改装后版本】

1.引入js

在页面head中引入一下js和css：

当然前提要有jquery，这里就没有写了

2.页面：

精简了一些东西，重新布局了，代码：

显示声波

隐藏声波

麦克风权限

您的浏览器必须支持Javascript,而且安装了Flash播放器！

录音状态。。。

录音时长：

上传状态：

3.效果

4.后台代码

使用的springmvc(这个没啥关系)，和apache的fileupload组件，代码：

package com.bfsuol.common.controller;

import java.io.File;

import java.util.Iterator;

import org.apache.commons.fileupload.FileItem;

import org.apache.commons.fileupload.disk.DiskFileItemFactory;

import org.apache.commons.fileupload.servlet.ServletFileUpload;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.bfsuolcomponents.file.entity.FileManager;

import com.bfsuolcomponents.file.service.FileManagerService;

import com.bfsuolframework.core.controller.SpringControllerSupport;

import com.bfsuolframework.core.utils.DateTimeUtils;

import com.bfsuolframework.core.utils.FileUtils;

/**

* 录音以及上传controller

* @author qiaowenbin

*/

@Controller

@RequestMapping("/record")

public class RecordController extends SpringControllerSupport{

@Autowired

private FileManagerService fileManagerService;

@RequestMapping("/upload")

public @ResponseBody String upload() throws Exception{

Long id = null;

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

while (iter.hasNext()) {

FileItem item = iter.next();

if(!item.isFormField()){

id = processUploadedFile(item);

}

}

return "{\"saved\": 1,\"id\": "+id+"}";

}

private Long processUploadedFile(FileItem item) throws Exception{

// 上传

String uploadPath = FileUtils.getUploadRealPath("files/records") + FileUtils.getDatePath()+"/";

FileUtils.createFolder(uploadPath);

String fileFullPath = getFileValidName(uploadPath, item.getName(), true, true);

item.write(new File(fileFullPath));

// 保存

FileManager fileManager = new FileManager();

fileManager.setFilePath(fileFullPath);

fileManager.setUrl(FileUtils.realPath2Path(fileFullPath));

fileManager.setFileRealname(FileUtils.getFileName(fileFullPath));

fileManager.setFileTitle(item.getName());

return fileManagerService.save(fileManager);

}

private String getFileValidName(String filePath, String fileName,boolean format, boolean overwrite ){

String fileValidName;

if(format){

String fileExt = FileUtils.getFileExt(fileName);

fileValidName = filePath + DateTimeUtils.getCurrentDateTimeString("yyyyMMddHHmmss") + (fileExt==null?"":"."+fileExt);

}else{

fileValidName = filePath + fileName;

}

if( !overwrite ){

fileValidName = FileUtils.getValidFileName(fileValidName);

}

return fileValidName;

}

}

5.讲解

大概的意思就是上传文件，将文件相关信息保存到数据库，返回保存后的id，

里面有些代码是没有用的，你可以自己修改。

【页面多次调用】

1.奇葩

怎么会有这需求，

解决办法，每次都弹出来就好了，

2.封装

可以自己封装一个方法，弹出后录音上传完毕后返回id。

【代码】

原始文件有修改了一些js和页面内容，打个zip包，

有需要的可以下载。

zip只打包了前端的，后台摘出来太麻烦了，自己看上面的代码吧，

index.html需要替换为上面的页面。