vue 实现录音功能

使用 Vue 实现录音功能

安装依赖

需要安装 recordrtc 或 vue-audio-recorder 等库来简化录音功能的实现。通过 npm 或 yarn 安装：

npm install recordrtc
# 或
npm install vue-audio-recorder

基本录音功能实现

通过 HTML5 的 MediaRecorder API 结合 Vue 实现录音功能。以下是一个简单的示例代码：

<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: null,
    };
  },
  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;
    },
  },
};
</script>

使用第三方库简化实现

vue-audio-recorder 提供了更简单的封装，可以直接在 Vue 中使用：

<template>
  <div>
    <vue-audio-recorder
      :recording="recording"
      @startRecording="startRecording"
      @stopRecording="stopRecording"
    />
    <audio v-if="audioUrl" :src="audioUrl" controls></audio>
  </div>
</template>

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

export default {
  components: { VueAudioRecorder },
  data() {
    return {
      recording: false,
      audioUrl: null,
    };
  },
  methods: {
    startRecording() {
      this.recording = true;
    },
    stopRecording(audioData) {
      this.recording = false;
      this.audioUrl = audioData.url;
    },
  },
};
</script>

处理兼容性问题

不同浏览器对 MediaRecorder 的支持程度不同，可以通过检查 API 是否存在来确保兼容性：

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
  alert('您的浏览器不支持录音功能');
}

保存录音文件

可以将录音文件保存到服务器或本地：

methods: {
  saveRecording() {
    const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
    const formData = new FormData();
    formData.append('audio', audioBlob, 'recording.wav');

    // 上传到服务器
    fetch('/api/upload-audio', {
      method: 'POST',
      body: formData,
    }).then(response => {
      console.log('录音已保存');
    });
  },
},

注意事项

• 录音功能需要用户授权麦克风权限。
• 部分浏览器可能不支持某些音频格式，建议使用 audio/wav 或 audio/mp3。
• 录音完成后释放资源，避免内存泄漏：

  stopRecording() {
    this.mediaRecorder.stop();
    this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
    this.isRecording = false;
  },