网页录音解决方案 FlashWavRecorder For Website API 关键地方已注释

【原创文章】，转载请注明作者博客：www.92ez.com或博客园地址

作者：KBdancer

前段时间由于项目需要，客户需求中有一条是要实现WEB端的录音功能，起初想到的是HTML5实现，经过几轮百度之后无果。

PS：谷歌时不时被墙，非必要时请不要使用百度搜索。

谷歌几番后发现一个实现录音的flash+js的插件，之前一直纠结的难题终 于解决。这款插件可以高度定制，自带众多与js交互的接口，（本人对action script实在是不怎么了解）能够轻松的使用js来控制录音的开始与停止和回放。对此款插件熟悉之后偶然在github上发现此插件的作者公开的API 文档，写的很详细。

话不多说，奉上API文档，虽然是英文的，但是应该不会影响阅读，关键的几个 方法我都已经用中文注释了（大概的意思翻译了一下，如有不对请告诉我）。先暂时把API文档发出，后面有时间的时候整理下DEMO也上传一下，希望能够帮 助需要的猿们（因为之前找了好久没找到好的解决方案，费了好多时间，猿们找资料都很辛苦）。

有图有真相：

Simple Microphone Recorder

Use flash to record audio data from a microphone. Converts the audio data to a WAV file. Uploads the WAV file to the server. The WAV file is POSTed as a multpart form-data request. Additional fields can be added to the request, such as authenticity_token, (response) formart, etc... The flash recorder creates serveral external interfaces. This allows the recorder to be controlled through javascript. Only the save button must be clicked inside the flash application, see Upload and download require user interaction for more information.

Embedding the Recorder

<script>
  var appWidth = 24;
  var appHeight = 24;
  var flashvars = {'event_handler': 'microphone_recorder_events', 'upload_image': 'images/upload.png'};
  var params = {};
  var attributes = {'id': "recorderApp", 'name':  "recorderApp"};
  swfobject.embedSWF("recorder.swf", "flashcontent", appWidth, appHeight, "10.1.0", "", flashvars, params, attributes);
</script>

The event_handler is a javascript function that is called from the flash application. The first argument to the event_handler is always the name of the event as a string. The other arguments may vary depending on the event.

Flash vars

event_handler: javascript function called from the flash application

upload_image: image used as the save button

font_color: font color for the save text, default #0000EE

font_size: font size for the save text, default 12

save_text: text used for the save link, default Save

background_color: background color of the flash app, only used when using a save link

if upload_image failes recorder will use a save link instead

Flash Events

ready: recorder is ready for use

• width - save button's width
• height - save button's height

no_microphone_found: no microphone was found when trying to record

microphone_user_request: user needs to allow the recorder to access the microphone

microphone_connected: user allowed access to the microphone

• microphone - Microphone object from flash, can be used to get the name of the microphone, i.e. microphone.name

microphone_not_connected: user denied access to the microphone, at this point the recorder CAN NOT be used until the user reloads the page

recording: recording audio data from the microphone

• name - of the recording that was specified when record was called

recording_stopped: stopped recording audio data

• name - of the recording that was specified when record was called
• duration - of the recording as a floating point value in seconds

playing: playing back the recorded audio data

• name - of the recording that was specified when play was called

playback_started: useful for synchronizing playback with animation（注：用于同步回放与动画）

• name - of the recording that was specified when play was called
• latency - number of milliseconds before playback starts （在回放之前延迟多久）

stopped: stopped playing back the recorded audio data（注：停止播放录音 ）

• name - of the recording that was specified when play was called

save_pressed: save button was pressed in the recorder, good place to update the form data in the recorder（注：按下保存按钮）

• name - of the recording

saving: upload is in progress（注：正在上传 ）

• name - of the recording

saved: upload is complete（注：上传录音成功 ）

• name - of the recording
• response - from the server as a string, can use var data = jQuery.parseJSON(arguments[2]) if response is json

save_failed: the recorder failed to upload the audio data（注：保存失败 ）

• name - of the recording
• error - message as a string

save_progress: upload progress（注：上传进度）

• name - of the recording
• bytes_loaded - number of bytes uploaded
• bytes_total - number of bytes to upload

Recorder JS Interface

record: tells the recorder to record audio data from the microphone

• name - of the recording, basically a reference to the recording, use this name for playback
• filename - [optional] if saving the file on the server, this is the name of the file to save the WAV file as

will also stop recording if currently recording

playBack: tells the recorder to playback the recorded audio（注：回放录音）

• name - of the recording

will stop playback if called before playback ends

stopPlayBack: tells the recorder to stop recording or playback（注：停止回放）

duration: returns the duration of the recording（注：返回录音持续时间 ）

• name - of the recording

init: setup the recorder for saving recordings

（注：为保存录音做准备）

• url - upload url
• （注：上传的url地址）
• field_name - name of the form field for the WAV file
• （注：WAV文件在表单中的name）
• form_data - additional form data. Specified as an array of name/value pairs. ex: [{"name": 'authenticity_token', "value": "xxxx"}, {"name": "format", "value": "json"}]
• （注：表单数据 指定一个键值对 数组 ）

permit: show the permissions dialog for microphone access, make sure the flash application is large enough for the dialog box before calling this method. Must be at least 240x160.

（注：显示权限许可对话框 大小至少 240X160）

show: show the save button（注：显示保存按钮）

hide: hide the save button（注：隐藏保存按钮）

update: update the form data

• form_data - additional form data, in jQuery you can use $('#upload_form').serializeArray()
• （注：表单数据  额外的表单数据）

configure: configure microphone settings

• rate - at which the microphone captures sound, in kHz. default is 22. Currently we only support 44 and 22.
• （注：比特率  麦克风捕获声音的默认比特率为22kHz ，目前只支持44kHz和22kHz）
• gain - the amount by which the microphone should multiply the signal before transmitting it. default is 100
• （注：增益  麦克风在传输之前增加信号的总量，默认是100）
• silence_level - amount of sound required to activate the microphone and dispatch the activity event. default is 0
• （注：静音等级  此设置是设置麦克风在音频高于特定值时才激活录音，有利于节约带宽 默认是0，表示长连接）
• silence_timeout - number of milliseconds between the time the microphone stops detecting sound and the time the activity event is dispatched. default is 4000
• （注：静音时间  描述静音多久之后自动激活麦克风录音 默认4000）

setUseEchoSuppression: use echo suppression     （注：使用回声抑制）

• yes_no

setLoopBack: routes audio captured by a microphone to the local speakers （注：本地扬声器播放从麦克风捕获到的音频）

• yes_no

getMicrophone: returns the microphone object    （注：返回麦克风对象）