网页录音

http://blog.csdn.net/hardgirls/article/details/53997001

 

 

网页在线录音并上传

前段时间接了一个外包项目，有一个功能是网页在线录音并上传云服务器的需求，之前没有接触过，想着Google了一下找个demo改改；
找到三个，基本能满足需求：

• https://github.com/uikoo9/recorder-online-upload
• https://github.com/michalstocki/FlashWavRecorder
• https://github.com/mattdiamond/Recorderjs

第一个是在第二个的基础上扩展出来的，使用flash模块实现录音功能；第一个已经实现了录音并上传到服务器的功能，但是有个问题是录音中杂音太大，鉴于自身技术水平不支持优化源码，所以基本是被嫌弃了；
第三个是使用 HTML5 的 Audio API 实现的，如果不考虑 ie 的话，是非常推荐的；

以上是对三个录音插件的简单说明，我的需求是能够兼容低版本浏览器，实现录音后上传服务器并获取音频地址；

经过一番 Google，算是找到一个满足需求的：https://github.com/jwagener-soundcloud/recorder.js
这个插件基于 swfObject.js，低版本浏览器中使用 flash 实现录音功能，在高版本支持 HTML5 的浏览器中使用 Audio 实现；简直 perfect；同时它还封装好了上传功能，支持上传到服务器和 SoundCloud；

recorder.js 源码，集成了swfObject.js，封装了初始化、录音开始、录音停止、录音播放、录音上传等方法；插件有提供 demo，基本用法可以参考 demo 了解使用，就不多说了；

---

废话这么多，说一下我的需求：

• 网页在线录音，并上传到 upyun；
• 录音开始，同时执行倒计时（倒计时结束录音结束）；
• 录音结束，上传录音；
• 上传录音完成，执行方法进入下一个录音场景；
• 所有录音场景结束，展示录音列表并播放；
• 兼容低版本浏览器；

1. // 初始化
2. Recorder.initialize({
3. swfSrc:"../recorder.swf"
4. });
5. // 开始录音
6. function record(callback){
7. Recorder.record({
8. start:function(){
9. callback && callback();
10. },
11. progress:function(milliseconds){
12. //document.getElementById("time").innerHTML = timecode(milliseconds);
13. }
14. });
15. }
16. // 上传模块
17. var recordArr =[];// 因为最后需要展示音频列表，需要一个全局数组用于存储upyun返回的音频url
18. function upload(callback){
19. // 定义音频文件名
20. var fileName = $.cookie("TOEFL_TOKEN")?"login"+newDate().getTime():"nologin"+newDate().getTime();
21. // 获取upyun配置参数，参考upyun的form_api：http://docs.upyun.com/api/form_api/
22. // 这里先上传音频文件名至服务器端，服务端根据文件名生成对应的policy和signature返回客户端
23. $.ajax({
24. type:"GET",
25. url: xm.baseURL +"/mkTpo/file/"+ fileName +".wav/posts.action",
26. dataType :"json",
27. success:function(data){
28. // 获取upyun_api参数
29. var expiration = data.expiration,// 时间戳
30. saveKey = data["save-key"],// 保存路径
31. bucket = data.bucket,// 空间名
32. policy = data.poily,// policy
33. signature = data.signature;// signature
34. // 插件封装方法，注：该方法中的注释可能导致程序报错，需删除
35. Recorder.upload({
36. method:"POST",
37. url:"http://v0.api.upyun.com/universe1",// 录音上传url：upyun_api基本域名+空间名
38. audioParam:"file",// 上传upyun时，这个参数值固定为file，相当于表单提交中的<input type="file">
39. params:{// 这里填写获取的upyun_api参数，获取upyun的上传权限
40. "expiration": expiration,
41. "save-key": saveKey,
42. "bucket": bucket,
43. "policy": policy,
44. "signature": signature
45. },
46. success:function(responseText){// 上传成功之后upyun会返回音频文件的相关信息
47. var data = JSON.parse(responseText);
48. recordArr.push(data.url);// 将录音音频的url追加到数组
49. callback && callback();// 上传完成执行方法
50. }
51. });
52. },
53. error:function(XMLHttpRequest, textStatus, errorThrown){
54. console.log("XMLHttpRequest.status: "+XMLHttpRequest.status);
55. console.log("XMLHttpRequest.readyState: "+XMLHttpRequest.readyState);
56. console.log("textStatus: "+ textStatus);
57. }
58. });
59. }

所有录音场景结束之后，对 recordArr 数组遍历输出，并插入到结果展示页中；
至于音频播放，那是播放器的事，项目中用到的是 jplayer [中文网]播放器；