vue 录音流程 RecordRTC

npm install recordrtc

import RecordRTC from "recordrtc";<!-- 音频播放器，用于播放录音 -->
<audio v-show="false" ref="audioPlayer" controls></audio>async startRecording() {// 检查浏览器是否支持 mediaDevicesif (!navigator.mediaDevices) {console.error("浏览器不支持mediaDevices.");ElMessage.error("浏览器不支持mediaDevices.");return;}this.audioUrl = null;// this.recorder = null;// this.isRecording = false;try {// 请求麦克风权限并获取音频流getUserMedia// const stream = await navigator.mediaDevices.getUserMedia({const stream = await navigator.mediaDevices.getUserMedia({audio: true,});// 设置录音选项为PCM格式const options = {type: "audio",mimeType: "audio/wav",recorderType: RecordRTC.StereoAudioRecorder,// desiredSampRate: 16000, // 设置采样率为16kHz，可根据需求调整numberOfAudioChannels: 1, // 单通道desiredSampRate: 24000, // 设置采样率为24kHzcheckForInactiveTracks: true,};// 创建 RecordRTC 实例this.recorder = new RecordRTC(stream, options);// 开始录音this.recorder.startRecording();this.isRecording = true; // 更新录音状态为进行中} catch (err) {// 处理获取麦克风权限失败的情况console.error("无法获取麦克风权限:", err);ElMessage.error("无法获取麦克风权限.");}},async stopRecording() {if (this.recorder) {// 停止录音await new Promise((resolve) => {this.recorder.stopRecording(() => {// 获取录音Blob数据// const blob = this.recorder.getBlob();this.blobData = this.recorder.getBlob();// 创建 Blob 对象的 URL，用于播放this.audioUrl = URL.createObjectURL(this.blobData);// 重置录音状态this.isRecording = false;// 重置音频播放器的源this.$refs.audioPlayer.src = this.audioUrl;// 关闭媒体流let stream = this.recorder.stream;if (stream) {stream.getTracks().forEach((track) => track.stop());}// 重置 recorder 实例this.recorder.destroy();this.recorder = null;resolve();});});}this.isRecording = false; // 更新录音状态},playRecording() {// 获取 audio 元素的引用const audioPlayer = this.$refs.audioPlayer;// 如果 audio 元素存在，播放录音if (audioPlayer) {audioPlayer.play();}},