Java+FlashWavRecorder实现网页录音并上传【新】 作于2015-05-19

【注意】

本文对应的代码已经开源到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.项目结构,详见下图:

QQ截图20150519224342.png

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,一些路径需要修改

需要修改的代码:

QQ截图20150519224850.png

请将base替换为自己项目地址,或者使用相对路径


【录音上传】

1.部署到tomcat后,访问地址打开页面,如下:

QQ截图20150519225015.png

中间灰色部分是录音上传部分

2.点击录音按钮,允许录音权限,这个时候切记确保录音设备畅通(耳麦或麦克风)

1.png

3.再次点击录音按钮进行录音,此时可以点击显示声波,查看是否有声波改变

2.png

4.录音完毕后,点击停止按钮,并点击上传按钮

3.png

ok,提示saved就表示成功

5.查看上传音频,本例直接上传到d:

4.png

5.png


【一些问题】

1.上传代码

本例使用jfinal上传,如果使用其他框架,那请修改上传代码,

不会写上传代码请百度之,不要再问上传代码怎么写了,这是基础。

2.java示例

本例是java写的,其实也就上传部分不同,如果使用其他语言,

进需要修改html页面中form的action路径和对应的上传代码。

3.切记录音设备开通

如果使用耳麦切记使用耳麦。。不要只用耳机,耳机不具备录音功能,

如果使用笔记本,切记保证可以正常录音。



http://uikoo9.com/
更多精彩内容

求打赏(长按图片即可识别)~
微信 捐助列表:http://uikoo9.com/donate/

阅读:10480