微信小程序开发录音功能

1. data数据

data: {
    recorderManager: null,
    curTime: 0,
    recorder: {
      status: 'ready', // 'ready' | 'recording'
      text: '点击录制',
    },
    timer: null,
    secondes: 0,
    startTimestamp: 0,
    isupload: false},

2.点击录制与停止

recordBtn: throttle(function () {
      let { status } = this.data.recorder;
      if(!this.data.isupload){
        if (status === 'ready') {
          this.getRecordLimit()
        } else if (status === 'recording') {
          this._endRecord()
        }
      }
 }, 1000),

3.开始录音

_startRecord() {
      this.data.startTimestamp = Date.now();
      const options = {
        duration: 600000,//指定录音的时长，单位 ms，最大为10分钟（600000），默认为1分钟（60000）
        sampleRate: 16000,//采样率
        numberOfChannels: 1,//录音通道数
        encodeBitRate: 96000,//编码码率
        format: 'mp3',//音频格式，有效值 aac/mp3
        frameSize: 50,//指定帧大小，单位 KB
      }
    
      //点击录制
      this.data.recorderManager.start(options);

      //开始录音计时
      this.countDown();

      this.data.recorderManager.onStart(() => {
        console.log('点击录制...')
      })

      //错误回调
      this.data.recorderManager.onError((res) => {
        console.log('录音失败', res);
      })
    },

4.停止录音

_endRecord() {
      clearInterval(this.data.timer);
      this.data.recorderManager.stop();
      this.data.recorderManager.onStop((res) => {
        console.log('停止录音', res)
        let filePath = res.tempFilePath;
        let duration = res.duration;
        if((Date.now() - this.data.startTimestamp) / 1000 < 2) {
          wx.showToast({
            title: '录音时间太短!',
            icon: 'none',
            duration: 1500
          }
          return;
        }
        this._uploadRecord(filePath, duration)
      })
 },

5.上传录音

export const ossUploadFile = (fileUrl) => {
    return new Promise((resolve, reject) => {
        //获取阿里云oss上传相关凭证
        getOssToken('audio/')
        .then(res => {
          let ossPolicy = res.data;
          let fileKey = getAudioFileKey();
          wx.uploadFile({
            url: '需要将录音上传到的域名' 
            filePath: fileUrl, // onStop之后生成的tempFilePath
            name: 'file', 
            formData: {
              'key': 'audio/' + fileKey,
              'policy': ossPolicy.policy,
              'OSSAccessKeyId': ossPolicy.accessId,
              'signature': ossPolicy.signature,
              "success_action_status": 200
            },
            success() {
                resolve(OSS_HOST + "/audio/" + fileKey)
            },
            fail(err) {
                reject('upload fail => ', err)
            }
          })
        })
        .catch(err => {
            reject('getOssTokenFail => ', err)
        })
    })}

6.录音授权

getRecordLimit() {
      let that = this;
      wx.getSetting({
        success(res) {
          if (!res.authSetting['scope.record']) { // 未授权
            wx.authorize({
              scope: 'scope.record',
              success () { // 一次才成功授权
                that._startRecord()
              },
              fail(err) {
                console.log(err)
                wx.showModal({
                  title: '温馨提示',
                  content: '您未授权录音，该功能将无法使用',
                  showCancel: true,
                  confirmText: "授权",
                  success: function (res) {
                    if (res.confirm) {
                      wx.openSetting({
                        success: (res) => {
                          if (!res.authSetting['scope.record']) {
                            //未设置录音授权
                            wx.showModal({
                              title: '提示',
                              content: '您未授权录音，功能将无法使用',
                              showCancel: false,
                              success: function () {}
                            })
                          } else { // 二次才成功授权
                            that._startRecord()
                          }
                        },
                        fail: function () {
                          console.log("授权设置录音失败");
                        }
                      })
                    }
                  },
                  fail: function (err) {
                    console.log("打开录音弹框失败 => ", err);
                  }
                })
              }
            })
          } else { // 已授权
            that._startRecord()
          }
        }
      })
    },

7.统计时长（包括自动停止录音，并上传录音）

countDown() {
   this.data.timer = setInterval(() => {
      this.data.secondes++;
      if (this.data.secondes > 360) {
          clearInterval(this.data.timer);
          this.data.recorderManager.stop();
          this.data.recorderManager.onStop((res) => {
              console.log('时辰已到，自动跳转')
              let filePath = res.tempFilePath;
              let duration = 360000;
              this._uploadRecord(filePath, duration)
           })
           return;
       }
       this.setData({
            curTime: this.data.secondes       });
   }, 1000);}

8.录音动画

                                           .recode {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    color: #fff;}.recode .record-bgm {
    width: 105rpx;
    height: 105rpx;
    border-radius: 50%;
    background:rgba(105,129,255,1);}.recode .record-wave-multiple {
    position: absolute;
    left: 0; 
    top: 0;}.record-wave-multiple>view {
    display: inline-block;
    background-color: #6981FF;
    border: 0 solid #6981FF;
    position: absolute;
    top: -25rpx;
    left: -27rpx;
    width: 170rpx;
    height: 170rpx;
    border-radius: 100%;
    opacity: 0;
    -webkit-animation: circle-wave-multiple 1.8s cubic-bezier(.41,.4,.67,1) 0s infinite;
    animation: circle-wave-multiple 1.8s cubic-bezier(.41,.4,.67,1) 0s infinite;}.record-wave-multiple>view:nth-child(2) {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;}.record-wave-multiple>view:nth-child(3) {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;}@keyframes circle-wave-multiple {
    0% {
        opacity: 0;
        transform: scale(.4);
    }
    5% {
        opacity: .5;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }}