<view class="container">
  <view class="body">
    <text class="text-space">剩余录音时间 {{ cd }}ms</text>
    <view class="btn-area">
      <button bindtap="start" tt:if="{{ !isRecording && !isPaused }}">start</button>
      <button bindtap="pauseorresume" tt:if="{{ isRecording || isPaused }}">{{ isPaused ? 'resume' : 'pause' }}</button>
      <button bindtap="stop" tt:if="{{ isRecording || isPaused }}">stop</button>
    </view>
  </view>
</view>

var DEFAULT_COUNT_DOWN = 60000;
var cdtimer;
Page({
  data: {
    cd: DEFAULT_COUNT_DOWN,
    isRecording: false,
    isPaused: false,
    recordOption: {
      duration: DEFAULT_COUNT_DOWN,
      sampleRate: 16000,
      encodeBitRate: 48000,
      numberOfChannels: 2,
      format: 'aac',
      frameSize: 100
    },
    recordFilePath: ''
  },
  startCountDown() {
    this.setData({
      cd: DEFAULT_COUNT_DOWN
    });
    clearInterval(cdtimer);
    cdtimer = setInterval(() => {
      this.setData({
        cd: this.data.cd - 100
      });
    }, 100);
  },
  pauseCountDown() {
    clearInterval(cdtimer);
  },
  continueCountDown() {
    clearInterval(cdtimer);
    cdtimer = setInterval(() => {
      this.setData({
        cd: this.data.cd - 100
      });
    }, 100);
  },
  stopCountDown() {
    clearInterval(cdtimer);
    this.setData({
      cd: DEFAULT_COUNT_DOWN
    });
  },
  onLoad: function (options) {
    this.recorderManager = tt.getRecorderManager();
    this.recorderManager.onStart(() => {
      this.setData({
        isRecording: true,
        recordFilePath: '',
        isPaused: false
      });
      this.startCountDown();
    });
    this.recorderManager.onResume(() => {
      this.setData({
        isRecording: true,
        isPaused: false
      });
      this.continueCountDown();
    });
    this.recorderManager.onPause(() => {
      this.setData({
        isRecording: false,
        isPaused: true
      });
      this.pauseCountDown();
    });
    this.recorderManager.onStop(({
      tempFilePath
    }) => {
      this.setData({
        isRecording: false,
        isPaused: false,
        recordFilePath: tempFilePath
      });
      this.stopCountDown();
      tt.showToast({
        title: '录音结束'
      });
    });
    this.recorderManager.onFrameRecorded(({
      frameBuffer,
      isLastFrame
    }) => { });
    this.recorderManager.onError(err => {
      console.error(err);
    });
  },
  onUnload: function () {
    this.stop();
    clearInterval(cdtimer);
  },
  start() {
    if (this.data.isRecording) {
      tt.showToast({
        title: '正在录音'
      });
    } else {
      this.recorderManager.start(this.data.recordOption);
    }
  },
  pauseorresume() {
    if (this.data.isPaused) {
      this.recorderManager.resume();
    } else {
      this.recorderManager.pause();
    }
  },
  stop() {
    this.recorderManager.stop();
  }
});

image {
  width: 150rpx;
  height: 150rpx;
}
.page-body-wrapper {
  justify-content: space-between;
  flex-grow: 1;
  margin-bottom: 300rpx;
}
.page-body-time {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.time-big {
  font-size: 60rpx;
  margin: 20rpx;
}
.time-small {
  font-size: 30rpx;
}
.page-body-buttons {
  margin-top: 60rpx;
  display: flex;
  justify-content: space-around;
}
.page-body-button {
  width: 250rpx;
  text-align: center;
}
.button-stop-record {
  width: 110rpx;
  height: 110rpx;
  border: 20rpx solid #fff;
  background-color: #f55c23;
  border-radius: 130rpx;
  margin: 0 auto;
}