小程序 长按录音 但单机后录音不停止的解决方案

按钮

      <button class="page-body-button" type="primary" bindtouchstart="touchstart" bindtouchend="touchend">{{record.isRecording?'正在录音...':'录音'}}button>

js

	onReady: function(res) {
		// 获取录音管理器对象,以及注册事件函数
	    this.recorderManager = wx.getRecorderManager();
	    // 开始录音回调
	    this.recorderManager.onStart(this.recordStart);
	    // 结束录音回调
	    this.recorderManager.onStop(this.recordStop);
	},
	
	data:{
	    record: {
	      // 记录当前是否在录音
	      isRecording: false,
	    }
    },
    
  touchstart(e) {
    console.log("touchstart")
    this.setData({
      ["record.isRecording"]: true,
    })
	this.recorderManager.start();
  },
  touchend(e) {
    console.log("touchend", e)
    this.setData({
      ["record.isRecording"]: false,
    })
    this.recorderManager.stop();
  },
  recordStart(e) {
    // 开始录音的回调
    console.log("开始录音")
    
    // *******************************************
    // 防止单机后录音不停止,原因是点击后录音还未正式开始,就已经执行touchend中的停止,所以停止不掉
    // 如果此时正在录音变量为录音,也就是长按,无操作
    if (this.data.record.isRecording) {
      console.log("正在录音 长按")
      this.setData({
        ["record.isRecording"]: true,
      })
    } else {
      // 如果此时正在录音变量为不录音,也就是点击后立即松开,就停止录音
      console.log("不录音 点按")
      this.recorderManager.stop();
    }
	// *******************************************
  },
  recordStop(e) {
    console.log("录音结束", e)
    this.setData({
      ["record.isRecording"]: false,
    })
    if (e.duration<1000){
      console.log("录音时间太短")
      wx.showToast({
        title: '录音时间太短',
        icon:"none"
      })
    }else{
    	// do something
    }
  }

你可能感兴趣的:(小程序 长按录音 但单机后录音不停止的解决方案)