Vue3集成语音识别：百度API实现录音转文字全流程

2026年1月4日 互联网

Vue3集成语音识别：百度API实现录音转文字全流程

在智能办公、语音交互等场景中，将语音实时转换为文字的需求日益普遍。本文基于Vue3框架，结合主流云服务商的语音识别API，实现长按录音实时转文字及上传音频文件转换的完整功能。通过模块化设计，开发者可快速集成语音识别能力，提升应用交互体验。

一、技术架构设计

1.1 整体流程

系统分为录音采集、音频传输、API调用、结果展示四个核心模块：

  • 录音模块：通过浏览器MediaRecorder API捕获音频流
  • 传输模块：支持实时流式传输与文件分块上传两种模式
  • API对接层：封装百度智能云语音识别SDK的调用逻辑
  • 结果处理层：处理识别结果并更新前端界面

1.2 关键技术选型

  • 录音库：使用原生Web API（MediaRecorder）实现跨浏览器兼容
  • 流式处理：采用WebSocket协议传输实时音频数据
  • API封装：基于Promise的异步调用模式，统一错误处理

二、核心功能实现

2.1 录音组件开发

录音权限管理

  1. // 检查浏览器录音权限
  2. async function checkPermission() {
  3.   try {
  4.     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  5.     stream.getTracks().forEach(track => track.stop());
  6.     return true;
  7.   } catch (err) {
  8.     console.error('录音权限获取失败:', err);
  9.     return false;
  10.   }
  11. }

长按录音实现

  1. <template>
  2.   <div 
  3.     @mousedown="startRecord" 
  4.     @mouseup="stopRecord"
  5.     @mouseleave="cancelRecord"
  6.     class="record-btn"
  7.   >
  8.     长按录音
  9.   </div>
  10. </template>
  12. <script setup>
  13. let mediaRecorder;
  14. let audioChunks = [];
  16. const startRecord = async () => {
  17.   if (!await checkPermission()) return;
  19.   const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  20.   mediaRecorder = new MediaRecorder(stream);
  22.   mediaRecorder.ondataavailable = (event) => {
  23.     audioChunks.push(event.data);
  24.   };
  26.   mediaRecorder.start(100); // 每100ms收集一次数据
  27. };
  29. const stopRecord = () => {
  30.   if (!mediaRecorder) return;
  32.   mediaRecorder.stop();
  33.   mediaRecorder.stream.getTracks().forEach(track => track.stop());
  35.   // 处理录音数据
  36.   const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
  37.   processAudio(audioBlob);
  38.   audioChunks = [];
  39. };
  40. </script>

2.2 百度智能云API集成

初始化配置

  1. // config.js
  2. export const ASR_CONFIG = {
  3.   apiKey: 'your-api-key',
  4.   secretKey: 'your-secret-key',
  5.   endpoint: 'https://aip.baidubce.com/rpc/2.0/asr/v1/recognize'
  6. };
  8. // 生成访问令牌
  9. export async function getAccessToken() {
  10.   const authUrl = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${ASR_CONFIG.apiKey}&client_secret=${ASR_CONFIG.secretKey}`;
  12.   const response = await fetch(authUrl);
  13.   const data = await response.json();
  14.   return data.access_token;
  15. }

实时流式识别

  1. async function streamRecognize(audioStream) {
  2.   const accessToken = await getAccessToken();
  3.   const wsUrl = `wss://vop.baidu.com/ws_async?token=${accessToken}`;
  5.   const ws = new WebSocket(wsUrl);
  6.   let isFirstFrame = true;
  8.   ws.onopen = () => {
  9.     // 发送配置信息
  10.     const config = {
  11.       format: 'wav',
  12.       rate: 16000,
  13.       channel: 1,
  14.       cuid: 'your-device-id',
  15.       token: accessToken
  16.     };
  17.     ws.send(JSON.stringify({...config, type: 'START'}));
  18.   };
  20.   ws.onmessage = (event) => {
  21.     const data = JSON.parse(event.data);
  22.     if (data.result) {
  23.       emit('text-update', data.result.join(''));
  24.     }
  25.   };
  27.   // 创建可读流处理
  28.   const reader = audioStream.getReader();
  29.   const processStream = async () => {
  30.     const { done, value } = await reader.read();
  31.     if (done) {
  32.       ws.send(JSON.stringify({type: 'END'}));
  33.       return;
  34.     }
  35.     ws.send(value);
  36.     await processStream();
  37.   };
  39.   processStream();
  40. }

