萌新前端，基于H5、微信公众号实现微信录音功能

  我们公司作为一家非常牛逼的垃圾公司（划重点）！！作为一家老板以为程序员属于魔法师，每天只需要高呼‘巴啦啦能量’的公司！！作为被老板指出被包养的部门的一员！！我肯定拒绝不了老板和奇葩产品的 ‘突发奇想’和‘别的小朋友都有，我们也要’的无赖要求！！

  所以我这个小可爱又双叕接手了一个诚心刁难我这个小萌新的需求！！不过好在有微信粑粑的API可以用，好啦好啦，不扯啦，让我们看一下叭！

我要实现的功能是这样的:

页面效果

第一步：微信签名

this.$wx.config({ debug: false, appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: [ 'startRecord', 'stopRecord', 'uploadVoice', 'translateVoice', 'playVoice', 'pauseVoice', ]});

微信签好名之后就可以调录音的接口啦，签名的参数后台会返回，jsApiList: []里面是需要调用的微信API，需要在微信开发者工具里面配置一下js安全域名。

第二步：调用录音的API

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

调用完之后不需要管，localId（微信返回的本地录音ID）会在录音结束的接口返回

第三步：录音结束

setStopRecord() { let that = this; that.$wx.stopRecord({ success: res => {console.log('正常结束录音成功了') console.log('本地录音ID',res.locald)   }, fail: res => { console.log('stopRecord ==== ', JSON.stringify(res)) } })},

在手指松开的事件里面调用结束录音，会拿到localId，通过localId,调用微信上传的API拿到服务器ID；

第四步：用localId拿到serverId

uploadRecord() { this.$wx.uploadVoice({ localId: this.localId, isShowProgressTips: 1, success: res => { console.log(res.serverId) }, fail: function (err) { console.log(err) } });},

拿到serverId之后前端的工作就结束了，把serverId传给后台，就可以啦

第五步：播放录音

播放录音和暂停播放，都有微信的API调用，'playVoice'和'pauseVoice',

我是使用的后台返回的录音MP3

let player1 = this.$refs.player1;player1.play()player1.pause()

通过$ref的方式获取到DOM，通过player1.play()的方式播放音频；player1.pause()的方式暂停播放音频；

好啦，微信的录音功能就介绍到这里啦，有什么不对的地方，或者有更加优秀的方法，都非常欢迎找我交流和指正哦~

（会有看到的叭~嘻嘻）