【注意】
【前言】
肯定有需求要网页录音，并且要上传。这奇葩需求。
然后找到了FlashWavRecorder，
1.下载
在上面的地址下载zip解压之后，目录里面有个index.html。打开之后这效果：
2.录音权限
必须保证你的电脑有麦克风，也就是说台式机你得有耳麦。笔记本保证麦克风没有坏掉。
有麦克风的情况下，点击上面的红框内的button。然后选择同意。例如以下：
可能有的人会说我点了没反应，或者firebug报错啊，神。插上麦克风。。
3.录音
之后你就能够试的录音了，自己研究吧，挺简单。
【上传】
1.上传
flash录音非常好实现，比較难的是录音后直接上传录音文件到server，
FlashWavRecorder做到了，
看了下as源代码。大概是js调用swf中的方法。
swf会把录音放到内存，然后编码，然后传到server，
server就能够保存了。
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须要替换为上面的页面。
