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

// 开始录音接口
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 //手指在屏幕上滑动

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

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
   }
  });
 },
}

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

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