网页上面嵌入录音插件,可以录音,播放

转载 2017年01月03日 18:51:51
转载至:http://varyu.com/notes/293.html

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

第一个是在第二个的基础上扩展出来的,使用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. }

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

相关文章推荐

Java+FlashWavRecorder实现网页录音并上传

【前言】 肯定有需求要网页录音,而且要上传,这奇葩需求, 然后找到了FlashWavRecorder, 地址:https://github.com/cykod/FlashWavRecorder 【...
  • uikoo9
  • uikoo9
  • 2014-09-18 15:16
  • 19355

html5 record 录音实例 使用websocket

原文:http://www.jsjtt.com/webkaifa/html5/2013-08-28/34.html
  • Joyhen
  • Joyhen
  • 2014-04-26 01:57
  • 24710

Html5网页录音,js录音mp3

Html5网页录音,js录音mp3

Flash的网页MP3录音控件

网页录音这个需求并不罕见,为了节省网络资源和服务器存储资源,在用户体验许可的情况下,可以在浏览器端把音频压缩成mp3再上传服务器。以前这样的工作用flash或silverlight等客户端控件完成,未...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)