Vue问答助手进阶：录音与语音转文字全流程实现

2025年11月14日 互联网

Vue问答助手进阶：录音与语音转文字全流程实现

一、录音功能实现基础

在Vue3项目中实现录音功能，核心在于使用Web Audio API和MediaRecorder API。这两个浏览器原生API提供了完整的音频采集和处理能力。

1.1 音频采集流程设计

首先需要获取用户麦克风权限，这通过navigator.mediaDevices.getUserMedia()方法实现。建议采用渐进式权限请求策略：

  1. async function requestAudioPermission() {
  2.   try {
  3.     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  4.     return stream;
  5.   } catch (err) {
  6.     console.error('权限请求失败:', err);
  7.     // 根据错误类型提供不同提示
  8.     if (err.name === 'NotAllowedError') {
  9.       alert('需要麦克风权限才能使用语音功能');
  10.     }
  11.     return null;
  12.   }
  13. }

1.2 录音状态管理

使用Vue3的Composition API管理录音状态：

  1. import { ref } from 'vue';
  3. export function useRecorder() {
  4.   const isRecording = ref(false);
  5.   const mediaStream = ref(null);
  6.   const audioChunks = ref([]);
  7.   const mediaRecorder = ref(null);
  9.   const startRecording = async () => {
  10.     const stream = await requestAudioPermission();
  11.     if (!stream) return;
  13.     mediaStream.value = stream;
  14.     audioChunks.value = [];
  16.     mediaRecorder.value = new MediaRecorder(stream);
  17.     mediaRecorder.value.ondataavailable = (event) => {
  18.       if (event.data.size > 0) {
  19.         audioChunks.value.push(event.data);
  20.       }
  21.     };
  23.     mediaRecorder.value.start(100); // 每100ms收集一次数据
  24.     isRecording.value = true;
  25.   };
  27.   const stopRecording = () => {
  28.     if (!mediaRecorder.value) return;
  30.     mediaRecorder.value.stop();
  31.     mediaRecorder.value.onstop = () => {
  32.       const audioBlob = new Blob(audioChunks.value, { type: 'audio/wav' });
  33.       // 处理音频Blob
  34.       mediaStream.value?.getTracks().forEach(track => track.stop());
  35.       isRecording.value = false;
  36.     };
  37.   };
  39.   return { isRecording, startRecording, stopRecording };
  40. }

1.3 录音可视化实现

结合Canvas API实现声波可视化：

  1. function setupVisualization(audioContext, analyser) {
  2.   const canvas = document.getElementById('visualizer');
  3.   const ctx = canvas.getContext('2d');
  4.   const bufferLength = analyser.frequencyBinCount;
  5.   const dataArray = new Uint8Array(bufferLength);
  7.   function draw() {
  8.     requestAnimationFrame(draw);
  9.     analyser.getByteFrequencyData(dataArray);
  11.     ctx.fillStyle = 'rgb(240, 240, 240)';
  12.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  14.     const barWidth = (canvas.width / bufferLength) * 2.5;
  15.     let x = 0;
  17.     for (let i = 0; i < bufferLength; i++) {
  18.       const barHeight = dataArray[i] / 2;
  19.       ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
  20.       ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
  21.       x += barWidth + 1;
  22.     }
  23.   }
  25.   draw();
  26. }

二、语音转文字技术方案

语音转文字(ASR)功能可通过浏览器原生API或第三方服务实现，各有其适用场景。

2.1 Web Speech API实现方案

