当前位置：首页 > VUE

vue项目实现录音

2026-01-17 02:48:02VUE

实现录音功能的基本思路

在Vue项目中实现录音功能通常需要借助浏览器提供的Web Audio API或第三方库。核心步骤包括获取麦克风权限、创建录音对象、处理音频数据以及保存录音文件。

使用Web Audio API实现

浏览器原生API提供了MediaRecorder和getUserMedia接口，适合基础录音需求。

// 在Vue组件中
data() {
  return {
    mediaRecorder: null,
    audioChunks: [],
    audioUrl: ''
  }
},
methods: {
  async startRecording() {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    this.mediaRecorder = new MediaRecorder(stream);
    this.mediaRecorder.ondataavailable = event => {
      this.audioChunks.push(event.data);
    };
    this.mediaRecorder.start();
  },

  stopRecording() {
    return new Promise(resolve => {
      this.mediaRecorder.onstop = () => {
        const audioBlob = new Blob(this.audioChunks);
        this.audioUrl = URL.createObjectURL(audioBlob);
        this.audioChunks = [];
        resolve(audioBlob);
      };
      this.mediaRecorder.stop();
    });
  }
}

使用第三方库（推荐）

recordrtc或vue-audio-recorder等库封装了复杂逻辑，提供更友好的API：

// 安装vue-audio-recorder
npm install vue-audio-recorder

// 组件中使用
<template>
  <audio-recorder
    :attempts="3"
    :time="2"
    @start-recording="handleStart"
    @stop-recording="handleStop"
  />
</template>

<script>
import { AudioRecorder } from 'vue-audio-recorder';
export default {
  components: { AudioRecorder },
  methods: {
    handleStop(audioData) {
      const audioFile = new File([audioData.blob], 'recording.mp3');
      // 处理上传或保存
    }
  }
}
</script>

音频格式处理

常见需要转换音频格式时，可使用lamejs等库进行MP3编码：

import { Mp3Encoder } from 'lamejs';

const encodeToMP3 = (audioBuffer) => {
  const encoder = new Mp3Encoder(1, 44100, 128);
  const mp3Data = [];
  // 处理编码逻辑...
  return new Blob(mp3Data, { type: 'audio/mp3' });
}

兼容性处理

不同浏览器对音频格式支持差异较大，建议：

检测MediaRecorder.isTypeSupported判断格式支持
提供Polyfill方案（如audio-recorder-polyfill）
使用通用的WAV格式作为后备方案

服务器端保存

通过FormData上传到服务器：

const uploadRecording = async (blob) => {
  const formData = new FormData();
  formData.append('audio', blob, 'recording.wav');

  await axios.post('/api/upload', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  });
}