uniapp实现录音_uniapp 录音

目录

1. 录音效果简要

2. 实现的前置条件

3. 实现

  1. 创建一个实例对象

2.  绑定各种事件

4. 其它三点注意事项

---

1. 录音效果简要

   先把效果图丢下来

如上图所示，主要功能就是录音，获取音频链接，使用音频组件进行播放，话不多说，我们开始实现功能吧

2. 实现的前置条件

   我们用到的是runi.getRecorderManager

   在录音的同时进行定时器记录时间

3. 实现

  1. 创建一个实例对象

    // 初始化录音组件
    initOnlibeRecord() {
      this.recorderManager = uni.getRecorderManager();
      let self = this;
      // 监听对象的stop事件
      this.recorderManager.onStop(async (res) => {
        await self.stopAudio();
        uni.hideLoading();
      });
      // 监对象的start事件
      this.recorderManager.onStart(function (res) {
        self.getOperateTime();
      });
    },
    // 计时
    getOperateTime() {
      let _this = this;
      this.timer = setInterval(function () {
        // 以0.5s为间隔进行记时
        _this.onlineConf.tipsTime += 0.5;
      }, 500);
    },

2.  绑定各种事件

   点击开始录音，用onlineStep记录当前操作

      onlineConf: {
        onlinePopupShow: false, //在线录音弹框
        onlineStep: 1, // 1 开始录音 2录音中 3结束录音 4 播放录音
        isfinish: false, // 是否结束录音
        isRecord: false, // 是否正在录音
        tipsTime: 0, // 录音的时长
      },

    // 开始录音
    startRecord() {
      let audioStep = this.onlineConf.onlineStep;
 
      switch (audioStep) {
        case 1:
          if (this.audioHasClicked) return;
          this.audioHasClicked = true;
          // 清除计时
          this.$set(this.onlineConf, "tipsTime", 0);
          this.getRecordPermission();
          break;
        case 2:
          if (this.onlineConf.onlineSte == 3) {
            return;
          }
          this.recorderManager.stop();
          console.log("清除计时器");
          clearInterval(this.timer);
          this.onlineConf.onlineStep++;
          console.log("录音已结束");
          break;
        case 3:
          if (this.onlineConf.onlineSte == 4) {
            return;
          }
          this.onlineConf.onlineStep++;
          // this.recorderManager.play();
          this.$refs.audio.start("audio1");
          console.log("录音已播放");
          break;
        case 4:
          this.onlineConf.onlineStep--;
          this.isPause = true; // 暂停过
          this.$refs.audio.start("audio1");
          console.log("录音已暂停");
          break;
      }
    },

3.  获取音频链接

    当我们录音完毕，需要调用这个初始化出来的对象的stop方法，将会返回给我们一个音频链接，我们将该获取到的链接赋值给audio组件的value值，待其初始化后即可进行播放暂停等操作。

4. 其它三点注意事项

1. 该api涉及用户隐私，所以需要获取一下用户是否打开了麦克风权限

// 校验录音权限
    getRecordPermission() {
      let _this = this;
      console.log("获取录音权限1111");
      uni.getSetting({
        success(res) {
          if (res.authSetting["scope.record"]) {
            _this.recorderManager.start({ format: "mp3", duration: 600000 });
            _this.isFinishAudio = false;
            _this.onlineConf.onlineStep++;
            _this.audioHasClicked = false;
            return true;
          } else {
            uni.authorize({
              scope: "scope.record",
              success() {
                _this.recorderManager.start({
                  format: "mp3",
                  duration: 600000,
                });
                _this.isFinishAudio = false;
                _this.onlineConf.onlineStep++;
                _this.audioHasClicked = false;
                return true;
              },
              fail(res) {
                _this.audioHasClicked = false;
                uni.showToast({
                  title:
                    "请点击右上角“…”功能菜单，进入设置界面，打开麦克风权限后，再重新录音",
                  icon: "none",
                  duration: 2000,
                });
                return false;
              },
            });
          }
        },
      });
    },

2. 我们视觉上的录音时间是通过计时器来计算的，但是这个组件有它的录音限制，最长只能录制十分钟

3. 当用户在录制息屏会主动触发该实例对象的stop哦，记得处理一下息屏时的时间，否则容易给用户造成一种看起来还在录制的错觉~

// 息屏处理
    destoryTimer() {
      if (this.onlineConf.onlineStep == 2) {
        this.recorderManager.stop();
        clearInterval(this.timer);
        this.onlineConf.onlineStep++;
      }
    },

说到这里就结束啦，有啥问题或者不明白的可以一起交流啊~~