vue 使用浏览器实现录音功能

在项目vue中遇到使用浏览器实现录音功能

要在https下才能实现！ 要在https下才能实现！！ 要在https下才能实现！！！

如果不是https，解决方案  https://www.cnblogs.com/Sabo-dudu/p/12449985.html

注意:  这里输入的文件格式为mp3，因为 wav格式的文件太大了。

项目是基于 vue-cli3 的pc端应用

1. 下载文件，下载完成后把它放在  根目录  public  文件夹下。 

下载地址 链接: https://pan.baidu.com/s/1lSve9B5zbCS21TzOEAhm8w  提取码: qf69

 

 

 2. 然后在 index.html 中全局引入 

    <script type="text/javascript" src="/recorder/js/recorder.js"></script>

 3. 创建组件 mRecorder.vue 

<template>
  <div class="wrap-recorder">
    <el-row>
      <el-col>
        <svg
          @click="handleClick"
          :class="['icon', {anirecorder: recording } ]"
          t="1581399509621"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3242"
          width="50"
          height="50"
        >
          <path
            d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m0-992a480 480 0 1 0 480 480A480 480 0 0 0 512 32z m16 623.2V736h48a16 16 0 0 1 0 32h-128a16 16 0 0 1 0-32h48v-80.8A160 160 0 0 1 352 496a16 16 0 0 1 32 0 128 128 0 0 0 256 0 16 16 0 0 1 32 0 160 160 0 0 1-144 159.2zM512 592a96 96 0 0 1-96-96v-144a96 96 0 0 1 192 0v144a96 96 0 0 1-96 96z m64-240a64 64 0 0 0-128 0v144a64 64 0 0 0 128 0v-144z"
            p-id="3243"
            fill="#707070"
          />
        </svg>
      </el-col>
    </el-row>
    <p class="tip">{{ tiptext }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tiptext: "点击录音",
      recording: false, // 标记是否在录音
      intervaltimerid: "", // 间隔时间定时器编号
      recorder: null,
      time: 0
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.recorder = new MP3Recorder({
        //numChannels: 1,     //声道数,默认为1
        //sampleRate: 8000,   //采样率,一般由设备提供,比如 48000
        bitRate: 128, //比特率,不要低于64,否则可能录制无声音（人声）
        //useMediaRecorder: true, //是否使用MediaRecorder录音（不支持转码为mp3文件）
        //recorderType: "video/webm;codes=vp9",  //默认编码，仅 useMediaRecorder 为true且浏览器支持时生效
        //录音结束事件
        complete: (blob, ext) => {
          var url = URL.createObjectURL(blob);
          this.$emit("handleStop", {
            url: url,
            mblob: blob
          });
        }
      });
    },
    // 点击处理
    handleClick() {
      //录音支持检测
      if (!this.recorder.support) return;
      this.recording = !this.recording;
      this.$emit("handleStop", {
        url: "",
        mblob: null,
      });
      if (this.recording) {
        this.time = 0;
        this.tiptext = "录音中 " + this.time + "s";
        this.recorder.start(this.successFun(), this.errorFun());
      } else {
        clearInterval(this.intervaltimerid);
        this.recorder.stop();
        this.tiptext = "点击录音";
      }
    },
    writeError() {},
    successFun() {
      this.intervaltimerid = setInterval(() => {
        // 开始累积
        if (this.time == 120) {
          this.recorder.stop();
          this.recording = false;
          this.tiptext = "点击录音";
          this.$message.warning("对不起，录音只支持120秒以内的语音！");
          clearInterval(this.intervaltimerid);
          return false;
        }
        this.time = this.time + 1;
        this.tiptext = "录音中 " + this.time + "s";
      }, 1000);
    },
    errorFun(e) {
      // clearInterval(this.intervaltimerid);
      // switch (e.code || e.name) {
      //   case "PERMISSION_DENIED":
      //   case "PermissionDeniedError":
      //     // this.writeError("用户拒绝提供设备。");
      //     break;
      //   case "NOT_SUPPORTED_ERROR":
      //   case "NotSupportedError":
      //     // this.writeError("浏览器不支持硬件设备。");
      //     break;
      //   case "MANDATORY_UNSATISFIED_ERROR":
      //   case "MandatoryUnsatisfiedError":
      //     // this.writeError("无法发现指定的硬件设备。");
      //     break;
      //   default:
      //     // this.writeError(
      //     //   "无法打开麦克风。异常信息:" + (e.code || e.name)
      //     // );
      //     break;
      // }
    }
  }
};
</script>
<style scoped lang="scss">
.wrap-recorder {
  text-align: center;
  .icon {
    cursor: pointer;
  }
  .tip {
    padding-top: 20px;
  }
}
.anirecorder {
  position: relative;
  animation: mymove 5s infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes mymove {
  0% {
    transform: scale(1); /*开始为原始大小*/
  }
  25% {
    transform: scale(1.1); /*放大1.1倍*/
  }
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.1);
  }
}
</style>
 

4. 然后引入该组件

 <MRecorder @handleStop="handelEndRecord" />

methods：{
  // 录音处理结束事件
    handelEndRecord(param) {
      this.msource = param;
    },
}

整个流程就完成了，生成的mp3 格式很小，便于上传。