前段時間接了一個外包專案，有一個功能是網頁線上錄音並上傳雲伺服器的需求，之前沒有接觸過，想著Google了一下找個demo改改；
找到三個，基本能滿足需求：

第一個是在第二個的基礎上擴展出來的，使用flash模組實現錄音功能；第一個已經實現了錄音並上傳到伺服器的功能，但是有個問題是錄音中雜音太大，鑑於自身技術水平不支援優化原始碼，所以基本是被嫌棄了；
第三個是使用 HTML5 的 Audio API 實現的，如果不考慮 ie 的話，是非常推薦的；

以上是對三個錄音外掛的簡單說明，我的需求是能夠相容低版本瀏覽器，實現錄音後上傳伺服器並獲取音訊地址；

經過一番 Google，算是找到一個滿足需求的：

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 [中文網]播放器；