Flash的网页MP3录音控件
2017-03-08 16:14
127 查看
网页录音这个需求并不罕见,为了节省网络资源和服务器存储资源,在用户体验许可的情况下,可以在浏览器端把音频压缩成mp3再上传服务器。以前这样的工作用flash或silverlight等客户端控件完成,未来可以使用html5的navigator.getUserMedia()方法配合lame.js等mp3算法脚本库来实现,再配合audio标签还可以实现回放功能。
本来不想折腾flash了,因为随着时间的发展,后续的浏览器会越来越兼容html5,使用getUserMedia()配合lame.js是个符合未来前景的方案。可是突然传过来噩耗,谷歌浏览器从版本57开始,为了安全对getUserMedia()做了限制,只允许这个方法在https环境中调用,这就导致了lame.js无法从http环境下在谷歌浏览器上使用。这太愁人,本来html5目前还没完全成熟,谷歌浏览器又来了这一手,还是暂且放一放audio控件和lame.js,再找找老将flash出马。
目前网络上有不少相关的资料,但并没完整的解决方案。
比如:
flashwavrecorder(https://github.com/michalstocki/FlashWavRecorder),这是个灵活性非常高的flash的录音控件,实现在网页录音并可以自定义提交按钮样式,但是并没有实现音频的mp3压缩。
shinemp3encorder(https://github.com/kikko/Shine-MP3-Encoder-on-AS3-Alchemy),这个是flash可用的mp3编码类库,但只是一个工具类库,不提供录音提交等功能。
有了这两个东西,把它们整合一下不就齐了。
虽然我没用过actionscript,但我会用C\C++,并做过不少C#和java的项目,对C族的面向对象编程语言有些了解;并且我还用过silverlight,写过不少javascript,对flash类似的单线程异步模式也有些了解。虽说没自信独立完成一个新的的actionscript项目,但找个现成的项目在已有的基础上比葫芦画瓢添些内容应该还是能做到的。
花了一天找教程,看了看actionscript语法,并了解了flexsdk,airsdk,flashbuilder等相关的知识,然后就下载了个试用版的flashbuidler开始动手了。因为没有actionscript实践操作经验的积累,过程中自然遇到各种问题,诸如ShineMp3Encoder不工作、操作15秒超时、用户不点按钮不能执行上传动作等等等,遇到问题后就根据以前的开发经验分析问题原因并从网上搜解决方案。
通读了flashwavrecorder的代码,并从网上查了shinemp3encorder的用法和经验,尝试了几种做法,一路上大坑小坑,掉进去又爬出来。最终经过思考后,决定在录音结束时为切入点,增加一个音频压缩过程,并增加几个mp3转码相关的事件。最终成功完成了需要的功能。阅读flashwavrecorder的源码过程中发现中源码中有个未使用到的OBSERVING_MP3ENCODE_PROGRESS事件,看来flashwavrecorder的作者考虑过加入mp3压缩功能,但不知为什么没完成。现在我给他收尾了。
既然成功整合出了flashmp3encorder,就分享给大家。考虑到我只是改造整合flashwavrecorder和shinemp3encorder,所以这个算不上我的作品,以个人的名义发github不合适。而且flashwavrecorder本身还有使用细节上的问题,我又是现学现做actionscript对项目进行的修改,程序也没有成熟到去全球开源站分享的程度。干脆还是放csdn上,csdn的资源站还比较稳定,至少我几年前上传的东西到现在还能下载。
源码及编译结果下载链接:
http://download.csdn.net/detail/wantalcs/9774068
具体的使用说明可以参考源码里的index.template.html,我把方法说明和一些需要注意的事项都以注释的方式写代码中了。
本来不想折腾flash了,因为随着时间的发展,后续的浏览器会越来越兼容html5,使用getUserMedia()配合lame.js是个符合未来前景的方案。可是突然传过来噩耗,谷歌浏览器从版本57开始,为了安全对getUserMedia()做了限制,只允许这个方法在https环境中调用,这就导致了lame.js无法从http环境下在谷歌浏览器上使用。这太愁人,本来html5目前还没完全成熟,谷歌浏览器又来了这一手,还是暂且放一放audio控件和lame.js,再找找老将flash出马。
目前网络上有不少相关的资料,但并没完整的解决方案。
比如:
flashwavrecorder(https://github.com/michalstocki/FlashWavRecorder),这是个灵活性非常高的flash的录音控件,实现在网页录音并可以自定义提交按钮样式,但是并没有实现音频的mp3压缩。
shinemp3encorder(https://github.com/kikko/Shine-MP3-Encoder-on-AS3-Alchemy),这个是flash可用的mp3编码类库,但只是一个工具类库,不提供录音提交等功能。
有了这两个东西,把它们整合一下不就齐了。
虽然我没用过actionscript,但我会用C\C++,并做过不少C#和java的项目,对C族的面向对象编程语言有些了解;并且我还用过silverlight,写过不少javascript,对flash类似的单线程异步模式也有些了解。虽说没自信独立完成一个新的的actionscript项目,但找个现成的项目在已有的基础上比葫芦画瓢添些内容应该还是能做到的。
花了一天找教程,看了看actionscript语法,并了解了flexsdk,airsdk,flashbuilder等相关的知识,然后就下载了个试用版的flashbuidler开始动手了。因为没有actionscript实践操作经验的积累,过程中自然遇到各种问题,诸如ShineMp3Encoder不工作、操作15秒超时、用户不点按钮不能执行上传动作等等等,遇到问题后就根据以前的开发经验分析问题原因并从网上搜解决方案。
通读了flashwavrecorder的代码,并从网上查了shinemp3encorder的用法和经验,尝试了几种做法,一路上大坑小坑,掉进去又爬出来。最终经过思考后,决定在录音结束时为切入点,增加一个音频压缩过程,并增加几个mp3转码相关的事件。最终成功完成了需要的功能。阅读flashwavrecorder的源码过程中发现中源码中有个未使用到的OBSERVING_MP3ENCODE_PROGRESS事件,看来flashwavrecorder的作者考虑过加入mp3压缩功能,但不知为什么没完成。现在我给他收尾了。
既然成功整合出了flashmp3encorder,就分享给大家。考虑到我只是改造整合flashwavrecorder和shinemp3encorder,所以这个算不上我的作品,以个人的名义发github不合适。而且flashwavrecorder本身还有使用细节上的问题,我又是现学现做actionscript对项目进行的修改,程序也没有成熟到去全球开源站分享的程度。干脆还是放csdn上,csdn的资源站还比较稳定,至少我几年前上传的东西到现在还能下载。
源码及编译结果下载链接:
http://download.csdn.net/detail/wantalcs/9774068
具体的使用说明可以参考源码里的index.template.html,我把方法说明和一些需要注意的事项都以注释的方式写代码中了。
相关文章推荐
- 在网页设计中给网页插入flash动画的方法
- 在网页中加入Flash的代码
- 浏览网页时谷歌一直提示“Adobe Flash Player 插件已被屏蔽”
- 网页中插入flash的三则技巧
- 网页中插入透明Flash的方法和技巧
- flash学习笔记:网页游戏老板键的设置。
- 网页播放flash无声音解决方案
- 在网页中插入Flash的代码
- xp 网页 flash swf 无法调用 摄像头 问题解决
- Flash设置全屏后,放到网页中显示不正常
- 网页中层或菜单被Flash挡住的解决办法
- 网页复制,使用clipboard.js复制任意内容到粘贴板.不需要通过flash
- 网页中实现flash在线拍照
- 网页中的动态flash
- 单纯用Flash制作网页焦点图片转换
- 经典网页设计:20个与众不同的 Flash 网站设计作品
- [转]在线拍照---网页flash启动不了摄像头的解决方法
- 积少成多Flash(8) - ActionScript 3.0 网页之获取参数,JavaScript与ActionScript之间的相互调用
- 在网页中实现透明flash的代码
- 【网页设计】分享E-WebTemplates国外精美网页模板(FLASH+PSD源文件+HTML)