Recorder开启手机录音功能并将录音保存本地

这个功能很简单其实，使用vue-Recorder插件就可以实现，但是如果我们只想要在某一页面中使用，不需要部署至全局的话，可以不通过package打包，只需要在cdn中引入recorder插件（这里需要注意版本）。

1. 在 index.html中引入cdn 中的script代码：

  <script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/src/recorder-core.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/src/engine/mp3.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/src/engine/mp3-engine.js"></script>
  <script
    src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/src/extensions/frequency.histogram.view.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/src/extensions/lib.fft.js"></script>

2. webpack.base.config.js中写入，用于在页面打包时不打包recorder包：

externals: {
    'recorder': 'Recorder'
  },

3. 在需要用到的页面中调用

var newRec = Recorder({
        type: "mp3",
        sampleRate: 16000,
        bitRate: 16, // mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
        onProcess(buffers, powerLevel, bufferDuration, bufferSampleRate) {
          // 可视化图形绘制
          wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
        },
        success:function(dd){
          console.log('dd', dd)
        },error:function(msg){
          console.log('cc', msg)
        }
      });
      this.createDelayDialog(); // 我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调，此处demo省略了弹窗的代码
      newRec.open(
        () => {
          // 打开麦克风授权获得相关资源
          this.rec = newRec;
          // 此处创建这些音频可视化图形绘制
          wave = Recorder.FrequencyHistogramView({ elem: ".recwave" });
          // 已打开录音，可以点击录制开始录音了
          this.recStart();
        },
        (msg, isUserNotAllow) => {
          // 用户拒绝授权或不支持
          if (isUserNotAllow) {
            // 用户拒绝授权
            this.$confirm(
              "您拒绝了该问卷获取录音权限，您将不能答题，是否重新获取？",
              "提示",
              {
                type: "warning",
              }
            ).then(({ result }) => {
              if (result) {
                this.recOpen();
              } else {
                this.$toast.error(msg + "，请刷新页面重新获取");
              }
            });
          } else {
            // 设备不支持
            this.$toast.error(msg + "，您将不能答题");
          }
        }
      );
      // 权限请求被忽略
      window.waitDialogClick = () => {
        this.$toast.error("麦克风权限请求被忽略，您将不能答题");
      };
      // 开始录制
    recStart() {
      if (this.rec && Recorder.IsOpen()) {
        this.recBlob = null;
        this.rec.start();
      } else {
        this.$toast.error("未打开录音");
      }
    }
    // 暂停
    recPause() {
      if (this.rec && Recorder.IsOpen()) {
        this.rec.pause();
      } else {
        this.$toast.error("未打开录音");
      }
    },
    // 继续
    recResume() {
      if (this.rec && Recorder.IsOpen()) {
        this.rec.resume();
      } else {
        this.$toast.error("未打开录音");
      }
    },
    // 停止并上传
    recStop(isStartRecoder) {
      if (!(this.rec && Recorder.IsOpen())) {
        this.$toast.error("未打开录音");
        return;
      }
      this.rec.stop(
        (blob, duration) => {
          this.recBlob = blob;
          // 上传录音文件
        },
        (msg) => {
          this.$toast.error(msg);
        }
      );   
    },
      

4. createDelayDialog文件：

createDelayDialog() {
      this.dialogInt = setTimeout(() => {
        // 定时8秒后打开弹窗，用于监测浏览器没有发起权限请求的情况，在open前放置定时器利于收到了回调能及时取消（不管open是同步还是异步回调的）
        this.showDialog();
      }, 8000);
    }

5. 保存录音至本地

// 上传失败后，将音频保存在本地
    saveLocalBlob(blob){
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;

      a.download = this.answerVideoid;
      document.body.appendChild(a);
      a.click();
      // 用于保存时，浏览器报错，此时需要延迟2秒
      setTimeout(() => {
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
      }, 2000);
    },