网页在线录音并上传

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

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

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

经过一番 Google,算是找到一个满足需求的:https://github.com/jwagener-soundcloud/recorder.js
这个插件基于 swfObject.js,使用 flash 实现录音功能,同时它还封装好了上传功能,支持上传到服务器和 SoundCloud;

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


废话这么多,说一下我的需求:

  • 网页在线录音,并上传到 upyun;
  • 录音开始,同时执行倒计时(倒计时结束录音结束);
  • 录音结束,上传录音;
  • 上传录音完成,执行方法进入下一个录音场景;
  • 所有录音场景结束,展示录音列表并播放;
  • 兼容低版本浏览器;
// 初始化
Recorder.initialize({
    swfSrc: "../recorder.swf"
});
// 开始录音
function record(callback){
    Recorder.record({
        start: function(){
            callback && callback();
        },
        progress: function(milliseconds){
            //document.getElementById("time").innerHTML = timecode(milliseconds);
        }
    });
}
// 上传模块
var recordArr = []; // 因为最后需要展示音频列表,需要一个全局数组用于存储upyun返回的音频url
function upload(callback){
    // 定义音频文件名
    var fileName = $.cookie("TOEFL_TOKEN") ? "login" + new Date().getTime() : "nologin" + new Date().getTime();
    // 获取upyun配置参数,参考upyun的form_api:http://docs.upyun.com/api/form_api/
    // 这里先上传音频文件名至服务器端,服务端根据文件名生成对应的policy和signature返回客户端
    $.ajax({
        type: "GET",
        url: xm.baseURL + "/mkTpo/file/" + fileName + ".wav/posts.action",
        dataType : "json",
        success: function(data) {
            // 获取upyun_api参数
            var expiration = data.expiration, // 时间戳
                saveKey = data["save-key"], // 保存路径
                bucket = data.bucket, // 空间名
                policy = data.poily, // policy
                signature = data.signature; // signature
            // 插件封装方法,注:该方法中的注释可能导致程序报错,需删除
            Recorder.upload({
                method: "POST",
                url: "http://v0.api.upyun.com/universe1", // 录音上传url:upyun_api基本域名+空间名
                audioParam: "file", // 上传upyun时,这个参数值固定为file,相当于表单提交中的<input type="file">
                params: { // 这里填写获取的upyun_api参数,获取upyun的上传权限
                    "expiration": expiration,
                    "save-key": saveKey,
                    "bucket": bucket,
                    "policy": policy,
                    "signature": signature
                },
                success: function(responseText){ // 上传成功之后upyun会返回音频文件的相关信息
                    var data = JSON.parse(responseText);
                    recordArr.push(data.url); // 将录音音频的url追加到数组
                    callback && callback(); // 上传完成执行方法
                }
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log("XMLHttpRequest.status: " + XMLHttpRequest.status);
            console.log("XMLHttpRequest.readyState: " + XMLHttpRequest.readyState);  
            console.log("textStatus: " + textStatus);
        }
    });
}

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

21 条评论
艾瑞克
艾瑞克

你好!请问下你做的这个有demo可以看下么?也想做个类似的东西,用作英语学习的,类似PC版本的微信,像语音论坛一样。

龍門小將
@艾瑞克

没有 demo,直接是嵌套在项目里的,用的 GitHub 上的录音插件是提供 demo 的,你可以看一下 https://github.com/jwagener-soundcloud/recorder.js

争扎的小小小
争扎的小小小

你好,我想问问,通过这个录制的音频数据可以追踪到吗?如果想把这个音频数据传到后台,应该怎么传呢?谢谢

龍門小將
@争扎的小小小

这个插件封装了 upload 方法,我代码里是将音频数据上传到了又拍云上

小白菜
小白菜

你好 githup上的案例部署了以后 总会在这一句this.flashInterface().record();报错 请问你碰到过吗?

龍門小將
@小白菜

没有碰到过

ssss
ssss
@小白菜

请问一下,您的问题解决了吗?我也是遇到这个问题了

不知道什么昵称
不知道什么昵称

这个插件没有本地录音路径,我不需要上传云端,只在浏览器端查看试听,有对应的接口没?

chosen1wp

您好,想请教一下录音文件的格式,默认是.wav的,录音文件能修改格式吗?

lzq
lzq
@chosen1wp

这个插件 你搞定了吗

启发
启发

你好 h5 和 flash 录音都是https协议擦能访问录音吗?
我目前知道h5的 navigator.getUserMedia() 是需要 https 才可以录音的,
flash需要https吗?

还有个问题: 我配置的 java+tomcat 项目已经配置并可以访问,但是 https 有条红线, ssl 协议不信任,需要继续访问才可以。 怎么解决这个证书问题呢? 还有flash可以避开https 获取录音吗?

求助

$.ajax({
type: "GET",
url: xm.baseURL + "/mkTpo/file/" + fileName + ".wav/posts.action",
dataType : "json",

大佬 上面的xm.baseURL要设什么呢?翻了一下又拍云没理解到。谢答,求回复

龍門小將
@求助

那个是你的域名,这里是拼接的 url,PS:xm.baseURL = 'http://www.abc.com',GET 请求的 url 就是 'http://www.abc.com/mkTpo/file/'

求助
@龍門小將

可是程序走到这步 音频还未上传至upyun 。get请求 url: "http://www.abc.com" + "/mkTpo/file/" + fileName + ".wav/posts.action" 这个地址,不是永远都跳到error:吗

求助
@求助

辛苦大佬 得闲的话 帮我解答;

innocence
innocence

不能录音,请问下应该怎么调整呢?现在demo看不到了。。打断点看了插件中 this.flashInterface().record() 中的 this.flashInterface() 是个元素对象,断点里面检测到它的 record() 是个空方法,没有返回值。导致 this.flashInterface().record() 为 undefined,不知道是不是这里导致录音录不上。如果能录音了,录音得到的文件流怎么取呢?

龍門小將
@innocence

源码包里边有个examples的目录,是 demo 文件,可以自己本地跑一下

innocence
innocence
@龍門小將

本地都跑不起来,打断点看是一样的,demo和我自己的都进不去progress,打出来的 log 里面显示 麦克风状态改变 之后就没有然后了。

龍門小將
@innocence

页面上有提示 “Adobe Flash Player 10.1 or newer is required to use this feature.” 需要安装 Flash,recorder.js 项目是基于 Flash 的;

ssss
ssss
@龍門小將

点击安装,Chrome直接安装了flash插件,但是还是Cannot read property 'record' of null
at Object.record (recorder.js:52)
错误呢,this.flashInterface().record()这行报错,而且打印输出了一下this.flashInterface()为空。

老瑜
@ssss

flash 已经不被支持了,建议使用 HTML5 标准的 Audio API 去实现网页录音功能。

发表评论 取消回复
* 昵称
* Email
* 网址
* 评论