浏览器原生SpeechRecognition API提供基础语音识别能力：

  1. function setupSpeechRecognition() {
  2.   const recognition = new (window.SpeechRecognition || 
  3.                        window.webkitSpeechRecognition)();
  5.   recognition.continuous = false; // 单次识别
  6.   recognition.interimResults = true; // 实时返回中间结果
  7.   recognition.lang = 'zh-CN'; // 设置中文识别
  9.   recognition.onresult = (event) => {
  10.     let interimTranscript = '';
  11.     let finalTranscript = '';
  13.     for (let i = event.resultIndex; i < event.results.length; i++) {
  14.       const transcript = event.results[i][0].transcript;
  15.       if (event.results[i].isFinal) {
  16.         finalTranscript += transcript;
  17.       } else {
  18.         interimTranscript += transcript;
  19.       }
  20.     }
  22.     // 更新Vue组件中的文本
  23.     emit('update-text', finalTranscript || interimTranscript);
  24.   };
  26.   recognition.onerror = (event) => {
  27.     console.error('识别错误:', event.error);
  28.   };
  30.   return recognition;
  31. }

2.2 第三方ASR服务集成

对于需要更高准确率的场景，可集成专业ASR服务。以下以阿里云语音识别为例：

2.2.1 服务端配置

  1. // Node.js服务端示例
  2. const express = require('express');
  3. const router = express.Router();
  4. const AliyunSDK = require('aliyun-sdk');
  6. router.post('/asr', async (req, res) => {
  7.   const client = new AliyunSDK({
  8.     accessKeyId: 'YOUR_ACCESS_KEY',
  9.     accessKeySecret: 'YOUR_SECRET_KEY',
  10.     endpoint: 'nls-meta.cn-shanghai.aliyuncs.com',
  11.     apiVersion: '2019-02-28'
  12.   });
  14.   const params = {
  15.     AppKey: 'YOUR_APP_KEY',
  16.     Format: 'wav',
  17.     SampleRate: '16000',
  18.     FileLink: req.body.audioUrl // 或直接上传音频文件
  19.   };
  21.   try {
  22.     const result = await client.request('CreateToken', params);
  23.     res.json({ token: result.Token });
  24.   } catch (err) {
  25.     res.status(500).json({ error: err.message });
  26.   }
  27. });

2.2.2 前端集成

  1. async function uploadAndRecognize(audioBlob) {
  2.   // 1. 上传音频到服务器
  3.   const formData = new FormData();
  4.   formData.append('audio', audioBlob, 'recording.wav');
  6.   const uploadRes = await fetch('/api/upload', {
  7.     method: 'POST',
  8.     body: formData
  9.   });
  11.   const { audioUrl } = await uploadRes.json();
  13.   // 2. 获取ASR服务token
  14.   const tokenRes = await fetch('/api/asr/token');
  15.   const { token } = await tokenRes.json();
  17.   // 3. 初始化WebSocket连接
  18.   const ws = new WebSocket('wss://nls-gateway.cn-shanghai.aliyuncs.com/ws/v1');
  20.   ws.onopen = () => {
  21.     const startReq = {
  22.       header: {
  23.         app_key: 'YOUR_APP_KEY',
  24.         token: token
  25.       },
  26.       payload: {
  27.         audio: {
  28.           audio_url: audioUrl,
  29.           format: 'wav',
  30.           sample_rate: 16000
  31.         },
  32.         service_type: 'asr',
  33.         language: 'zh_cn',
  34.         enable_punctuation_prediction: true,
  35.         enable_words: false
  36.       }
  37.     };
  38.     ws.send(JSON.stringify(startReq));
  39.   };
  41.   let fullText = '';
  42.   ws.onmessage = (event) => {
  43.     const data = JSON.parse(event.data);
  44.     if (data.header.status === 20000) {
  45.       if (data.payload.result) {
  46.         fullText += data.payload.result.sentences.map(s => s.text).join('');
  47.         // 更新Vue组件显示
  48.         emit('update-text', fullText);
  49.       }
  50.     }
  51.   };
  52. }

三、完整交互流程设计

