微信sdk相信对于前端开发来说并不陌生，最近项目中需要在公众号开发的页面中添加语音录入的功能。其中，遇到了一些问题觉得可以记录一下和大家分享，也便于以后自己再遇到类似问题可以少走一些弯路。
微信想要实现录音功能，核心就是微信的sdk录音api的使用。具体音频接口的讲解，请参阅微信公众开发平台的解释：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115。接下来大致讲一下我们项目对于录音功能的要求，要求是用户在进入页面后，能够通过语音录入的功能记录一些设备故障信息，再提交之后这些语音信息也可以再被删除，或者添加新的语音信息来补充。
接下来是代码的实现：首先需要在页面配置微信sdk的参数（需要请求接口获取微信的授权）。
在页面中我们需要用到录音，停止录音，播放语音，停止播放语音，监听语音播放结束，上传语音的功能，这些都需要被注册到jsApiList中以便于后续的调用。
录音按钮我们通过模仿微信录音按钮的实现，长按录音，手指上滑到一定距离便取消录音。
接下来是手指按下事件、手指移动事件、手指移开事件的实现：
大概实现思路是：在手指按下时，记录时间点作为录音开始时间并记录手指当前位置。然后调用开始录音的api,注意，我这里控制了如果录音时间超过一分钟，能会自动停止录音。并且在最后10秒时，出现一个倒计时10秒的提醒，告诉用户还有10秒的语音录入时间。在手指移动时，判断当手指移动的Y轴距离是否大于70，如果大于70，页面就提示“松开手指，取消发送”。手指松开时，记录当前时间作为录音结束时间并记录当前手指的位置。判断当录音时间小于2秒时，提示“录音太短”并取消录音。接着判断当手指移动的Y轴距离大于70时，则取消录音，最后如果都符合录音条件，则调用停止录音的接口并上传录音到微信服务器（录音在微信服务器上只能保存三天，长时间保存需要将录音文件下载下来存在自己的服务器上）。
这里有一点需要特别注意：前面提到如果录音时长超过一分钟我会让其自动停止录音，但此时手指仍然是处于按下的状态。如果此时在录音停之后松开手指便会再次触发touchend事件，也就会再次触发这个方法，相当于一次录音开始却触发了两次录音结束的方法。这是我们不想要的结果，所以我在代码中添加了一个标记flag,从以上截图中可以看出，我在按钮按下时，初始化flag=-1，然后再每次按钮送开时，将flag取反，然后判断当flag为正数时，进行停止录音的操作，否则就返回。这样便可以保证每次录音开始只会对应一次录音结束。
语音录入结束后，接下来需要播放保存后的录音文件了。需要提醒的是，微信录音后的文件格式是amr格式。这格式再PC端及部分手机端是无法播放的，也就需要后台将下载到的amr格式的文件转成别的格式的文件，推荐是MP3格式的文件，兼容性较好。一般前端是用audio标签来播放音频文件，并通过play()、pause()方法来控制进度。
