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

2025年11月14日 互联网

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

一、录音功能实现基础

1.1 浏览器录音API原理

现代浏览器通过MediaRecorder API实现音频采集，该接口基于WebRTC技术栈，支持PCM、Opus等编码格式。录音流程分为三个阶段：

  • 权限申请：通过navigator.mediaDevices.getUserMedia({ audio: true })获取麦克风访问权限
  • 媒体流处理：创建MediaStream对象并绑定到MediaRecorder实例
  • 数据采集：监听dataavailable事件获取音频Blob数据
  1. // 基础录音控制器
  2. class AudioRecorder {
  3.   constructor() {
  4.     this.mediaRecorder = null
  5.     this.audioChunks = []
  6.     this.isRecording = false
  7.   }
  9.   async startRecording() {
  10.     try {
  11.       const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
  12.       this.mediaRecorder = new MediaRecorder(stream, {
  13.         mimeType: 'audio/webm',
  14.         audioBitsPerSecond: 128000
  15.       })
  17.       this.mediaRecorder.ondataavailable = (e) => {
  18.         this.audioChunks.push(e.data)
  19.       }
  21.       this.mediaRecorder.start(100) // 每100ms触发一次dataavailable
  22.       this.isRecording = true
  23.     } catch (err) {
  24.       console.error('录音启动失败:', err)
  25.       throw err
  26.     }
  27.   }
  28. }

1.2 权限管理最佳实践

  • 动态权限申请：在用户点击录音按钮时触发权限请求，避免页面加载时弹出干扰
  • 权限状态检测：通过navigator.permissions.query({ name: 'microphone' })预检权限状态
  • 错误降级方案：当权限被拒绝时，提供文本输入的替代方案
  1. <template>
  2.   <div>
  3.     <button @click="handleRecordClick" :disabled="isProcessing">
  4.       {{ isRecording ? '停止录音' : '开始录音' }}
  5.     </button>
  6.     <div v-if="permissionDenied" class="error-tip">
  7.       麦克风访问已被拒绝，请通过浏览器设置重新授权
  8.     </div>
  9.   </div>
  10. </template>
  12. <script setup>
  13. import { ref } from 'vue'
  15. const isRecording = ref(false)
  16. const permissionDenied = ref(false)
  17. const isProcessing = ref(false)
  19. const handleRecordClick = async () => {
  20.   if (isRecording.value) {
  21.     // 停止录音逻辑
  22.     return
  23.   }
  25.   try {
  26.     const permissionStatus = await navigator.permissions.query({ name: 'microphone' })
  27.     if (permissionStatus.state === 'denied') {
  28.       permissionDenied.value = true
  29.       return
  30.     }
  31.     // 继续录音流程
  32.   } catch (err) {
  33.     console.warn('权限检测失败:', err)
  34.   }
  35. }
  36. </script>

二、语音转文字服务集成

2.1 服务选型对比

技术方案 优势 局限性
Web Speech API 浏览器原生支持，无需后端 仅支持部分语言，准确率有限
云端ASR服务 高准确率，支持多语言 需处理网络延迟与费用问题
本地模型部署 离线可用，数据隐私可控 硬件要求高，模型体积大

2.2 云端ASR服务实现（以WebSocket为例）

  1. // 语音转文字服务封装
  2. class SpeechToText {
  3.   constructor(apiKey, endpoint) {
  4.     this.apiKey = apiKey
  5.     this.endpoint = endpoint
  6.     this.socket = null
  7.   }
  9.   async connect(audioChunks) {
  10.     return new Promise((resolve, reject) => {
  11.       this.socket = new WebSocket(this.endpoint)
  13.       this.socket.onopen = () => {
  14.         const authHeader = `Bearer ${this.apiKey}`
  15.         this.socket.send(JSON.stringify({
  16.           type: 'auth',
  17.           data: { authorization: authHeader }
  18.         }))
  20.         // 分块发送音频数据
  21.         audioChunks.forEach(chunk => {
  22.           this.socket.send(chunk)
  23.         })
  24.       }
  26.       let fullText = ''
  27.       this.socket.onmessage = (event) => {
  28.         const data = JSON.parse(event.data)
  29.         if (data.type === 'final_result') {
  30.           fullText += data.text
  31.           resolve(fullText)
  32.         } else if (data.type === 'partial') {
  33.           // 实时显示中间结果（可选）
  34.         }
  35.       }
  37.       this.socket.onerror = (err) => reject(err)
  38.     })
  39.   }
  40. }

2.3 错误处理机制

  • 网络异常：设置重试次数与超时时间
  • 音频格式错误：验证Blob的mimeType是否符合服务要求
  • 服务端错误：解析错误响应并显示友好提示
  1. async function transcribeAudio(audioBlob) {
  2.   const MAX_RETRIES = 3
  3.   let retryCount = 0
  5.   while (retryCount < MAX_RETRIES) {
  6.     try {
  7.       const formData = new FormData()
  8.       formData.append('audio', audioBlob, 'recording.webm')
  10.       const response = await fetch('/api/asr', {
  11.         method: 'POST',
  12.         body: formData,
  13.         headers: {
  14.           'Authorization': `Bearer ${API_KEY}`
  15.         }
  16.       })
  18.       if (!response.ok) throw new Error(`HTTP错误: ${response.status}`)
  19.       return await response.json()
  20.     } catch (err) {
  21.       retryCount++
  22.       if (retryCount === MAX_RETRIES) {
  23.         throw new Error('语音识别服务多次尝试失败')
  24.       }
  25.       await new Promise(res => setTimeout(res, 1000 * retryCount))
  26.     }
  27.   }
  28. }