3.1 组件化实现

  1. <template>
  2.   <div class="voice-assistant">
  3.     <div class="controls">
  4.       <button @click="toggleRecording" :disabled="isProcessing">
  5.         {{ isRecording ? '停止录音' : '开始录音' }}
  6.       </button>
  7.       <button @click="startSpeechRecognition" v-if="!isRecording">
  8.         语音转文字
  9.       </button>
  10.     </div>
  12.     <div class="visualization">
  13.       <canvas id="visualizer" width="600" height="200"></canvas>
  14.     </div>
  16.     <div class="transcript">
  17.       <div class="interim" v-if="interimText">{{ interimText }}</div>
  18.       <div class="final" v-else>{{ finalText }}</div>
  19.     </div>
  21.     <div class="question-area">
  22.       <textarea v-model="question" placeholder="输入问题或通过语音提问"></textarea>
  23.       <button @click="submitQuestion" :disabled="!question.trim()">
  24.         提交问题
  25.       </button>
  26.     </div>
  27.   </div>
  28. </template>
  30. <script setup>
  31. import { ref } from 'vue';
  32. import { useRecorder } from './composables/recorder';
  34. const { isRecording, startRecording, stopRecording } = useRecorder();
  35. const interimText = ref('');
  36. const finalText = ref('');
  37. const question = ref('');
  38. const isProcessing = ref(false);
  40. // 语音转文字逻辑
  41. const startSpeechRecognition = () => {
  42.   const recognition = setupSpeechRecognition();
  43.   recognition.start();
  45.   recognition.onend = () => {
  46.     question.value = finalText.value;
  47.     interimText.value = '';
  48.   };
  49. };
  51. // 录音完成处理
  52. const onRecordingStop = (audioBlob) => {
  53.   isProcessing.value = true;
  54.   uploadAndRecognize(audioBlob)
  55.     .then(text => {
  56.       question.value = text;
  57.       isProcessing.value = false;
  58.     })
  59.     .catch(() => isProcessing.value = false);
  60. };
  62. const toggleRecording = () => {
  63.   if (isRecording.value) {
  64.     stopRecording();
  65.     // 这里需要修改recorder逻辑，在stop时调用onRecordingStop
  66.   } else {
  67.     startRecording();
  68.   }
  69. };
  70. </script>

3.2 性能优化策略

  1. 音频预处理：

    • 采样率统一转换为16kHz（ASR服务标准）

    • 使用Web Audio API进行降噪处理

      1. function createAudioContext(stream) {
      2. const audioContext = new (window.AudioContext || 
      3.                         window.webkitAudioContext)();
      4. const source = audioContext.createMediaStreamSource(stream);
      6. // 创建降噪节点
      7. const processor = audioContext.createScriptProcessor(4096, 1, 1);
      8. processor.onaudioprocess = (audioProcessingEvent) => {
      9.   const input = audioProcessingEvent.inputBuffer.getChannelData(0);
      10.   // 实现简单的降噪算法
      11.   const output = input.map(sample => {
      12.     return Math.abs(sample) < 0.01 ? 0 : sample;
      13.   });
      14.   // 将处理后的数据传递给ASR
      15. };
      17. source.connect(processor);
      18. return { audioContext, processor };
      19. }

  2. 分块传输优化：

    • 对于长音频，采用分块上传策略
    • 实现断点续传机制

  3. 错误恢复机制：

    • 录音失败时自动重试（最多3次）
    • 网络中断时缓存音频数据，网络恢复后继续传输

四、安全与隐私考虑

4.1 权限管理最佳实践

  1. 采用”按需请求”策略，只在用户点击录音按钮时请求权限
  2. 提供清晰的权限用途说明
  3. 实现权限状态持久化，避免重复请求

4.2 数据安全措施

  1. 音频数据传输使用HTTPS/WSS加密
  2. 敏感操作（如ASR服务调用）需要用户确认
  3. 实现自动数据清理机制，录音完成后删除本地缓存

4.3 隐私政策集成

  1. 在应用启动时显示隐私政策摘要
  2. 提供完整的隐私政策链接
  3. 记录所有语音数据处理操作日志

五、测试与调试方案

