微信网页开发--录音功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhuming3834/article/details/81627200

最近做了一个活,涉及到微信录音功能。这次这个事做的很失败。但是微信录音方面自己也算是基本搞明白了。
失败的活,起初看了需求报价的时候,价钱就报的比较低(考虑到中间环节)。后面实际做的需求比报价的难且复杂(甲方需求变了)。 后面在做的时候也多次修改和增加需求。 说实话,做毛了。最后要求加价,不加;需求有问题说了也不沟通协调。最后我选择不做了。微信JSSDK开发,9个前端页面,20+个接口,自己的服务器,七牛云,收那么点钱还这么搞。 这次的失败,总结起来还是有很多需要学习的。实施方和甲方中间人太多的活不要做,中间人多了 你懂的。甲方需求不明的 不要做。言归正卷,微信录音功能开发。下面的代码不是实际项目中的代码, 主要看流程。

看文档

在做这个之前 建议多看看文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

微信端流程

1.wx.config()。
这里需要注意的是在jsApiList添加权限

jsApiList: [
   'onMenuShareTimeline',
   'onMenuShareAppMessage',
   'startRecord',
   'stopRecord',
   'onVoiceRecordEnd',
   'playVoice',
   'uploadVoice']

2.开始录音wx.startRecord();就是调用这个接口就可以了。
3.结束录音

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

这里的localId 要注意了,这是调用播放录音接口

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

需要的参数。
4.上传录音

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

备注:上传语音有效期3天,可用微信多媒体接口下载语音到自己的服务器,此处获得的 serverId 即 media_id,参考文档 .目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请登录微信公众平台,在开发 - 接口权限的列表中,申请提高临时上限。
这里的serverId就是后端接口去下载微信录音文件的一个参数,这个很重要。
5.播放录音

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

这个是微信提供的接口。还有一种方式是,使用插件BenzAMRRecorder播放.amr格式的录音文件。使用插件的方式,就没有微信录音文件3天的时间限制了。

后端流程

1.下载录音
调用接口:https://api.weixin.qq.com/cgi-bin/media/get?access_token=access_token&media_id=media_id
关于这个下载的接口, 微信文档没找到。网上有3个版本,都是试过的,就是这个可以使用。 其他的就不贴出来了。这里的access_token是那个有7200秒和调用次数限制的。media_id就是调用微信上传录音接口wx.uploadVoice()返回的serverId
2.上传七牛云
上传七牛云这个看我之前的文档就知道怎么操作了。
Node.js+express+MySQL使用七牛云实现的用户头像修改
前端就可以直接使用插件BenzAMRRecorder播放.amr格式的录音文件了。
这里需要注意的是只能播放https的,不要问我为什么,踩坑过来的。

最后

关于其他细节大家可以自行百度。上面只是流程,具体代码之前是什么关系,自己去实践,看文档。

猜你喜欢

转载自blog.csdn.net/zhuming3834/article/details/81627200
今日推荐