微信开发之微信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
      }
    });
  },
}

大体过程如上面代码所示：

1. 在某个html元素监听开始长按事件、结束长按事件、在屏幕上移动事件；
2. 长按事件开始，这时调用微信接口wx.startRecord开始录音;
3. 长按事件结束，这时调用微信接口wx.stopRecord结束录音，获得音频的localId;
4. 当用户在长按过程当中手指移动了，也调用wx.stopRecord结束录音;
5. 录音结束后，调用微信接口wx.uploadVoice把音频上传到微信服务器。

开发过程遇到的问题

1.调用微信录音超过60秒时，微信会自动结束录音而且返回一个localId，而且这个localId是无效的
解决方案：
在 wx.startRecord() 开始以前添加定时器，若是录音时间到达59秒，执行wx.stopRecord主动中止录音，避免用户录音时间过长致使录音无效。
2.微信录音功能受权引起的交互问题
使用微信jssdk接口录音，在同一个域只须要受权一次，即第一次使用录音的时候，微信本身会弹出对话框询问是否容许录音，用户点击容许后，以后再使用录音时，便不会再咨询用户是否容许。
在第一次按住录音后，因为用户不曾容许录音，微信会提示用户受权容许在本页面使用微信录音功能，这时用户会放开录音按钮转而去点击容许，在用户容许后，才真正会开始录音，而此时用户早已放开录音按钮，那么录音按钮上便不会再有touchend事件，录音便会一直进行。
解决策略：使用localStorage记录用户是否曾受权，并以此来判断是否须要在刚进入页面是自动录一段录音来触发用户受权

if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){
    wx.startRecord({
        success: function(){
            localStorage.rainAllowRecord = 'true';
            wx.stopRecord();
        },
        cancel: function () {
            alert('用户拒绝受权录音');
        }
    });
}

3.在ios下不能自动播放audio的问题
关于音频的播放，为了页面美观，处理方式是隐藏audio的播放控件，而后给一个按钮添加时间，经过audio.play()来控制音频的播放的。可是在ios下有个问题，audio.play()是不能直接播放音频的，只能显式地经过操做音频的播放控件来。这是由于iOS Safari 不容许自动播放 audio，只能经过用户交互触发。这大概是苹果公司出于用户体验而作的限制。
解决方案：

// 在页面初始化成功后，在wx.ready的回调函数内，收到执行下面的方法，这样ios用户在点击播放按钮时就能正常播放音频
wx.ready(() => {
  this.$nextTick(() => {
    this.$refs.audio.load()
    this.$refs.audio.play()
    this.$refs.audio.pause();
  })
})

4.终极问题：某些手机屏幕不灵敏致使长按录音出现各类各样的问题
描述：在初次完成长按录音的功能后，我在公司多台贴了膜或者屏幕摔烂的手机测试发现，这些手机长按、和取消长按的事件至关不灵敏，偏差很大，有时莫名其秒地结束录音，体验很是差。
解决方案：咱们和产品通过商量，摆出这个避免不了的问题，最终把长按录音的交互模式改为了点击录音。

最后，参考连接：http://www.cnblogs.com/liujun...