5.1 单元测试示例

  1. import { mount } from '@vue/test-utils';
  2. import VoiceAssistant from '@/components/VoiceAssistant.vue';
  4. describe('VoiceAssistant.vue', () => {
  5.   it('正确显示录音状态', async () => {
  6.     const wrapper = mount(VoiceAssistant);
  7.     expect(wrapper.find('.controls button').text()).toBe('开始录音');
  9.     await wrapper.find('.controls button').trigger('click');
  10.     expect(wrapper.vm.isRecording).toBe(true);
  11.     expect(wrapper.find('.controls button').text()).toBe('停止录音');
  12.   });
  14.   it('语音转文字结果正确显示', async () => {
  15.     const wrapper = mount(VoiceAssistant, {
  16.       global: {
  17.         mocks: {
  18.           setupSpeechRecognition: () => ({
  19.             start: () => {
  20.               setTimeout(() => {
  21.                 wrapper.vm.finalText = '测试语音内容';
  22.               }, 100);
  23.             }
  24.           })
  25.         }
  26.       }
  27.     });
  29.     await wrapper.find('button:contains("语音转文字")').trigger('click');
  30.     await new Promise(resolve => setTimeout(resolve, 150));
  31.     expect(wrapper.find('.final').text()).toBe('测试语音内容');
  32.   });
  33. });

5.2 跨浏览器兼容性处理

  1. 检测API可用性：

    1. function checkBrowserSupport() {
    2. const support = {
    3.  getUserMedia: !!navigator.mediaDevices?.getUserMedia,
    4.  speechRecognition: !!(window.SpeechRecognition || window.webkitSpeechRecognition),
    5.  mediaRecorder: !!window.MediaRecorder
    6. };
    8. if (!support.getUserMedia) {
    9.  alert('您的浏览器不支持麦克风访问，请使用Chrome/Firefox/Edge最新版');
    10. }
    12. return support;
    13. }

  2. 提供降级方案：

    • 不支持录音时显示文本输入框
    • 不支持语音识别时隐藏相关按钮

六、部署与监控

6.1 服务端监控指标

  1. ASR请求成功率
  2. 平均响应时间
  3. 错误率按错误类型分类

6.2 前端性能监控

  1. // 使用Performance API监控录音性能
  2. function monitorPerformance() {
  3.   const observer = new PerformanceObserver((list) => {
  4.     for (const entry of list.getEntries()) {
  5.       if (entry.name === 'audio-process') {
  6.         console.log(`音频处理耗时: ${entry.duration}ms`);
  7.         // 上报到监控系统
  8.       }
  9.     }
  10.   });
  12.   observer.observe({ entryTypes: ['measure'] });
  14.   // 在关键代码段前后添加测量
  15.   performance.mark('audio-start');
  16.   // ...音频处理代码...
  17.   performance.mark('audio-end');
  18.   performance.measure('audio-process', 'audio-start', 'audio-end');
  19. }

6.3 日志收集方案

  1. 前端错误日志：

    1. window.addEventListener('error', (event) => {
    2. const log = {
    3.  type: 'frontend-error',
    4.  message: event.message,
    5.  filename: event.filename,
    6.  lineno: event.lineno,
    7.  stack: event.error?.stack,
    8.  timestamp: new Date().toISOString()
    9. };
    11. fetch('/api/logs', {
    12.  method: 'POST',
    13.  headers: { 'Content-Type': 'application/json' },
    14.  body: JSON.stringify(log)
    15. });
    16. });

  2. 服务端ASR日志：

    • 记录每个请求的音频时长、识别结果、处理时间
    • 关联用户ID（需匿名化处理）

本实现方案提供了从录音采集到语音转文字的完整技术路径，结合了浏览器原生API和第三方专业服务，既保证了基础功能的可用性，又提供了高准确率的升级方案。开发者可根据实际需求选择适合的实现方式，并通过组件化设计提高代码复用性。实际开发中还需注意权限管理、错误处理和性能优化等关键环节，确保应用的稳定性和用户体验。

最新文章
热门标签