2.3 文件上传识别

  1. async function uploadRecognize(audioFile) {
  2.   const accessToken = await getAccessToken();
  3.   const formData = new FormData();
  4.   formData.append('audio', audioFile);
  5.   formData.append('format', 'wav');
  6.   formData.append('rate', 16000);
  7.   formData.append('channel', 1);
  8.   formData.append('token', accessToken);
  10.   const response = await fetch(ASR_CONFIG.endpoint, {
  11.     method: 'POST',
  12.     body: formData
  13.   });
  15.   const result = await response.json();
  16.   return result.result.join('');
  17. }

三、性能优化与最佳实践

3.1 录音质量优化

  • 采样率设置：推荐16kHz采样率，平衡音质与数据量
  • 编码格式：优先选择PCM或WAV格式，避免有损压缩
  • 分块处理：每100ms处理一次音频数据，减少内存占用

3.2 API调用优化

  • 连接复用：保持WebSocket长连接，避免频繁重连
  • 错误重试：实现指数退避重试机制
  • 并发控制：限制同时进行的识别请求数量

3.3 用户体验优化

  • 进度反馈：显示录音时长与识别进度
  • 结果缓存：本地缓存最近识别结果
  • 断点续传：支持大文件分片上传

四、完整组件实现

  1. <template>
  2.   <div class="asr-container">
  3.     <div 
  4.       class="record-btn"
  5.       @mousedown="startRecord"
  6.       @mouseup="stopRecord"
  7.       @mouseleave="cancelRecord"
  8.     >
  9.       {{ isRecording ? '松开结束' : '长按录音' }}
  10.     </div>
  12.     <div class="upload-area" @click="triggerUpload">
  13.       <input 
  14.         type="file" 
  15.         ref="fileInput" 
  16.         @change="handleFileUpload" 
  17.         accept="audio/*" 
  18.         style="display: none"
  19.       >
  20.       或上传音频文件
  21.     </div>
  23.     <div class="result-box">
  24.       <div v-for="(line, index) in resultLines" :key="index" class="result-line">
  25.         {{ line }}
  26.       </div>
  27.     </div>
  28.   </div>
  29. </template>
  31. <script setup>
  32. import { ref } from 'vue';
  33. import { ASR_CONFIG, getAccessToken } from './config';
  35. const isRecording = ref(false);
  36. const resultLines = ref([]);
  37. const fileInput = ref(null);
  38. let mediaRecorder;
  39. let audioChunks = [];
  40. let currentStream;
  42. const startRecord = async () => {
  43.   if (!await checkPermission()) return;
  45.   isRecording.value = true;
  46.   currentStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  47.   mediaRecorder = new MediaRecorder(currentStream, {
  48.     mimeType: 'audio/wav',
  49.     audioBitsPerSecond: 256000
  50.   });
  52.   mediaRecorder.ondataavailable = (event) => {
  53.     audioChunks.push(event.data);
  54.   };
  56.   mediaRecorder.start(100);
  57. };
  59. const stopRecord = async () => {
  60.   if (!mediaRecorder) return;
  62.   mediaRecorder.stop();
  63.   mediaRecorder.stream.getTracks().forEach(track => track.stop());
  64.   isRecording.value = false;
  66.   const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
  67.   const result = await uploadRecognize(audioBlob);
  68.   resultLines.value.push(result);
  69.   audioChunks = [];
  70. };
  72. const triggerUpload = () => {
  73.   fileInput.value.click();
  74. };
  76. const handleFileUpload = async (event) => {
  77.   const file = event.target.files[0];
  78.   if (!file) return;
  80.   const result = await uploadRecognize(file);
  81.   resultLines.value.push(result);
  82. };
  83. </script>

五、安全与合规考虑

  1. 数据传输安全：确保所有音频数据通过HTTPS/WSS加密传输
  2. 隐私保护：明确告知用户数据使用范围，提供隐私政策链接
  3. 权限管理：遵循最小权限原则，仅请求必要的麦克风权限
  4. 日志脱敏：避免在前端记录原始音频或敏感识别结果

六、扩展功能建议

  1. 多语言支持：通过API参数切换识别语言类型
  2. 标点预测：启用百度API的标点符号预测功能
  3. 热词优化：上传行业术语表提升专业词汇识别率
  4. 实时纠错：结合NLP模型实现识别结果后处理

通过本文实现的方案，开发者可在Vue3项目中快速集成语音识别能力。实际开发中，建议根据业务场景调整参数配置，并建立完善的错误处理机制。对于高并发场景，可考虑引入消息队列缓冲请求，确保系统稳定性。

最新文章