js实现网页端录音功能

1、代码

首先安装依赖包：recorderx

npm install recorderx -S

<template><div class="container"><div class="mt-30"><el-button @click="onStartRecord">开始录音</el-button><el-button @click="onStopRecord">停止录音</el-button></div></div>
</template><script>
export default {name: "home",
};
</script>
<script setup>
import { reactive, ref, computed, watch, toRaw, onMounted } from "vue";
import moment from "moment";
import Recorder, { ENCODE_TYPE } from "recorderx";let recorder;const recordName = ref("");
function onStartRecord() {console.log("开始录音");recorder = new Recorder(true);recorder.start().then(() => {console.log("start recording");}).catch((error) => {console.log("Recording failed.", error);});
}function onStopRecord() {console.log("停止录音");recorder.pause();let wav = recorder.getRecord({ encodeTo: ENCODE_TYPE.WAV });console.log("wav", wav);
const aLink = document.createElement("a");const blob = wav; // new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });aLink.style.display = "none";aLink.href = URL.createObjectURL(blob);recordName.value = moment().format("YYYYMMDDHHmmss") + ".mp3";aLink.setAttribute("download", recordName.value); // 设置下载文件名称
  document.body.appendChild(aLink);aLink.click();URL.revokeObjectURL(aLink.href); // 清除引用
  document.body.removeChild(aLink);
}
</script>

2、效果

停止录音后，文件会自动保存到磁盘