【注意】

最新版本号请看这里: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+FlashWavRecorder实现网页录音并上传的更多相关文章

  1. 微信录音文件上传到服务器以及amr转化成MP3格式

    微信公众号音频接口开发 根据业务需求,我们可能需要将微信录音保存到服务器,而通过微信上传语音接口上传到微信服务器的语音文件的有效期只有3天,所以需要将文件下载到我们自己的服务器. 上传语音接口 wx. ...

  2. 微信录音文件上传到服务器以及amr转化成MP3格式,linux上转换简单方法

    微信公众号音频接口开发 根据业务需求,我们可能需要将微信录音保存到服务器,而通过微信上传语音接口上传到微信服务器的语音文件的有效期只有3天,所以需要将文件下载到我们自己的服务器. 上传语音接口 wx. ...

  3. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

  4. java~gradle构建公用包并上传到仓库

    java~gradle构建公用包并上传到仓库 我们一般会把公用的代码放在一个包里,然后其它 项目可以直接使用,就像你使用第三方包一样! 仓库 存储包的地方叫做仓库,一般可以分为本地仓库和远程仓库,本地 ...

  5. java~gradle构建公用包并上传到仓库~使用私有仓库的包

    在新的项目里使用仓库的包 上一讲中我们说了java~gradle构建公用包并上传到仓库,如何发布公用的非自启动类的包到私有仓库,而这一讲我们将学习如何使用这些包,就像我们使用spring框架里的功能包 ...

  6. Java使用Commons-FileUpload组件实现文件上传最佳方案

    学习的目标 使用commons-fileupload实现文件上传 使用commons-fileupload封装文件上传工具类   什么是commons-fileupload? The CommonsF ...

  7. 如何上传网站程序(文件浏览器上传网页、FileZilla上传网站程序)

    问题场景: 网页制作完成后,程序需上传至虚拟主机. 注意事项: Windows系统的主机请将全部网页文件直接上传到FTP根目录,即 / . Linux系统的主机请将全部网页文件直接上传到 /htdoc ...

  8. Java进阶学习:将文件上传到七牛云中

    Java进阶学习:将文件上传到七牛云中 通过本文,我们将讲述如何利用七牛云官方SDK,将我们的本地文件传输到其存储空间中去. JavaSDK:https://developer.qiniu.com/k ...

  9. xctf-i-got-id-200(perl网页文件+ARGV上传造成任意文件读取)

    打开url发现有三个链接,点进去都是.pl文件,且只有files可以上传文件. .pl文件都是用perl编写的网页文件 这里上传了又将文件的内容全部打印出来,那么猜想后台应该用了param()函数. ...

随机推荐

  1. hdu 4544 优先队列+贪心

    题意:最近,减肥失败的湫湫为发泄心中郁闷,在玩一个消灭免子的游戏.游戏规则很简单,用箭杀死免子即可.箭是一种消耗品,已知有M种不同类型的箭可以选择,并且每种箭都会对兔子造成伤害,对应的伤害值分别为Di ...

  2. tyvj 1031 热浪 最短路

    热浪 Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://tyvj.cn/p/1031 Description 德克萨斯纯朴的民眾们这个夏天正在遭受 ...

  3. UVALive 4863 Balloons 贪心/费用流

    There will be several test cases in the input. Each test case will begin with a line with three inte ...

  4. ROS知识(7)----ROS命令中的单引号`和‘的混淆问题

    ROS命令中的单引号`和‘的区别,比如使用`单引号,以下的命令是正确的: $ rosrun rviz rviz -d `rospack find rbx1_nav`/sim.rviz 而使用‘单引号, ...

  5. 如何设置Android手机的sqlite3命令环境

    1.在PC环境下启动一个模拟器(不是手机) 2.查看模拟器 /systen/xbin是否有sqlite3命令 adb shell cd /system/xbin ls 3.把模拟器 /system/x ...

  6. 向USB设备发送SCSI命令

    http://bbs3.driverdevelop.com/simple/?t84347.html { BOOL status = ; DWORD accessMode = , shareMode = ...

  7. SET XACT_ABORT ON 数据库事务

    转载:http://www.cnblogs.com/rob0121/articles/2320932.html SET XACT_ABORT ON SET XACT_ABORT ON分为两种: 1.总 ...

  8. C#程序集系列03,引用多个module

    我们经常在项目中引用程序集.通常情况下,一个程序集包含一个module,但一个程序集也可以包含多个module.本篇就来体验:在一个可以被编译成.exe可执行文件的.cs文件中引用多个module. ...

  9. MVC无限级分类01,分层架构,引入缓存,完成领域模型与视图模型的映射

    本系列将使用zTree来创建.编辑关于品牌.车系.车型的无限级分类,使用datagrid显示,源码在github.先上最终效果: datagrid显示所有记录.分页,提供添加.修改.删除按钮,并提供简 ...

  10. “System.InvalidOperationException”类型的未经处理的异常在 ESRI.ArcGIS.AxControls.dll 中发生

    问题描述: 新手们进行ArcGIS ArcObject开发时经常会遇到各种十分古怪的问题,比如下面的这个问题: “System.InvalidOperationException”类型的未经处理的异常 ...