微信开发之微信jssdk录音功能开发示例

项目需求简单描述

用户长按录音，松手后直接结束录音，结束录音后，用户可以选择重新录音、播放刚才的录音，上传录音（这里的上传录音指上传到自己服务器，上传步骤是，前端调用wx.uploadVoice，后台再到微信服务器下载音频文件，上传到自己的服务器）。注意，音频文件自上传时间算起在微信服务器的有效期为3天。由于后台从微信服务器下载的音频文件是amr格式的，需要后台先把amr文件转换成MP3，前端用audio播放。我们公司是购买阿里云的媒体处理服务进行文件转码的。

调用到的微信接口

// 开始录音接口wx.startRecord();// 停止录音接口wx.stopRecord({success: function (res) {  var localId = res.localId; }});// 监听录音自动停止接口wx.onVoiceRecordEnd({ // 录音时间超过一分钟没有停止的时候会执行 complete 回调 complete: function (res) {  var localId = res.localId; }});// 播放语音接口wx.playVoice({ localId: '' // 需要播放的音频的本地ID，由stopRecord接口获得});// 暂停播放接口wx.pauseVoice({ localId: '' // 需要暂停的音频的本地ID，由stopRecord接口获得});// 监听语音播放完毕接口wx.onVoicePlayEnd({wx.onVoice success: function (res) {  var localId = res.localId; // 返回音频的本地ID }});// 上传语音接口wx.uploadVoice({ localId: '', // 需要上传的音频的本地ID，由stopRecord接口获得 isShowProgressTips: 1, // 默认为1，显示进度提示 success: function (res) {  var serverId = res.serverId; // 返回音频的服务器端ID }});

主要涉及的知识点

//项目用到的框架：vue.js@touchstart // 手指触碰屏幕，开始长按@touchend //手指离开屏幕，结束长按@touchmove //手指在屏幕上滑动

开发流程

说明：项目用到的框架：Vue

1.引入微信jssdk,做好微信配置

2.HTML结构：

<div @touchstart="gtouchstart()" @touchend="gtouchend()" @touchmove="gtouchmove()"></div>

touchstart事件：MDN的定义是：当触点与触控设备表面接触时触发touchstart 事件，换句话来说，就是手指触碰屏幕时触发，所以这里监听开始长按。

@touchend事件：当手指从屏幕上离开的时候触发，这里今天长按结束。

@touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个长按录音的场景中，当手指在屏幕上移动了，也视为录音结束，所以要监听手指在屏幕上滑动。

3.js代码

methods:{ gtouchstart(){  // 当用户长按500ms以上再真正开始录音  setTimeout(() => {   this.longPress()  }, 500)} }, longPress(){  wx.startRecord() // 微信开始录音接口 }, gtouchmove(){  wx.stopRecord({ // 微信结束录音接口   success: res => {    this.localId = res.localId;    console.log('中断结束录音')   }  }) }, gtouchend(){   wx.stopRecord({ // 微信结束录音接口    success: res => {     this.localId = res.localId;     console.log('正常结束录音成功了')    }  }) }, wxUpload() { // 上传到微信服务器  wx.uploadVoice({   localId: this.localId, // 需要上传的音频的本地ID，由stopRecord接口获得   isShowProgressTips: 1, // 默认为1，显示进度提示   success: res => {    this.serverId = res.serverId; // 返回音频的服务器端ID   }  }); },}