wx-sdk录音总结以及一些坑

近期项目做了类似于app录音功能，遇到了一些坑，下面跟大家分享我的坑和一些经验

我使用的vue框架，录音功能使用的wx-sdk多媒体接口，也就是音频接口，废话不多说

开始录音接口

wx.startRecord();

这个接口，是录音开始，当时原本模拟微信语音通话，打算用长按功能去处理，其实根据UI设计用点击事件也可以，只是感觉没有微信录音高大上一些，这个接口调用成功之后再移动端当前页面的顶部会有‘正在录音’的字样，IOS端和安卓端不太一样，不过都比较明显。这个方法有个回调函数，其实整个的函数是这样，

wx.startRecord({
    success: function (res) {
        //console.log();
    },    fail:function(res) {        //alert();    }
});

startRecord:function() {
        let _this = this;
        wx.startRecord({
            success:function() {
                _this.alreadyVoice = true;
                _this.timer(0);
                // _this.timer(_this.audioTime);
                _this.pause = !_this.pause;
            },
            fail:function(res){

            }
        });
    

},

接下来是录音暂停

wx.stopRecord({
    success: function (res) {
        var localId = res.localId;
    }
});

暂停之后会有一个成功回调，开发人员会拿到这个localid,这个localid有两个作用，一个是录音完后之后可以去本地播放，不过这个时候需要下面的wx-sdk接口，另外一个作用是拿localid去请求server_id；

stopRecord:function(symbol) {
    let _this = this;
    wx.stopRecord({
        success:function(res) {
            _this.localId = res.localId;
            _this.pause = !_this.pause;
        }
    })
},

播放语音接口

这个接口就是需要上面我所说localid的用处了，你可以用js简单的click事件去触发这个接口，然后自己模拟一个audio播放器，至于进度条和样式设计定义，这个播放器不需要url属性，播放的声音也完全是wx.playVoice（）触发的。

wx.playVoice({
localId: '' // 需要播放的音频的本地ID，由stopRecord接口获得
});

playVoice:function() {
    let _this = this;
    wx.playVoice({
        localId: _this.localId, // 需要播放的音频的本地ID，由stopRecord接口获得
        success:function(){
            // alert('成功');
        },
        fail:function() {
            // alert('失败');
        }
    });

},

暂停播放接口

相对于语音播放，这个是本地语音暂停，不在累述

wx.pauseVoice({
localId: '' // 需要暂停的音频的本地ID，由stopRecord接口获得
});

//暂停语音
pauseAudio:function() {
    this.play = true;
    let _this = this;
    wx.pauseVoice({
        localId: _this.localId // 需要暂停的音频的本地ID，由stopRecord接口获得
    });
},

上传语音接口

这个是最关键的录音接口，录音之后要上传到自己服务器

上面所提localid，在这里就是用来获得server_id，拿到server_id之后，交给后台数据，让他们去拿着server_id去腾讯下载录音，然后去做文件类型处理，最后处理成mp3格式，返回到前端，前端拿着mp3格式的链接，放在audio标签就可以播放了。

（server_id也可以去微信服务器下载刚才录音，在本地播放，开发文档有详细wx.downloadVoice说明）

wx.uploadVoice({
localId: '', // 需要上传的音频的本地ID，由stopRecord接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回音频的服务器端ID
}
});

//录音上传
uploadVoice:function() {
    let _this = this;
    wx.uploadVoice({
        localId:_this.localId,
        isShowProgressTips: 1,
        success: function (res) {
            _this.serverId = res.serverId; // 返回音频的服务器端ID
           //等等操作
        },
        fail:function() {
            // alert('上传微信服务器失败');
        }
    })
},

这大概是录音功能比较常用的接口，多媒体这一块wx-sdk大概有9个接口，剩下的都比较好理解。

另外，录音接口微信服务器有次数限制，每天一支调用录音开始和暂停的次数也是有限的。

这些接口的调用，不需要写在wx-ready里面，这个是用户自己触发的，每个接口回调都有success和fail函数，在最上面我又例子说明。

当然还有类似于分享的一些坑有时间在分享。有大神需要指点欢迎留言。