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

一、技术选型与前置条件

在Vue项目中实现录音与语音转文字功能，需明确技术栈与运行环境要求。录音功能依赖浏览器提供的MediaRecorder API或第三方库（如Recorder.js），而语音转文字可通过Web Speech API或调用云端语音识别服务（如阿里云、腾讯云等）实现。

1. 浏览器兼容性

MediaRecorder API：支持Chrome、Firefox、Edge等现代浏览器，但Safari需14.0+版本。
Web Speech API：仅Chrome和Edge支持语音识别，Firefox和Safari暂未实现。
第三方库：如Recorder.js可兼容旧版浏览器，但需额外引入。

2. 云端服务对比

服务	准确率	延迟	费用	适用场景
阿里云ASR	高	低	按量计费	企业级高并发场景
腾讯云ASR	中高	中	免费额度	中小规模应用
Web Speech	低	高	免费	快速原型开发

建议：开发阶段使用Web Speech API快速验证，上线后切换至云端服务保障稳定性。

二、录音功能实现

1. 使用MediaRecorder API

// 录音组件核心逻辑
export default {
  data() {
    return {
      mediaRecorder: null,
      audioChunks: [],
      isRecording: false
    };
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        this.mediaRecorder = new MediaRecorder(stream);
        this.audioChunks = [];
        this.mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            this.audioChunks.push(event.data);
          }
        };
        this.mediaRecorder.onstop = () => {
          const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
          this.uploadAudio(audioBlob); // 上传至服务器或转文字
        };
        this.mediaRecorder.start();
        this.isRecording = true;
      } catch (error) {
        console.error('录音失败:', error);
      }
    },
    stopRecording() {
      if (this.mediaRecorder && this.isRecording) {
        this.mediaRecorder.stop();
        this.isRecording = false;
      }
    }
  }
};

2. 第三方库集成（Recorder.js）

<!-- 引入Recorder.js -->
<script src="https://cdn.jsdelivr.net/npm/recorderjs@1.2.0/recorder.min.js"></script>
<script>
export default {
  methods: {
    initRecorder() {
      const AudioContext = window.AudioContext || window.webkitAudioContext;
      const audioContext = new AudioContext();
      const recorder = new Recorder(audioContext.createMediaStreamSource(stream));
      recorder.record();
      setTimeout(() => {
        recorder.stop();
        recorder.exportWAV((blob) => {
          this.uploadAudio(blob);
        });
      }, 3000); // 录制3秒
    }
  }
};
</script>

3. 常见问题处理

权限拒绝：监听navigator.mediaDevices.getUserMedia的Promise.reject，提示用户开启麦克风权限。
采样率兼容：通过AudioContext.createMediaStreamSource统一采样率至16kHz（ASR服务常用）。

内存泄漏：在beforeDestroy生命周期中关闭音频流：

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

三、语音转文字实现

1. Web Speech API（客户端）

// 语音识别组件
export default {
  methods: {
    startSpeechRecognition() {
      const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
      recognition.lang = 'zh-CN';
      recognition.interimResults = true;
      recognition.onresult = (event) => {
        const transcript = Array.from(event.results)
          .map(result => result[0].transcript)
          .join('');
        this.$emit('transcript', transcript);
      };
      recognition.start();
      this.$emit('status', 'listening');
    }
  }
};

2. 云端ASR服务集成（以阿里云为例）

// 调用阿里云语音识别API
async function transcribeAudio(audioBlob) {
  const formData = new FormData();
  formData.append('audio', audioBlob, 'recording.wav');
  const response = await fetch('https://your-asr-endpoint.com/api', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'X-App-Id': 'YOUR_APP_ID'
    },
    body: formData
  });
  return response.json();
}
// Vue组件中使用
export default {
  methods: {
    async handleAudioUpload(blob) {
      const result = await transcribeAudio(blob);
      this.question = result.transcript;
      this.submitToAI(); // 提交至AI问答模块
    }
  }
};

3. 性能优化策略

分片上传：对超过10MB的音频文件分片上传，避免单次请求超时。
Web Worker处理：将音频解码任务移至Web Worker，避免阻塞UI线程。
缓存机制：对重复音频片段（如“嗯”“啊”）建立哈希缓存，减少ASR调用次数。

四、完整流程示例

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    <div v-if="transcript">{{ transcript }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      audioChunks: [],
      isRecording: false,
      transcript: ''
    };
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        this.mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });
        this.audioChunks = [];
        this.mediaRecorder.ondataavailable = (event) => {
          this.audioChunks.push(event.data);
        };
        this.mediaRecorder.onstop = async () => {
          const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
          this.transcript = await this.transcribeAudio(audioBlob);
          stream.getTracks().forEach(track => track.stop());
        };
        this.mediaRecorder.start(100); // 每100ms收集一次数据
        this.isRecording = true;
      } catch (error) {
        console.error('录音失败:', error);
      }
    },
    stopRecording() {
      if (this.mediaRecorder) {
        this.mediaRecorder.stop();
        this.isRecording = false;
      }
    },
    async transcribeAudio(blob) {
      // 实际项目中替换为云端ASR调用
      return new Promise(resolve => {
        setTimeout(() => {
          resolve('这是模拟的语音转文字结果');
        }, 800);
      });
    }
  }
};
</script>

五、进阶优化方向

实时语音转文字：通过WebSocket建立长连接，实现边录音边转文字。
多语言支持：动态切换ASR服务的语言参数（如en-US、ja-JP）。
噪声抑制：使用WebRTC的AudioContext添加降噪滤波器。
端到端加密：对录音数据加密后上传，保障用户隐私。

通过以上技术实现，Vue项目可构建出具备专业级录音与语音转文字能力的AI问答小助手，满足从原型开发到生产部署的全流程需求。