vue实现语音录音

实现语音录音的基本步骤

在Vue中实现语音录音功能通常需要借助浏览器的MediaRecorder API。以下是一个完整的实现方案：

创建录音组件

新建一个Vue组件（如VoiceRecorder.vue），包含以下模板结构：

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

设置组件状态

在脚本部分定义必要的状态：

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.start();

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

      this.isRecording = true;
    } catch (error) {
      console.error('录音权限被拒绝:', error);
    }
  }
}

实现停止录音功能

添加停止录音的方法：

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

    // 释放麦克风资源
    this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
  };
}

添加样式（可选）

根据需要添加基本样式：

<style scoped>
button {
  margin: 10px;
  padding: 8px 16px;
}
</style>

注意事项

1. 该功能需要浏览器支持MediaRecorder API，现代浏览器如Chrome、Firefox、Edge等都支持
2. 需要用户授予麦克风访问权限
3. 录音格式默认为浏览器决定的格式，可通过mimeType参数指定特定格式
4. 在生产环境中应考虑添加错误处理和用户引导

扩展功能

如需保存录音文件，可添加以下方法：

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

并相应地在模板中添加保存按钮。