前言:本项目基于github开源插件实现,该插件使用flash实现,兼容IE8以上浏览器

感谢michalstocki的分享该项目,github项目地址:https://github.com/michalstocki/FlashWavRecorder

博主修改后的项目下载地址:http://download.csdn.net/detail/eguid_1/9684124

1、要提交的表单(如果只需要上传文件,可以不需要)

<form id="uploadForm" name="uploadForm" action="audio/send" method="post">
<span>设备id:</span><input name="deviceId" value="0000007"><!-- 设备id -->
<span>音频格式:</span><input name="audio_format" value="wav"><!-- 音频格式 -->
</form>

2、修改表单名和上传的音频文件名

这两个参数用来修改上传的表单和要上传的已经录制好的音频文件名,与后台的文件接收的参数名一致

FWRecorder.uploadFormId = "#uploadForm";//要上传的表单

 FWRecorder.uploadFieldName = "audio_file";//上传文件的参数名

$(function () {
var $uploadStatus = $('#upload_status'),
$showLevelButton = $('.show_level'),
$hideLevelButton = $('.hide_level'),
$level = $('.control_panel .level'); var CLASS_CONTROLS = "control_panel";
var CLASS_RECORDING = "recording";
var CLASS_PLAYBACK_READY = "playback_ready";
var CLASS_PLAYING = "playing";
var CLASS_PLAYBACK_PAUSED = "playback_paused"; // Embedding flash object --------------------------------------------------------------------------------------------- setUpFormOptions();
var appWidth = 24;
var appHeight = 24;
var flashvars = {'upload_image': 'audioRecorder/upload.png'};
var params = {};
var attributes = {'id': "recorderApp", 'name': "recorderApp"};
swfobject.embedSWF("audioRecorder/recorder.swf", "flashcontent", appWidth, appHeight, "11.0.0", "", flashvars, params, attributes); // Handling FWR events ------------------------------------------------------------------------------------------------ window.fwr_event_handler = function fwr_event_handler() {
$('#status').prepend("<div class=\"recorder-event\">" + arguments[0] + "</div>");
var name, $controls;
switch (arguments[0]) {
case "ready":
var width = parseInt(arguments[1]);
var height = parseInt(arguments[2]);
FWRecorder.uploadFormId = "#uploadForm";//要上传的表单
FWRecorder.uploadFieldName = "audio_file";//上传文件的参数名
FWRecorder.connect("recorderApp", 0);
FWRecorder.recorderOriginalWidth = width;
FWRecorder.recorderOriginalHeight = height;
$('.save_button').css({'width': width, 'height': height});
break; case "no_microphone_found":
break; case "microphone_user_request":
recorderEl().addClass("floating");
FWRecorder.showPermissionWindow();
break; case "microphone_connected":
FWRecorder.isReady = true;
$uploadStatus.css({'color': '#000'});
break; case "permission_panel_closed":
FWRecorder.defaultSize();
recorderEl().removeClass("floating");
break; case "microphone_activity":
$('#activity_level').text(arguments[1]);
break; case "recording":
name = arguments[1];
$controls = controlsEl(name);
FWRecorder.hide();
setControlsClass($controls, CLASS_RECORDING);
break; case "recording_stopped":
name = arguments[1];
$controls = controlsEl(name);
var duration = arguments[2];
FWRecorder.show();
setControlsClass($controls, CLASS_PLAYBACK_READY);
$('#duration').text(duration.toFixed(4) + " 秒");
break; case "microphone_level":
$level.css({width: arguments[1] * 50 + '%'});
break; case "observing_level":
$showLevelButton.hide();
$hideLevelButton.show();
break; case "observing_level_stopped":
$showLevelButton.show();
$hideLevelButton.hide();
$level.css({width: 0});
break; case "playing":
name = arguments[1];
$controls = controlsEl(name);
setControlsClass($controls, CLASS_PLAYING);
break; case "playback_started":
name = arguments[1];
var latency = arguments[2];
break; case "stopped":
name = arguments[1];
$controls = controlsEl(name);
setControlsClass($controls, CLASS_PLAYBACK_READY);
break; case "playing_paused":
name = arguments[1];
$controls = controlsEl(name);
setControlsClass($controls, CLASS_PLAYBACK_PAUSED);
break; case "save_pressed":
FWRecorder.updateForm();
break; case "saving":
name = arguments[1];
break; case "saved":
name = arguments[1];
var data = $.parseJSON(arguments[2]);
if (data.status) {
$('#upload_status').css({'color': '#0F0'}).text(name + " 上传成功");
} else {
$('#upload_status').css({'color': '#F00'}).text(name + " 上传失败");
}
break; case "save_failed":
name = arguments[1];
var errorMessage = arguments[2];
$uploadStatus.css({'color': '#F00'}).text(name + " 失败: " + errorMessage);
break; case "save_progress":
name = arguments[1];
var bytesLoaded = arguments[2];
var bytesTotal = arguments[3];
$uploadStatus.css({'color': '#000'}).text(name + " 进展: " + bytesLoaded + " / " + bytesTotal);
break;
}
}; // Helper functions --------------------------------------------------------------------------------------------------- function setUpFormOptions() {
var gain = $('#gain')[0];
var silenceLevel = $('#silenceLevel')[0];
for (var i = 0; i <= 100; i++) {
gain.options[gain.options.length] = new Option(100 - i);
silenceLevel.options[silenceLevel.options.length] = new Option(i);
}
} function setControlsClass($controls, className) {
$controls.attr('class', CLASS_CONTROLS + ' ' + className);
} function controlsEl(name) {
return $('#recorder-' + name);
} function recorderEl() {
return $('#recorderApp');
} // Button actions ----------------------------------------------------------------------------------------------------- window.microphonePermission = function () {
recorderEl().addClass("floating");
FWRecorder.showPermissionWindow({permanent: true});
}; window.configureMicrophone = function () {
if (!FWRecorder.isReady) {
return;
}
FWRecorder.configure($('#rate').val(), $('#gain').val(), $('#silenceLevel').val(), $('#silenceTimeout').val());
FWRecorder.setUseEchoSuppression($('#useEchoSuppression').is(":checked"));
FWRecorder.setLoopBack($('#loopBack').is(":checked"));
}; });

