Vue实现AI问答小助手(3)：录音与语音转文字全流程解析

一、技术选型与前置条件

在Vue项目中实现录音与语音转文字功能，需综合考虑浏览器兼容性、性能优化及服务稳定性。推荐技术栈如下：

1. 录音功能：基于浏览器MediaRecorder API实现原生录音，兼容Chrome/Firefox/Edge等现代浏览器
2. 语音转文字：采用WebRTC的SpeechRecognition接口（仅Chrome支持）或集成第三方ASR服务
3. 音频处理：使用Web Audio API进行音频可视化及预处理
4. 文件格式：优先生成WAV格式（无损）或OPUS格式（高压缩率）

环境要求：

• Vue 3.x + Composition API
• 浏览器需支持getUserMedia和MediaRecorder
• HTTPS环境（本地开发可用localhost）

二、录音功能实现

2.1 权限申请与设备初始化

// src/utils/audioRecorder.js
const initAudio = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ 
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        sampleRate: 16000 // 推荐16kHz采样率
      }
    });
    return stream;
  } catch (err) {
    console.error('音频设备访问失败:', err);
    throw new Error('需要麦克风权限');
  }
};

关键点：

• 必须处理用户拒绝权限的场景
• 建议添加设备选择下拉框（通过mediaDevices.enumerateDevices()）
• 采样率建议16kHz（语音识别标准）

2.2 录音核心实现

export class AudioRecorder {
  constructor(options = {}) {
    this.mediaRecorder = null;
    this.audioChunks = [];
    this.recording = false;
    this.config = {
      mimeType: 'audio/webm', // 兼容性最好的格式
      bitsPerSecond: 128000,
      ...options
    };
  }
  async startRecording() {
    if (this.recording) return;
    const stream = await initAudio();
    this.mediaRecorder = new MediaRecorder(stream, this.config);
    this.mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        this.audioChunks.push(event.data);
      }
    };
    this.mediaRecorder.onstop = () => {
      const audioBlob = new Blob(this.audioChunks, { type: this.config.mimeType });
      this.emit('complete', audioBlob);
      this.audioChunks = [];
    };
    this.mediaRecorder.start(100); // 每100ms收集一次数据
    this.recording = true;
  }
  stopRecording() {
    if (!this.recording) return;
    this.mediaRecorder.stop();
    this.recording = false;
  }
}

优化建议：

• 添加最大录音时长限制（如60秒）
• 实现暂停/继续功能
• 添加音量可视化（通过AnalyserNode）

三、语音转文字实现方案

方案1：浏览器原生API（仅Chrome）

// 使用Web Speech API
const recognizeSpeech = () => {
  const recognition = new (window.SpeechRecognition || 
                       window.webkitSpeechRecognition)();
  recognition.continuous = false;
  recognition.interimResults = false;
  recognition.lang = 'zh-CN'; // 中文识别
  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    console.log('识别结果:', transcript);
  };
  recognition.onerror = (event) => {
    console.error('识别错误:', event.error);
  };
  recognition.start();
  return recognition;
};

局限性：

• 仅支持Chrome浏览器
• 无法控制识别引擎参数
• 缺少专业领域词汇支持

方案2：集成第三方ASR服务（推荐）

以阿里云/腾讯云ASR为例（避免特定厂商暗示）：

// 伪代码示例
async function transcribeAudio(audioBlob) {
  // 1. 音频预处理（转成16kHz PCM）
  const audioBuffer = await convertBlobToBuffer(audioBlob);
  const resampledData = resampleAudio(audioBuffer, 16000);
  // 2. 生成Base64或上传文件
  const audioBase64 = arrayBufferToBase64(resampledData);
  // 3. 调用ASR API
  const response = await fetch('YOUR_ASR_API_ENDPOINT', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_API_KEY'
    },
    body: JSON.stringify({
      audio: audioBase64,
      format: 'pcm',
      rate: 16000,
      language: 'zh-CN'
    })
  });
  return response.json();
}

关键处理：

• 音频格式转换（必须符合API要求）
• 网络错误重试机制
• 实时识别流式处理（对于长音频）

四、Vue组件集成示例

<template>
  <div class="voice-assistant">
    <div class="controls">
      <button @click="startRecording" :disabled="isRecording">
        {{ isRecording ? '录音中...' : '开始录音' }}
      </button>
      <button @click="stopRecording" :disabled="!isRecording">
        停止
      </button>
    </div>
    <div v-if="isRecording" class="visualizer">
      <canvas ref="visualizer"></canvas>
    </div>
    <div v-if="transcript" class="result">
      识别结果：<span>{{ transcript }}</span>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { AudioRecorder } from '@/utils/audioRecorder';
const isRecording = ref(false);
const transcript = ref('');
const recorder = new AudioRecorder();
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let analyser = null;
// 音频可视化
const setupVisualizer = (stream) => {
  const source = audioContext.createMediaStreamSource(stream);
  analyser = audioContext.createAnalyser();
  analyser.fftSize = 256;
  source.connect(analyser);
  const canvas = document.querySelector('#visualizer');
  // 实现可视化逻辑...
};
const startRecording = async () => {
  try {
    const stream = await recorder.initStream();
    if (analyser) setupVisualizer(stream);
    recorder.startRecording();
    isRecording.value = true;
  } catch (err) {
    console.error('录音启动失败:', err);
  }
};
const stopRecording = async () => {
  recorder.stopRecording();
  isRecording.value = false;
  // 获取录音Blob并转换
  const blob = await new Promise(resolve => {
    recorder.once('complete', resolve);
  });
  // 调用语音转文字
  const result = await transcribeAudio(blob);
  transcript.value = result.text;
};
onUnmounted(() => {
  if (analyser) analyser.disconnect();
});
</script>

五、常见问题处理

5.1 浏览器兼容性问题

// 检测API支持
const checkBrowserSupport = () => {
  if (!navigator.mediaDevices?.getUserMedia) {
    return '浏览器不支持录音功能';
  }
  if (!(MediaRecorder && MediaRecorder.isTypeSupported)) {
    return '浏览器不支持MediaRecorder';
  }
  return null;
};

5.2 音频处理优化

• 降噪：使用Web Audio API的ConvolverNode
• 断点续传：大文件分片上传
• 格式转换：推荐使用ffmpeg.wasm进行客户端转换

5.3 性能优化

• 录音数据分片传输（避免内存溢出）
• 防抖处理频繁的识别请求
• 缓存常用识别结果

六、扩展功能建议

1. 多语言支持：动态切换识别语言
2. 领域适配：上传专业术语词典
3. 实时反馈：显示识别置信度
4. 历史记录：保存问答对话
5. 离线模式：使用TensorFlow.js本地模型

七、完整实现路线图

1. 第一阶段：完成基础录音功能（2天）
2. 第二阶段：集成ASR服务（3天）
3. 第三阶段：优化用户体验（2天）
4. 第四阶段：安全与性能测试（2天）

推荐学习资源：

• MDN Web Docs: MediaRecorder API
• WebRTC规范文档
• 各云服务商ASR API文档

通过以上实现方案，开发者可以在Vue项目中构建出稳定可靠的语音交互功能。实际开发时建议先实现核心录音功能，再逐步集成语音识别服务，最后进行性能调优。对于企业级应用，建议采用成熟的ASR服务以获得更好的识别准确率和稳定性。