前段时间接了一个外包项目，有一个功能是网页在线录音并上传云服务器的需求，之前没有接触过，想着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" + new Date().getTime() : "nologin" + new Date().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. }