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

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

• 在某个html元素监听开始长按事件、结束长按事件、在屏幕上移动事件；
• 长按事件开始，这时调用微信接口wx.startRecord开始录音;
• 长按事件结束，这时调用微信接口wx.stopRecord结束录音，得到音频的localId;
• 当用户在长按过程中手指移动了，也调用wx.stopRecord结束录音;
• 录音结束后，调用微信接口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.终极问题：某些手机屏幕不灵敏导致长按录音出现各种各样的问题

描述：在初次完成长按录音的功能后，我在公司多台贴了膜或者屏幕摔烂的手机测试发现，这些手机长按、和取消长按的事件相当不灵敏，误差很大，有时莫名其秒地结束录音，体验非常差。

解决方案：我们和产品经过商量，摆出这个避免不了的问题，最终把长按录音的交互模式改成了点击录音。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。