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 格式很小，便於上傳。