vue 录音流程

vue 录音流程 RecordRTC

npm install recordrtc

import RecordRTC from "recordrtc";
    <!-- 音频播放器，用于播放录音 -->
<audio v-show="false" ref="audioPlayer" controls></audio>

 async startRecording() {
      // 检查浏览器是否支持 mediaDevices
      if (!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, // 设置采样率为24kHz
          checkForInactiveTracks: 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();
      }
    },

原文地址：https://blog.csdn.net/qq_40287084/article/details/143902507

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！