当前位置：首页 > VUE

vue实现语音录音

2026-01-18 19:47:42VUE

实现语音录音的基本步骤

在Vue中实现语音录音功能可以通过浏览器提供的MediaRecorder API完成。以下是一个完整的实现方案：

安装依赖（可选）

如果需要更高级的音频处理功能，可以安装recordrtc库：

vue实现语音录音

npm install recordrtc

核心代码实现

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    <audio v-if="audioUrl" :src="audioUrl" controls></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      mediaRecorder: null,
      audioChunks: [],
      audioUrl: null
    }
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        this.mediaRecorder = new MediaRecorder(stream);
        this.audioChunks = [];

        this.mediaRecorder.ondataavailable = event => {
          this.audioChunks.push(event.data);
        };

        this.mediaRecorder.onstop = () => {
          const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
          this.audioUrl = URL.createObjectURL(audioBlob);
          stream.getTracks().forEach(track => track.stop());
        };

        this.mediaRecorder.start();
        this.isRecording = true;
      } catch (error) {
        console.error('录音权限被拒绝或出错:', error);
      }
    },

    stopRecording() {
      this.mediaRecorder.stop();
      this.isRecording = false;
    }
  }
}
</script>

使用RecordRTC增强功能

如果需要更多功能如录音时间限制、格式选择等，可以使用RecordRTC：

vue实现语音录音

<script>
import RecordRTC from 'recordrtc';

export default {
  methods: {
    async startRecording() {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      this.recorder = new RecordRTC(stream, {
        type: 'audio',
        mimeType: 'audio/wav',
        recorderType: RecordRTC.StereoAudioRecorder,
        desiredSampRate: 16000
      });
      this.recorder.startRecording();
      this.isRecording = true;
    },

    async stopRecording() {
      return new Promise(resolve => {
        this.recorder.stopRecording(() => {
          const blob = this.recorder.getBlob();
          this.audioUrl = URL.createObjectURL(blob);
          this.isRecording = false;
          resolve(blob);
        });
      });
    }
  }
}
</script>

兼容性处理

不同浏览器对音频格式的支持不同，可以添加格式检测：

getSupportedMimeType() {
  const types = [
    'audio/webm',
    'audio/wav',
    'audio/mpeg',
    'audio/mp4',
    'audio/ogg'
  ];
  return types.find(type => MediaRecorder.isTypeSupported(type)) || 'audio/wav';
}

保存录音文件

添加方法将录音保存为文件：

saveRecording() {
  const a = document.createElement('a');
  a.href = this.audioUrl;
  a.download = `recording_${new Date().toISOString()}.wav`;
  a.click();
}