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

Posted 2022-12-12 小猿猪哥

最近做了一个活，涉及到微信录音功能。这次这个事做的很失败。但是微信录音方面自己也算是基本搞明白了。
失败的活，起初看了需求报价的时候，价钱就报的比较低(考虑到中间环节)。后面实际做的需求比报价的难且复杂(甲方需求变了)。 后面在做的时候也多次修改和增加需求。 说实话，做毛了。最后要求加价，不加；需求有问题说了也不沟通协调。最后我选择不做了。微信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的，不要问我为什么，踩坑过来的。

最后

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