Vue使用微信录音并上传服务端

在微信公众号或者微信h5的网页开发中，会用到录音等功能，在微信里面使用微信录音会比较好一点，不用去设置ios和android的h5录音兼容性，并且h5的其他录音js文件可能不兼容微信浏览器等，所以vue中集成微信录音功能即可

一、配置微信权限获取jssdk

微信jssdk的配置，也可以参考官方开发文档

1. 配置安全域名（参考官方文档）

2. 引入微信的js文件，vue中可以直接npm安装也可以
   npm install weixin-js-sdk --save

   并在main.js中引入js：
   import wx from 'weixin-js-sdk'

   并且将wx绑定到vue原型上，那么其他的所有组件都可以使用：
   Vue.prototype.$wx = wx

3. 通过config接口注入权限验证配置

   在main.js中配置微信权限接口

   wx.config({
       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
       appId: '', // 必填，公众号的唯一标识
       timestamp: , // 必填，生成签名的时间戳
       nonceStr: '', // 必填，生成签名的随机串
       signature: '',// 必填，签名，见附录1
       // 必填，需要使用的JS接口列表，所有JS接口列表见官方js接口
       // 这里配置录音所需要的接口权限
       jsApiList: [
       	'startRecord',
           'stopRecord',
           'onVoiceRecordEnd',
           'playVoice',
           'pauseVoice',
           'stopVoice',
           'onVoicePlayEnd',
           'uploadVoice',
           'downloadVoice'
       ]
   });
    
   wx.ready(function(){
    
       // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
   });
    
   wx.error(function(res){
    
       // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
   
   });
   
   
   

**二、微信录音、播放、停止、上传等操作**

1. 开始录音

   第一次开始录音会提示用户是否授权录音

    this.$wx.startRecord({
       success: function() {
         console.log('开始录音')
       },
       fail: function(res) {
         console.log(JSON.stringify(res))
       }})
       
   

2. 停止录音

   this.$wx.stopRecord({ // 微信结束录音接口
        success: res => {
            // 这里将localId保存到data中，用于播放录音和上传到服务端
           this.localId = res.localId
           console.log('正常结束录音成功了')
         },
         fail: res => {
           console.log(JSON.stringify(res))
         }
       })
   

3. 播放录音

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

4. 上传录音到服务端

   上传录音到服务端需要2步，第一步：先将录音上传到微信，通过localId获取serverId 第二步：将serverId上传到服务端，再从微信下载下来

   // 注意，因为在回调里面需要使用this,所以这里先将this保存一下，否则里面的this指向错误
   const _this = this
   
   this.$wx.uploadVoice({
       localId: this.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
       isShowProgressTips: 1, // 默认为1，显示进度提示
       success: async function (res) {
         const serverId = res.serverId // 返回音频的服务器端ID
         const params = {
           localId: serverId
         }
         // 将serverId上传服务端
         const resp = await _this.$axios.post('/api/audio/save', params)
         console.log('resp ', resp)
       },
       fail: function(err) {
         console.log(err)
       }
     });
     
   

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

三、服务端下载微信录音文件

在前端已经将录音文件上传到微信并返回一个serverId，因为微信只能保存3天这个录音，所以需要将serverId上传到后端，后端下载录音文件，并保存

下载语音接口：
https://api.weixin.qq.com/cgi-bin/media/get?access_token=&media_id=

需要根据ACCESS_TOKEN和前端传递来的server_id去下载即可。

后续再更新下载录音文件并转换格式，微信保存的文件和下载下来的都是.amr的录音文件