网页录音属于常见需求,为了节省网络带宽和服务器存储资源,在用户体验许可的情况下,在浏览器端把音频压缩成mp3再上传服务器。以前用flash或silverlight等客户端控件实现,未来可以使用html5的navigator.getUserMedia()方法配合lame.js等mp3算法脚本库来实现,配合audio标签还可以实现回放功能。
随着时间的发展,后续的浏览器会越来越兼容html5,使用getUserMedia()配合lame.js是个符合未来前景的方案。可是谷歌浏览器从版本57开始,为了安全限制了getUserMedia()方法只能在https环境中调用,这就导致了lame.js无法从http环境下在谷歌浏览器上使用。如果不能使用https,还需要使用flash方案。
目前网络上有不少相关的资料:
flashwavrecorder(https://github.com/michalstocki/FlashWavRecorder),灵活性非常高的flash的录音控件,实现在网页录音并可以自定义提交按钮样式,但没有实现音频的mp3压缩。
shinemp3encorder(https://github.com/kikko/Shine-MP3-Encoder-on-AS3-Alchemy),flash可用的mp3编码类库,但只是工具类库,不提供录音提交等功能。
现在需要整合它们。
找教程学了actionscript,了解flexsdk,airsdk,flashbuilder等相关的知识后,下载了flashbuilder试用版动手。因为没有actionscript实践操作经验的积累,过程中遇到很多诸如ShineMp3Encoder不工作、操作15秒超时、用户不点按钮不能执行上传动作等问题,但细心分析问题原因并从网上搜解决方案后解决了它们。
通读flashwavrecorder的代码并了解shinemp3encorder的用法后,决定在录音结束时为切入点,增加一个音频压缩过程和几个mp3转码相关的事件,最终成功完成了需要的功能。阅读flashwavrecorder的源码发现有个未使用到的OBSERVING_MP3ENCODE_PROGRESS事件,看来flashwavrecorder的作者考虑过mp3压缩功能,但可能因为版权等原因没完成。
整合出的flashmp3encorder分享给大家。我只是改造整合flashwavrecorder和shinemp3encorder,以个人作品的名义发github不合适。而且flashwavrecorder也没有成熟到去全球开源站分享的程度,现只在分享。
源码及编译结果下载链接:
也可以邮件到wantalwy#163.com要代码。
控件具体使用可以参考index.template.html,方法说明和一些需要注意的事项在代码注释中。
示例代码中开启了监听回传功能,如果不想总是回传麦克风的声音,可以把index.template.html文件第110行的FWRecorder.setLoopBack(true)改成FWRecorder.setLoopBack(false)。