一、系统功能概述

本系统主要实现三大核心功能：长按触发录音、实时语音转文字、音频文件上传转写。采用Vue3作为前端框架，利用浏览器WebRTC API实现录音功能，通过百度语音识别API完成语音到文本的转换。系统包含实时流式识别与批量文件识别两种模式，适用于会议记录、语音输入、智能客服等场景。

1.1 技术架构选型

前端采用Vue3+Composition API构建响应式界面，使用RecordRTC库处理音频采集，通过axios与后端API交互。后端可选用Node.js或Python搭建简单代理服务，解决跨域问题并处理API密钥管理。百度语音识别API提供高精度的语音转写服务，支持中英文及多种方言识别。

二、录音功能实现

2.1 录音按钮交互设计

采用长按触发机制提升用户体验，通过touchstart和touchend事件计算按压时长：

let pressTimer;
const startPress = () => {
  pressTimer = setTimeout(() => {
    startRecording(); // 长按1秒后开始录音
  }, 1000);
};
const cancelPress = () => {
  clearTimeout(pressTimer);
};
// 在按钮元素上绑定
<button 
  @touchstart="startPress" 
  @touchend="cancelPress"
  @mousedown="startPress" 
  @mouseup="cancelPress"
>
  按住说话
</button>

2.2 音频采集实现

使用RecordRTC库简化音频采集流程：

import RecordRTC from 'recordrtc';
let recorder;
let audioStream;
const startRecording = async () => {
  try {
    audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    recorder = new RecordRTC(audioStream, {
      type: 'audio/wav',
      mimeType: 'audio/wav',
      recorderType: StereoAudioRecorder,
      desiredSampRate: 16000
    });
    recorder.startRecording();
    // 显示录音状态UI
  } catch (e) {
    console.error('录音失败:', e);
  }
};
const stopRecording = () => {
  if (!recorder) return;
  recorder.stopRecording(() => {
    const blob = recorder.getBlob();
    processAudio(blob); // 处理获取的音频Blob
    recorder.destroy();
    audioStream.getTracks().forEach(track => track.stop());
  });
};

三、百度语音识别API集成

3.1 API准备与配置

1. 登录百度智能云控制台
2. 创建语音识别应用，获取API Key和Secret Key
3. 生成Access Token（有效期30天）：

   const getAccessToken = async () => {
   const result = await axios.get('https://aip.baidubce.com/oauth/2.0/token', {
    params: {
      grant_type: 'client_credentials',
      client_id: '您的API Key',
      client_secret: '您的Secret Key'
    }
   });
   return result.data.access_token;
   };

3.2 实时流式识别实现

百度API支持WebSocket长连接实现实时转写：

const startRealTimeRecognition = async (audioBlob) => {
  const token = await getAccessToken();
  const wsUrl = `wss://vop.baidu.com/websocket_socket.do?token=${token}&cuid=您的设备ID&codec=wav&format=pcm&sample=16000&channel=1`;
  const ws = new WebSocket(wsUrl);
  let isFirstFrame = true;
  ws.onopen = () => {
    console.log('WebSocket连接建立');
    // 发送配置信息
    ws.send(JSON.stringify({
      common: { app_id: '您的应用ID' },
      business: {
        domain: 'general',
        language: 'zh',
        accent: 'mandarin'
      }
    }));
  };
  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.result) {
      // 实时显示识别结果
      realTimeText.value += data.result.replace(/[，。？、]/g, '');
    }
  };
  // 音频分片发送
  const fileReader = new FileReader();
  fileReader.onload = () => {
    const arrayBuffer = fileReader.result;
    const view = new DataView(arrayBuffer);
    const sliceSize = 1280; // 每片1280字节
    for (let i = 0; i < view.byteLength; i += sliceSize) {
      const chunk = view.slice(i, Math.min(i + sliceSize, view.byteLength));
      setTimeout(() => {
        if (ws.readyState === WebSocket.OPEN) {
          ws.send(new Blob([chunk]));
        }
      }, isFirstFrame ? 0 : 100); // 首包立即发送，后续间隔100ms
      isFirstFrame = false;
    }
  };
  fileReader.readAsArrayBuffer(audioBlob);
};

3.3 文件上传识别实现

对于已录制的音频文件，使用REST API进行识别：

const uploadAndRecognize = async (audioBlob) => {
  const token = await getAccessToken();
  const formData = new FormData();
  formData.append('audio', audioBlob, 'recording.wav');
  formData.append('format', 'wav');
  formData.append('rate', 16000);
  formData.append('channel', 1);
  formData.append('token', token);
  formData.append('cuid', '您的设备ID');
  formData.append('len', audioBlob.size);
  try {
    const response = await axios.post(
      'https://vop.baidu.com/server_api',
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    );
    return response.data.result;
  } catch (error) {
    console.error('识别失败:', error);
    return '识别出错';
  }
};

四、完整流程实现

4.1 组件化设计

创建SpeechRecognition组件：

<template>
  <div class="speech-container">
    <div class="record-btn" 
         @touchstart="startPress" 
         @touchend="cancelPress"
         @mousedown="startPress" 
         @mouseup="cancelPress">
      {{ recording ? '松开结束' : '按住说话' }}
    </div>
    <div class="status">{{ statusText }}</div>
    <div class="result">{{ recognitionResult }}</div>
    <input type="file" @change="handleFileUpload" accept="audio/*" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
// 引入录音和识别函数...
const recording = ref(false);
const statusText = ref('');
const recognitionResult = ref('');
// 实现各方法...
</script>

4.2 性能优化建议

1. 音频预处理：使用Web Audio API进行降噪处理
2. 分片传输：大文件分块上传，避免内存溢出
3. 节流控制：实时识别时控制发送频率（建议100-200ms/次）
4. 错误重试：网络异常时实现自动重连机制
5. 结果缓存：本地存储历史识别记录

五、部署与注意事项

1. 跨域处理：后端代理需配置CORS，或使用Nginx反向代理
2. 安全策略：
   • 敏感操作需用户确认（如录音权限）
   • API密钥不应暴露在前端代码中
   • 实现HTTPS确保数据传输安全
3. 兼容性测试：
   • 主流浏览器（Chrome/Firefox/Safari）
   • 移动端（iOS/Android）不同版本
   • 不同采样率音频适配

六、扩展功能建议

1. 多语言支持：通过API参数切换识别语言
2. 说话人分离：使用百度API的说话人 diarization 功能
3. 热点词高亮：对专业术语进行特殊标记
4. 实时编辑：允许用户修正识别结果并反馈优化
5. 导出功能：支持TXT/DOCX等多种格式导出

本实现方案通过Vue3的响应式特性与百度语音识别API的高精度识别能力结合，构建了完整的语音转文字系统。实际开发中需根据具体业务场景调整参数配置，并做好异常处理和用户体验优化。建议先在小规模测试环境中验证功能，再逐步扩展到生产环境。