【注意】

【前言】

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

然后找到了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.页面：

精简了一些东西，又一次布局了，代码：

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须要替换为上面的页面。