【注意】
本文对应的代码已经开源到github：https://github.com/uikoo9/recorder-online-upload
【说明】
1.在线录音并直接上传到服务器中
2.对FlashWavRecorder进行了改装，详见：https://github.com/cykod/FlashWavRecorder
【使用】
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<FileItem> 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页面
核心代码：
<script type="text/javascript" src="${base}/WUI/qrecord/js/swfobject.js"></script>
<script type="text/javascript" src="${base}/WUI/qrecord/js/recorder.js"></script>
<script type="text/javascript" src="${base}/WUI/qrecord/js/main.js"></script>
<link rel="stylesheet" href="${base}/WUI/qrecord/style.css">
<div class="qcontainer" id="myRecordDiv">
<div id="recorder-audio" class="control_panel idle">
<button class="record_button" onclick="FWRecorder.record('audio', 'audio.wav');" title="Record">
<img src="${base}/WUI/qrecord/images/record.png" alt="开始录音">
</button>
<button class="stop_recording_button" onclick="FWRecorder.stopRecording('audio');" title="Stop Recording">
<img src="${base}/WUI/qrecord/images/stop.png" alt="停止录音">
</button>
<button class="play_button" onclick="FWRecorder.playBack('audio');" title="Play">
<img src="${base}/WUI/qrecord/images/play.png" alt="播放">
</button>
<button class="pause_playing_button" onclick="FWRecorder.pausePlayBack('audio');" title="Pause Playing">
<img src="${base}/WUI/qrecord/images/pause.png" alt="暂停">
</button>
<button class="stop_playing_button" onclick="FWRecorder.stopPlayBack();" title="Stop Playing">
<img src="${base}/WUI/qrecord/images/stop.png" alt="停止">
</button>
<div class="level"></div>
</div>
<div class="details">
<button class="show_level" onclick="FWRecorder.observeLevel();">显示声波</button>
<button class="hide_level" onclick="FWRecorder.stopObservingLevel();" style="display: none;">隐藏声波</button>
<button class="show_settings" onclick="microphonePermission()">麦克风权限</button>
<span id="save_button" style="display:inline-block;">
<object data="${base}/WUI/qrecord//recorder.swf" name="recorderApp" id="recorderApp" type="application/x-shockwave-flash" height="24" width="24"><param value="upload_image=${base}/WUI/qrecord/images/upload.png" name="flashvars"></object>
</span>
<div id="status">最后的录音事件：ready</div>
<div>录音时长：<span id="duration"></span></div>
<div>上传状态：<span id="upload_status"></span></div>
<input value="" id="qrecordId" type="hidden">
</div>
<!-- 这个form的action写上传路径 -->
<form id="uploadForm" name="uploadForm" action="${base}/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>注意：
需要将上面的${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.切记录音设备开通
如果使用耳麦切记使用耳麦。。不要只用耳机，耳机不具备录音功能，
如果使用笔记本，切记保证可以正常录音。
http://uikoo9.com/
| 求打赏（长按图片即可识别）~ |
捐助列表：http://uikoo9.com/donate/
|