vue 实现录音功能

Vue 实现录音功能的方法

使用 Web Audio API 和 MediaRecorder

在 Vue 项目中实现录音功能可以通过 Web Audio API 和 MediaRecorder API 来完成。以下是具体实现步骤：

安装必要的依赖（如需要）：

npm install recordrtc

在 Vue 组件中引入相关 API：

import RecordRTC from 'recordrtc';

初始化录音功能

在 Vue 组件的 data 或 setup 中定义必要的变量：

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

创建开始录音的方法：

startRecording() {
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      this.mediaRecorder = new MediaRecorder(stream);
      this.mediaRecorder.start();
      this.isRecording = true;

      this.mediaRecorder.ondataavailable = event => {
        this.audioChunks.push(event.data);
      };
    })
    .catch(error => {
      console.error('Error accessing microphone:', error);
    });
}

停止录音并处理音频

创建停止录音的方法：

stopRecording() {
  this.mediaRecorder.stop();
  this.isRecording = false;

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

播放录音

创建播放录音的方法：

playRecording() {
  const audio = new Audio(this.audioUrl);
  audio.play();
}

清理资源

在组件销毁时清理资源：

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

模板部分

在 Vue 模板中添加控制按钮：

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    <button @click="playRecording" :disabled="!audioUrl">播放录音</button>
  </div>
</template>

使用第三方库简化实现

如果需要更复杂的功能或更好的兼容性，可以使用第三方库如 recordrtc：

startRecordingWithRecordRTC() {
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      this.mediaRecorder = RecordRTC(stream, {
        type: 'audio',
        mimeType: 'audio/wav'
      });
      this.mediaRecorder.startRecording();
      this.isRecording = true;
    });
}

stopRecordingWithRecordRTC() {
  this.mediaRecorder.stopRecording(() => {
    this.audioBlob = this.mediaRecorder.getBlob();
    this.audioUrl = URL.createObjectURL(this.audioBlob);
    this.isRecording = false;
  });
}

注意事项

• 需要在 HTTPS 环境或 localhost 下使用录音功能
• 不同浏览器对音频格式的支持可能不同
• 需要处理用户权限拒绝的情况
• iOS 设备有特殊的限制和要求

完整组件示例

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    <button @click="playRecording" :disabled="!audioUrl">播放录音</button>
    <audio v-if="audioUrl" :src="audioUrl" controls></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      audioChunks: [],
      audioBlob: null,
      audioUrl: '',
      isRecording: false
    };
  },
  methods: {
    startRecording() {
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          this.mediaRecorder = new MediaRecorder(stream);
          this.mediaRecorder.start();
          this.isRecording = true;

          this.mediaRecorder.ondataavailable = event => {
            this.audioChunks.push(event.data);
          };
        })
        .catch(error => {
          console.error('Error accessing microphone:', error);
        });
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.isRecording = false;

      this.mediaRecorder.onstop = () => {
        this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
        this.audioUrl = URL.createObjectURL(this.audioBlob);
        this.audioChunks = [];
      };
    },
    playRecording() {
      const audio = new Audio(this.audioUrl);
      audio.play();
    }
  },
  beforeDestroy() {
    if (this.mediaRecorder && this.isRecording) {
      this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
    }
  }
};
</script>

通过以上方法，可以在 Vue 应用中实现基本的录音功能。根据需求可以进一步扩展，如添加录音时间显示、音频可视化等功能。