Java+FlashWavRecorder实现网页录音并上传
【注意】
最新版本号请看这里:http://uikoo9.com/blog/detail/java-flashwavrecorder
【前言】
肯定有需求要网页录音,并且要上传。这奇葩需求。
然后找到了FlashWavRecorder,
地址:https://github.com/cykod/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:
<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" onclick="FWRecorder.record('audio', 'audio.wav');" title="Record"> <img src="${base}/js/_record/images/record.png" alt="Record" /> </button> <button class="stop_recording_button" onclick="FWRecorder.stopRecording('audio');" title="Stop Recording"> <img src="${base}/js/_record/images/stop.png" alt="Stop Recording" /> </button> <button class="play_button" onclick="FWRecorder.playBack('audio');" title="Play"> <img src="${base}/js/_record/images/play.png" alt="Play" /> </button> <button class="pause_playing_button" onclick="FWRecorder.pausePlayBack('audio');" title="Pause Playing"> <img src="${base}/js/_record/images/pause.png" alt="Pause Playing" /> </button> <button class="stop_playing_button" onclick="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" 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;"> <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
相关文章
- JAVA实现网页抓取(htmlunit)
- Docker for Java Developers
- 【JAVA】Eclipse中开启java和xml智能提示功能(图文,已解决!)
- Java内存溢出(OOM)异常完全指南
- Predicate和Consumer接口– Java 8中java.util.function包下的接口
- [转]Java使用Cipher类实现加密,包括DES,DES3,AES和RSA加密
- 【java细节】Java代码忽略https证书:No subject alternative names present
- JavaDemo——使用XStream在java对象与xml之间转换
- 设计模式java——外观模式
- Java - CentOS下JDK的安装教程(及JAVA_HOME配置、以jdk1.8为例)
- 【Java】java的内存浅析
- 【Java】怎么回答java垃圾回收机制
- Java并发编程:线程池的使用
- Java原子属性更新器AtomicReferenceFieldUpdater的使用
- 【原生JavaWeb】网页前端页面如何调用后端Java程序
- 史上最全Java多线程面试题及答案
- Error running 'dt-assets-monitor [clean]': Cannot run program "C:Program Files (x86)Javajdk1.8.0_73binjava.exe" (in directory "E:codedt-assets-monitor")
- Java学习---网页编辑器FCKeditor使用详解
- 深入理解Java虚拟机03--垃圾收集器与内存分配策略
- Java操作Mongodb 保存/读取java对象到/从mongodb
- 蓝桥杯VIP试题 之 基础练习 回形取数 - JAVA
- java项目异常监控_JAVA项目中的常用的异常处理情况总结