npm：https://www.npmjs.com/package/recorder-core

npm install recorder-core

這裏是常規錄音，每次結束後返回完整音頻blob，中間返回，並且結束後關閉音頻錄製並清空緩存
下面是一個vue3+ts+arco.design的案例，直接複製到項目中運行即可

<template>
  <div class="snow-page">
    <div class="snow-inner">
      <a-space direction="vertical" fill>
        <!-- 波形繪製區域 -->
        <div style="display: inline-block; vertical-align: bottom; border: 1px solid #cccccc">
          <div style="width: 300px; height: 100px" ref="recwave"></div>
        </div>
        <a-space>
          <a-button type="primary" @click="recOpen">打開錄音權限</a-button>
          <a-button type="primary" @click="recStart">開始錄音</a-button>
          <a-button @click="recStop">結束錄音</a-button>
          <a-button @click="recPlay">本地試聽</a-button>
        </a-space>
      </a-space>
    </div>
  </div>
</template>

<script setup lang="ts">
//必須引入的核心
import Recorder from "recorder-core";

//引入mp3格式支持文件；如果需要多個格式支持，把這些格式的編碼引擎js文件放到後面統統引入進來即可
import "recorder-core/src/engine/mp3";
import "recorder-core/src/engine/mp3-engine";
//錄製wav格式的用這一句就行
import "recorder-core/src/engine/wav";

//可選的插件支持項，這個是波形可視化插件
import "recorder-core/src/extensions/waveview";
//ts import 提示：npm包內已自帶了.d.ts聲明文件（不過是any類型）

let rec: any;
let recBlob: any;
let wave: any;
const recwave = ref(null);
// 打開錄音
const recOpen = () => {
  //創建錄音對象
  rec = Recorder({
    type: "mp3", //錄音格式，可以換成wav等其他格式
    sampleRate: 16000, //錄音的採樣率，越大細節越豐富越細膩
    bitRate: 16, //錄音的比特率，越大音質越好
    onProcess: (buffers: any, powerLevel: any, bufferDuration: any, bufferSampleRate: any, newBufferIdx: any, asyncEnd: any) => {
      //錄音實時回調，大約1秒調用12次本回調,可實時繪製波形，實時上傳（發送）數據
      console.log("實時回調", buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd);

      if (wave) {
        wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
      }
    }
  });
  if (!rec) {
    alert("當前瀏覽器不支持錄音功能！");
    return;
  }
  //打開錄音，獲得權限
  rec.open(
    () => {
      console.log("錄音已打開");
      if (recwave.value) {
        //創建音頻可視化圖形繪製對象
        wave = Recorder.WaveView({ elem: recwave.value });
      }
    },
    (msg: any, isUserNotAllow: any) => {
      //用户拒絕了錄音權限，或者瀏覽器不支持錄音
      console.log((isUserNotAllow ? "UserNotAllow，" : "") + "無法錄音:" + msg);
    }
  );
};
// 開始錄音
const recStart = () => {
  if (!rec) return console.error("未打開錄音");
  rec.start();
  console.log("已開始錄音");
};
// 結束錄音
const recStop = () => {
  if (!rec) return console.error("未打開錄音");
  rec.stop(
    (blob: any, duration: any) => {
      recBlob = blob;
      const localUrl = (window.URL || webkitURL).createObjectURL(blob);
      console.log("錄音成功", blob, localUrl, "時長:" + duration + "ms");
      upload(blob);
      rec.close(); //關閉錄音，釋放錄音資源，當然可以不釋放，後面可以連續調用start
      rec = null;
    },
    (err: any) => {
      console.error("結束錄音出錯：" + err);
      rec.close(); //關閉錄音，釋放錄音資源，當然可以不釋放，後面可以連續調用start
      rec = null;
    }
  );
};
// 上傳錄音
const upload = (blob: any) => {
  console.log("上傳錄音", blob);
};
// 本地播放錄音
const recPlay = () => {
  const localUrl = URL.createObjectURL(recBlob);
  const audio = document.createElement("audio");
  audio.controls = true;
  document.body.appendChild(audio);
  audio.src = localUrl;
  audio.play();
  //注意不用了時需要revokeObjectURL，否則霸佔內存
  setTimeout(function () {
    URL.revokeObjectURL(audio.src);
  }, 5000);
};
</script>