当前位置：首页 > VUE

vue 实现audio 录制

2026-01-18 16:11:27VUE

实现音频录制的基本步骤

在Vue中实现音频录制功能，需要使用浏览器的MediaDevices API和MediaRecorder API。以下是具体实现方法：

引入必要的API

浏览器提供了navigator.mediaDevices.getUserMedia方法获取音频流，以及MediaRecorder类用于录制音频。确保在安全环境下使用（HTTPS或localhost），否则API可能不可用。

创建Vue组件

创建一个Vue组件来处理音频录制逻辑。组件需要包含以下数据属性：

vue 实现audio 录制

data() {
  return {
    audioStream: null,
    mediaRecorder: null,
    audioChunks: [],
    audioBlob: null,
    audioUrl: '',
    isRecording: false
  }
}

获取用户麦克风权限

使用getUserMedia方法请求麦克风访问权限：

async startRecording() {
  try {
    this.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    this.setupMediaRecorder();
    this.isRecording = true;
  } catch (error) {
    console.error('Error accessing microphone:', error);
  }
}

设置MediaRecorder

初始化MediaRecorder并设置事件监听器：

vue 实现audio 录制

setupMediaRecorder() {
  this.mediaRecorder = new MediaRecorder(this.audioStream);
  this.audioChunks = [];

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

  this.mediaRecorder.onstop = () => {
    this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
    this.audioUrl = URL.createObjectURL(this.audioBlob);
    this.isRecording = false;
  };

  this.mediaRecorder.start();
}

停止录制

提供停止录制的方法：

stopRecording() {
  if (this.mediaRecorder && this.isRecording) {
    this.mediaRecorder.stop();
    this.audioStream.getTracks().forEach(track => track.stop());
  }
}

播放录制的音频

在模板中添加音频播放控件：

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

下载录制的音频

添加下载功能：

downloadAudio() {
  if (!this.audioBlob) return;

  const a = document.createElement('a');
  a.href = this.audioUrl;
  a.download = 'recording.wav';
  a.click();
}

注意事项

确保在用户交互事件中调用getUserMedia，否则可能会被浏览器阻止
不同的浏览器支持的音频格式可能不同，建议测试兼容性
录制结束后记得释放媒体资源
考虑添加错误处理逻辑，处理用户拒绝权限等情况

完整组件示例

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

<script>
export default {
  data() {
    return {
      audioStream: null,
      mediaRecorder: null,
      audioChunks: [],
      audioBlob: null,
      audioUrl: '',
      isRecording: false
    }
  },
  methods: {
    async startRecording() {
      try {
        this.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
        this.setupMediaRecorder();
        this.isRecording = true;
      } catch (error) {
        console.error('Error accessing microphone:', error);
      }
    },
    setupMediaRecorder() {
      this.mediaRecorder = new MediaRecorder(this.audioStream);
      this.audioChunks = [];

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

      this.mediaRecorder.onstop = () => {
        this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
        this.audioUrl = URL.createObjectURL(this.audioBlob);
        this.isRecording = false;
      };

      this.mediaRecorder.start();
    },
    stopRecording() {
      if (this.mediaRecorder && this.isRecording) {
        this.mediaRecorder.stop();
        this.audioStream.getTracks().forEach(track => track.stop());
      }
    },
    downloadAudio() {
      if (!this.audioBlob) return;

      const a = document.createElement('a');
      a.href = this.audioUrl;
      a.download = 'recording.wav';
      a.click();
    }
  },
  beforeUnmount() {
    if (this.audioStream) {
      this.audioStream.getTracks().forEach(track => track.stop());
    }
  }
}
</script>