当前位置：首页 > VUE

vue如何实现录音

2026-03-28 22:58:15VUE

Vue 实现录音功能

在 Vue 中实现录音功能通常需要结合浏览器的 MediaRecorder API 和 Web Audio API。以下是一个完整的实现方案。

检查浏览器支持

在开始录音前，需要检查浏览器是否支持相关 API。

if (!navigator.mediaDevices || !window.MediaRecorder) {
  console.error('录音功能不被当前浏览器支持');
}

获取用户麦克风权限

使用 navigator.mediaDevices.getUserMedia 方法获取麦克风访问权限。

async function getMicrophone() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: false
    });
    return stream;
  } catch (error) {
    console.error('无法访问麦克风:', error);
    return null;
  }
}

创建录音器实例

获取音频流后，创建 MediaRecorder 实例。

function createRecorder(stream) {
  const options = { mimeType: 'audio/webm' };
  const recorder = new MediaRecorder(stream, options);

  const audioChunks = [];
  recorder.ondataavailable = (event) => {
    audioChunks.push(event.data);
  };

  recorder.onstop = () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
    const audioUrl = URL.createObjectURL(audioBlob);
    // 可以在这里处理录音结果
  };

  return recorder;
}

在 Vue 组件中使用

将录音功能封装为 Vue 组件。

<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,
      audioUrl: null,
      recorder: null,
      stream: null
    };
  },
  methods: {
    async startRecording() {
      this.stream = await getMicrophone();
      if (this.stream) {
        this.recorder = createRecorder(this.stream);
        this.recorder.start();
        this.isRecording = true;
      }
    },
    stopRecording() {
      if (this.recorder) {
        this.recorder.stop();
        this.stream.getTracks().forEach(track => track.stop());
        this.isRecording = false;
      }
    }
  },
  beforeDestroy() {
    if (this.recorder && this.isRecording) {
      this.recorder.stop();
    }
    if (this.stream) {
      this.stream.getTracks().forEach(track => track.stop());
    }
  }
};
</script>

处理录音数据

可以将录音数据保存或上传到服务器。

function saveRecording(audioBlob) {
  const formData = new FormData();
  formData.append('audio', audioBlob, 'recording.webm');

  fetch('/api/upload-audio', {
    method: 'POST',
    body: formData
  }).then(response => {
    console.log('录音上传成功');
  }).catch(error => {
    console.error('上传失败:', error);
  });
}