使用FlashWavRecorder实现浏览器录制wav音频和上传音频文件，兼容IE8以上浏览器
- 2019 年 11 月 1 日
- 筆記
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eguid_1/article/details/53183256
前言：本项目基于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、最终效果
