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) {
          // 录音实时回调，大约1秒调用12次本回调
          document.querySelector(".duration").innerText =
            formatDuring(bufferDuration);
          // 可视化图形绘制
          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.dialogCancel();
          // 打开麦克风授权获得相关资源
          this.rec = newRec;
          // 此处创建这些音频可视化图形绘制
          wave = Recorder.FrequencyHistogramView({ elem: ".recwave" });
          // 已打开录音，可以点击录制开始录音了
          // 开始答题按钮可用
          this.beginAnswerDisabled = false;
          this.startRecord();
        },
        (msg, isUserNotAllow) => {
          // 用户拒绝授权或不支持
          this.dialogCancel();
          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.dialogCancel();
        this.$toast.error("麦克风权限请求被忽略，您将不能答题");
      };
      

4. createDelayDialog文件：

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