三、Vue组件实现方案

3.1 完整组件示例

  1. <template>
  2.   <div class="voice-assistant">
  3.     <div class="control-panel">
  4.       <button 
  5.         @click="toggleRecording" 
  6.         :class="{ 'recording': isRecording }"
  7.       >
  8.         <icon-mic v-if="!isRecording" />
  9.         <icon-stop v-else />
  10.       </button>
  11.       <div class="status">{{ statusText }}</div>
  12.     </div>
  14.     <div class="transcript-area">
  15.       <div v-for="(line, index) in transcriptLines" :key="index" class="transcript-line">
  16.         {{ line }}
  17.       </div>
  18.     </div>
  20.     <div v-if="error" class="error-message">
  21.       {{ error }}
  22.     </div>
  23.   </div>
  24. </template>
  26. <script setup>
  27. import { ref, onBeforeUnmount } from 'vue'
  28. import { useToast } from 'vue-toastification'
  30. const isRecording = ref(false)
  31. const statusText = ref('准备就绪')
  32. const transcriptLines = ref([])
  33. const error = ref(null)
  34. let mediaRecorder = null
  35. let audioChunks = []
  36. let sttService = null
  38. // 初始化语音转文字服务
  39. onMounted(() => {
  40.   sttService = new SpeechToText(
  41.     import.meta.env.VITE_ASR_API_KEY,
  42.     import.meta.env.VITE_ASR_WS_ENDPOINT
  43.   )
  44. })
  46. const toggleRecording = async () => {
  47.   if (isRecording.value) {
  48.     await stopRecording()
  49.   } else {
  50.     await startRecording()
  51.   }
  52. }
  54. const startRecording = async () => {
  55.   try {
  56.     const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
  57.     mediaRecorder = new MediaRecorder(stream, {
  58.       mimeType: 'audio/webm',
  59.       audioBitsPerSecond: 16000
  60.     })
  62.     audioChunks = []
  63.     mediaRecorder.ondataavailable = (e) => {
  64.       audioChunks.push(e.data)
  65.     }
  67.     mediaRecorder.onstop = async () => {
  68.       statusText.value = '语音识别中...'
  69.       const audioBlob = new Blob(audioChunks, { type: 'audio/webm' })
  70.       try {
  71.         const result = await sttService.recognize(audioBlob)
  72.         transcriptLines.value.push(result.text)
  73.         statusText.value = '识别完成'
  74.       } catch (err) {
  75.         error.value = `识别失败: ${err.message}`
  76.         useToast().error('语音识别服务异常')
  77.       }
  78.     }
  80.     mediaRecorder.start(100)
  81.     isRecording.value = true
  82.     statusText.value = '录音中...'
  83.   } catch (err) {
  84.     error.value = `录音启动失败: ${err.message}`
  85.     useToast().error('无法访问麦克风')
  86.   }
  87. }
  89. const stopRecording = () => {
  90.   if (mediaRecorder && isRecording.value) {
  91.     mediaRecorder.stop()
  92.     mediaRecorder.stream.getTracks().forEach(track => track.stop())
  93.     isRecording.value = false
  94.   }
  95. }
  97. onBeforeUnmount(() => {
  98.   stopRecording()
  99. })
  100. </script>
  102. <style scoped>
  103. .voice-assistant {
  104.   max-width: 600px;
  105.   margin: 0 auto;
  106.   padding: 20px;
  107. }
  109. .control-panel {
  110.   display: flex;
  111.   align-items: center;
  112.   gap: 15px;
  113.   margin-bottom: 20px;
  114. }
  116. button {
  117.   width: 60px;
  118.   height: 60px;
  119.   border-radius: 50%;
  120.   border: none;
  121.   background: #4CAF50;
  122.   color: white;
  123.   cursor: pointer;
  124. }
  126. button.recording {
  127.   background: #F44336;
  128. }
  130. .transcript-area {
  131.   min-height: 200px;
  132.   border: 1px solid #eee;
  133.   padding: 15px;
  134.   border-radius: 8px;
  135. }
  137. .transcript-line {
  138.   margin-bottom: 10px;
  139.   padding-bottom: 10px;
  140.   border-bottom: 1px dashed #eee;
  141. }
  142. </style>

四、性能优化策略

4.1 音频处理优化

  • 采样率标准化：统一转换为16kHz采样率（多数ASR服务推荐）
  • 音频压缩：使用Opus编码减少数据量
  • 分块传输：控制每个数据包大小在50-100KB范围内

4.2 用户体验优化

  • 实时反馈：显示音量波形图增强交互感
  • 断点续传：网络中断后恢复连接时继续传输
  • 多语言支持：根据用户设置自动切换识别语言

五、安全与隐私考虑

  1. 数据加密：传输过程使用TLS 1.2+加密
  2. 本地处理选项：提供WebAssembly实现的本地识别方案
  3. 隐私政策声明：明确告知用户音频数据的处理方式
  4. 临时存储：录音文件在识别完成后自动删除

六、部署与监控

  1. 服务监控：设置ASR服务的调用成功率、响应时间等指标
  2. 降级策略：当云端服务不可用时自动切换到备用方案
  3. 日志记录：记录关键错误信息用于问题排查
  4. A/B测试：对比不同ASR服务的准确率和用户体验

通过以上实现方案，开发者可以构建一个完整的语音交互模块，该方案兼顾了功能实现与用户体验，同时考虑了实际部署中的各种边界情况。在实际开发中，建议先实现核心录音功能，再逐步集成语音转文字服务，最后进行性能优化和错误处理完善。

最新文章