【注意】
最新版本请看这里:http://uikoo9.com/blog/detail/java-flashwavrecorder
【前言】
肯定有需求要网页录音,而且要上传,这奇葩需求,
然后找到了FlashWavRecorder,
地址:https://github.com/cykod/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:
<script type="text/javascript" src="${base}/js/_record/js/swfobject.js"></script>
<script type="text/javascript" src="${base}/js/_record/js/recorder.js"></script>
<script type="text/javascript" src="${base}/js/_record/js/main.js"></script>
<link rel="stylesheet" href="${base}/js/_record/style.css">
当然前提要有jquery,这里就没有写了
2.页面:
精简了一些东西,重新布局了,代码:
<div class="qcontainer">
<div id="recorder-audio" class="control_panel idle">
<button class="record_button" οnclick="FWRecorder.record('audio', 'audio.wav');" title="Record">
<img src="${base}/js/_record/images/record.png" alt="Record" />
</button>
<button class="stop_recording_button" οnclick="FWRecorder.stopRecording('audio');" title="Stop Recording">
<img src="${base}/js/_record/images/stop.png" alt="Stop Recording" />
</button>
<button class="play_button" οnclick="FWRecorder.playBack('audio');" title="Play">
<img src="${base}/js/_record/images/play.png" alt="Play" />
</button>
<button class="pause_playing_button" οnclick="FWRecorder.pausePlayBack('audio');" title="Pause Playing">
<img src="${base}/js/_record/images/pause.png" alt="Pause Playing" />
</button>
<button class="stop_playing_button" οnclick="FWRecorder.stopPlayBack();" title="Stop Playing">
<img src="${base}/js/_record/images/stop.png" alt="Stop Playing" />
</button>
<div class="level"></div>
</div>
<div class="details">
<button class="show_level" οnclick="FWRecorder.observeLevel();">显示声波</button>
<button class="hide_level" οnclick="FWRecorder.stopObservingLevel();" style="display: none;">隐藏声波</button>
<button class="show_settings" οnclick="microphonePermission()">麦克风权限</button>
<span id="save_button" style="display:inline-block;">
<span id="flashcontent">
<p>您的浏览器必须支持Javascript,而且安装了Flash播放器!</p>
</span>
</span>
<div id="status">录音状态。。。</div>
<div>录音时长:<span id="duration"></span></div>
<div>上传状态:<span id="upload_status"></span></div>
<input type="hidden" id="qrecordId"/>
</div>
<form id="uploadForm" name="uploadForm" action="${base}/record/upload">
<input name="authenticity_token" value="xxxxx" type="hidden">
<input name="upload_file[parent_id]" value="1" type="hidden">
<input name="format" value="json" type="hidden">
</form>
</div>
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<FileItem> 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需要替换为上面的页面。
地址:http://download.csdn.net/detail/uikoo9/7937419