源码仓库 : GitHub | Gitee 更多Demo : Demo列表(可编辑) | H5 vue
QuickStart : QuickStart.html (Copy即用,更适合入门学习) 老版本 : 切换到老版本测试
类型 :
提示 : -
比特率 : kbps,越大音质越好
采样率 : hz,越大细节越丰富
kbps 测试音质用的,除比特率外其他参数可调整
WaveView SurferView Histogram1 H...2 H...3
ms自动停止录音,定时录音
,发送间隔ms
切换麦克风 : 从未请求过录音权限时,可能无法正常拉取设备列表,打开一次录音后可尝试
noiseSuppression : 降噪配置开关
echoCancellation : 回声消除配置开关
autoGainControl : 自动增益配置开关
以上参数设置后需重新打开录音;均为set中的audioTrackSet高级配置,会直接传递给浏览器的getUserMedia方法,不同浏览器的支持程度不同,并不一定会生效
Destroy : Destroy会关闭所有的全局资源,包括AudioContext,当录音出现问题时,可尝试Destroy一下重试
启用AudioWorklet :
音频采集连接方式:未启用时使用ScriptProcessor(默认),启用时使用AudioWorklet;通过设置Recorder.ConnectEnableWorklet=true启用。
已知:AudioWorklet在一定条件下会导致某些浏览器崩溃 测试 (坑已填好)。
变速变调 : 实时变速变调控制选项,可以边录边修改,同一时间应该只控制一个,否则叠加作用;请填写0.1-2.0的数字,1.0为不调整,当然超过2.0也是可以的(需手动输入)
Pitch: 男声女声,变调不变速(会说话的汤姆猫)
Speed: 慢放快放,变速不变调(快放慢放),由于会增减PCM数据,实时处理时本功能需要禁用丢失补偿
Rate: 缓重尖锐,变速变调,由于会增减PCM数据,实时处理时本功能需要禁用丢失补偿
Volume: 调低调高,调整音量
处理缓冲:ms 0ms1000ms,控制缓冲大小减少转换引入的杂音,0不缓冲
播放反馈: 不播放 实时播放反馈
挡住!防止滑块被误触
丢失补偿 :
issues#51如果没有进行补偿,录音时设备偶尔出现很卡的情况下(CPU被其他程序大量占用),浏览器采集到的音频是断断续续的,导致10秒的录音可能就只返回了5秒的数据量,这个时候最终编码得到的音频时长明显变短,播放时的效果就像快放一样。未禁用时会在卡顿时自动补偿静默音频,消除了快放效果,但由于丢失的音频已被静默数据代替,听起来就是数据本身的断断续续的效果。在设备不卡时录音没有此问题。
DTMF电话按键信号 : DTMF解码、编码扩展,可以方便的处理电话拨号按键信号,用于:电话录音软解,软电话实时提取DTMF按键信号、实时发送DTMF按键信号等。下面拨号盘可在录音时往录音文件中添加按键信息:
123A
456B
789C
*0#D
测试App : IOS Demo App:下载源码 自行编译 ,Android Demo App:下载APK (40kb,删除.zip后缀,源码)
iframe兼容性 : 测试在iframe里面请求录音权限的兼容性。最佳实践应该是让window.top(不适用于跨域)去加载Recorder,iframe里面使用top.Recorder;此测试未遵照此最佳实践,以模拟跨域iframe和同域下的复杂真实情况,H5录音在跨域时未设置相应策略权限永远是拒绝的
音乐播放测试 : Audio对录音的影响测试(issues#34);IOS Safari如果未开始过录音并且播放了音乐,然后后续录音将会有问题;再现方法(test apple developer forums):刷新页面后首先先播放音乐,然后开始测试录音,会发现波形显示掉帧或者保持直线。另测试浏览器对音频的支持情况。
视频播放测试 : Video对录音的影响测试(issues#84);IOS Safari可能出现先播放视频,然后再开始录音,会自动播放视频的声音,但并未再现。
浏览器环境情况 :
AudioContext:${"AudioContext" in window}
webkitAudioContext:${"webkitAudioContext" in window}
mediaDevices:${!!navigator.mediaDevices}
mediaDevices.getUserMedia:${!!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)}
navigator.getUserMedia:${!!navigator.getUserMedia}
navigator.webkitGetUserMedia:${!!navigator.webkitGetUserMedia}
AudioContext.scriptProcessor:{{
						"createScriptProcessor" in (Recorder.Ctx||{})
					 || "createJavaScriptNode" in (Recorder.Ctx||{})
					}}
AudioContext.audioWorklet:{{"audioWorklet" in (Recorder.Ctx||{})}}
AudioWorkletNode:${"AudioWorkletNode" in window}

URL:${location.href.replace(/#.+/g,"")}
UA:${navigator.userAgent}

Recorder库修改时间(有可能修改了忘改):${Recorder.LM}
本页面修改时间(有可能修改了忘改):${PageLM}
问题自检 : 录音时注意观察灰色区域是否有绿色音量跳动,没有绿色跳动说明Recorder没有获取到声音数据。如果测试发现mp3没有声音,可以试一下wav格式,如果wav格式有声音,说明内置lamejs mp3编码器有问题。如果都没有,下载下来播放看看有没有。下载下来也没有声音可以反馈一下。
如果浏览器不能正常录音,并且不确定是不是这个库的问题,可以到 assets/ztext_collab-project_videojs-record.html 试一下。