3、后台接收文件

接收前端三个参数:deviceId,audio_format,audio_file
audio_file就是音频文件
public int sendAudioData(@RequestParam(value = "deviceId") String deviceId,
@RequestParam(value = "audio_format") String audio_format, @RequestParam("audio_file") MultipartFile file) {
boolean ret=false;
File tFile = null;
System.out.println(audio_format + "," + deviceId);
String fileName=null;
// 判断文件是否为空
if (file != null && !file.isEmpty()&&(fileName=file.getName()+System.currentTimeMillis())!=null) {
String filePath = Util.getRootPath() + fileName + ".wav";
System.out.println("文件保存路径:" +filePath);
tFile = new File(filePath); try {
// 转存文件
file.transferTo(tFile);
ret=true;
} catch (Exception e) {
e.printStackTrace();
}
}
if(ret=true){
return 0;
}
return -1;
}

4、最终效果

使用FlashWavRecorder实现浏览器录制wav音频和上传音频文件,兼容IE8以上浏览器的更多相关文章

  1. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  2. placeholder兼容方法(兼容IE8以上浏览器)

    //placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...

  3. [转]python3之paramiko模块(基于ssh连接进行远程登录服务器执行命令和上传下载文件的功能)

    转自:https://www.cnblogs.com/zhangxinqi/p/8372774.html 阅读目录 1.paramiko模块介绍 2.paramiko的使用方法 回到顶部 1.para ...

  4. 背景图片background-size兼容ie8以下浏览器解决

    背景图片不够大,然后就想到用background-size:100%; 测试浏览器的时候发现ie8以下不兼容,图片会自动填充平铺过去,然后出现背景不好看的现象.解决方法: background-ima ...

  5. 浏览器关闭、刷新、关闭标签事件,兼容IE8,chrome,firefox

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  6. vue项目中兼容ie8以上浏览器的配置

    1.首先需要在根目录的index.html文件加入如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge& ...

  7. Django积木块三——静态文件和上传文件

    静态文件和上传的文件 # 静态文件 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), ) # ...

  8. Windows Phone 8初学者开发—第20部分:录制Wav音频文件

    原文 Windows Phone 8初学者开发—第20部分:录制Wav音频文件 原文地址:http://channel9.msdn.com/Series/Windows-Phone-8-Develop ...

  9. 多浏览器播放wav格式的音频文件

    html5的audio标签只在火狐下支持wav格式的音频播放,无法兼容IE和google , 使用audioplayer.js 基本上能支持大部分浏览器播放wav音频文件,经测试IE.火狐.googl ...

随机推荐

  1. iOS 2017年, 上传审核被拒绝.到奔溃

    2017年,苹果并没有因为新年的气氛而对CP们"网开一面".频繁锁榜.调整排名规则以及关键词覆盖算法--不断抛出的大动作,让CP们叫苦不迭.且从1月初开始,苹果还进一步加强了对应用 ...

  2. 详解Java反射机制

    反射是程序在运行状态下,动态的获取某个类的内部信息的一种操作.例如:类名,包名,所有属性的集合,所有方法的集合,构造方法的集合等.该操作发生在程序的运行时状态,所以编译器管不着有关反射的一些代码,通常 ...

  3. Oracle数据库时间类型悬疑案

    这次遇到的问题小Alan其实一年半前做证券行业项目就已经遇到过,但是一直没有去思考是什么原因导致的这样的悬疑案,悬疑案是什么呢?其实很简单,我想有不少童鞋都有用到Oracle数据库,情形是这样子的,这 ...

  4. Docker 打包 部署

    Docker 打包 部署 一贯的开场白,大家好: 开始学习Spring Boot ,同时也再学习 Maven 自动化构建.  项目的部署环境是 Linux 服务器,Docker容器. 之所以写这篇博客 ...

  5. 窝上课不听,how to learn C language easily(1)

    C language 学习心得 附:为啥起这么霸气侧漏,招大神们鄙视的标题,正如我在<C language>随笔的介绍中写的,这是一个写个妹纸们看的C language的文章.没错!!写这 ...

  6. 使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用:Task List

    最近我为我自己的应用开发框架Apworks设计了一套案例应用程序,并以Apache 2.0开源,开源地址是:https://github.com/daxnet/apworks-examples,目的是 ...

  7. IOS中的JSON数据的解析

    解析Json数据 //加载.json文件 NSString *path = [[NSBundle mainBundle]pathForResource:@"product.json" ...

  8. Struts2之 OGNL表达式和值栈

    技术分析之OGNL表达式概述(了解)        1. OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写        * 所谓对象图,即以任意 ...

  9. Linux下memcache的安装和启动测试

    memcache是一套分布式的高速缓存系统,MemCache的工作流程如下:先检查客户端的请求数据是否在memcached中,如有,直接把请求数据返回,不再对数据库进行任何操作:如果请求的数据不在me ...

  10. Python dict 按键和值排序

    python 字典(dict)的特点就是无序的,按照键(key)来提取相应值(value),如果我们需要字典按值排序的话,那可以用下面的方法来进行:1 下面的是按照value的值从大到小的顺序来排序. ...