当前位置：首页 > VUE

vue实现录音功能

2026-02-20 08:56:42VUE

使用浏览器原生API实现录音

Vue中实现录音功能可以借助浏览器的MediaRecorder API。需要先获取用户麦克风权限，然后创建录音实例。

安装必要依赖（可选）：

npm install recordrtc

组件代码示例：

<template>
  <div>
    <button @click="startRecording">开始录音</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: ''
    }
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        this.mediaRecorder = new MediaRecorder(stream);
        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);
          this.audioChunks = [];
        };
        this.mediaRecorder.start();
        this.isRecording = true;
      } catch (error) {
        console.error('录音权限获取失败:', error);
      }
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.isRecording = false;
      this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
    }
  }
}
</script>

使用第三方库简化实现

对于更复杂的需求，可以使用第三方库如recordrtc或vue-audio-recorder。

安装vue-audio-recorder：

npm install vue-audio-recorder

使用示例：

<template>
  <vue-audio-recorder
    :upload-url="uploadUrl"
    @stream-ready="onStreamReady"
    @recording-complete="onRecordingComplete"
  />
</template>

<script>
import VueAudioRecorder from 'vue-audio-recorder'

export default {
  components: { VueAudioRecorder },
  data() {
    return {
      uploadUrl: '/api/upload-audio'
    }
  },
  methods: {
    onStreamReady(stream) {
      console.log('麦克风已准备就绪', stream)
    },
    onRecordingComplete(blob) {
      console.log('录音完成', blob)
      const audioUrl = URL.createObjectURL(blob)
      // 处理录音文件
    }
  }
}
</script>

录音格式与兼容性处理

不同浏览器支持的音频格式可能不同，建议转换为通用格式：

// 转换为MP3格式
const audioContext = new AudioContext();
const source = audioContext.createBufferSource();
// 处理音频数据...

// 或使用库如lamejs进行编码
import { Mp3Encoder } from 'lamejs';

const encodeToMP3 = (audioBuffer) => {
  const encoder = new Mp3Encoder(1, audioBuffer.sampleRate, 128);
  // 编码处理...
}

移动端兼容注意事项

在移动设备上需要处理以下问题：

确保在用户交互事件中触发录音开始（如点击事件）
iOS需要特殊处理静音模式
部分Android浏览器需要polyfill

// 检测兼容性
const isRecordingSupported = () => {
  return navigator.mediaDevices && 
         navigator.mediaDevices.getUserMedia && 
         window.MediaRecorder
}

服务器端保存录音

将录音文件发送到服务器的示例：

vue实现录音功能

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

  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });
    return await response.json();
  } catch (error) {
    console.error('上传失败:', error);
  }
}