一、方案概述

在需要快速记录语音内容的场景中（如会议纪要、语音笔记、客服对话等），通过浏览器录音功能采集音频数据，结合百度语音识别API实现实时或离线的语音转文字功能，能显著提升信息处理效率。本方案基于Vue3框架，封装可复用的录音组件，支持长按触发录音，并通过WebSocket或HTTP接口与百度语音识别API交互，实现音频数据的实时上传与文本结果的动态展示。

二、核心功能实现

1. 录音功能封装

1.1 录音权限与设备选择

使用Web Audio API和MediaRecorder API实现浏览器端录音，需先请求用户麦克风权限：

const startRecording = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const mediaRecorder = new MediaRecorder(stream);
    // 录音逻辑...
  } catch (err) {
    console.error('录音权限错误:', err);
  }
};

通过navigator.mediaDevices.enumerateDevices()可获取可用音频设备列表，允许用户切换输入源。

1.2 长按触发录音

通过监听mousedown和mouseup事件实现长按逻辑：

let recordTimer;
const handleMouseDown = () => {
  recordTimer = setTimeout(() => {
    startRecording(); // 长按1秒后开始录音
  }, 1000);
};
const handleMouseUp = () => {
  clearTimeout(recordTimer);
  // 停止录音...
};

1.3 音频数据采集与分块

使用MediaRecorder.ondataavailable事件获取音频Blob数据，并通过chunks数组暂存：

let chunks = [];
mediaRecorder.ondataavailable = (e) => {
  chunks.push(e.data);
  // 实时上传或本地暂存...
};

2. 百度语音识别API集成

2.1 API准备与鉴权

在百度智能云控制台开通语音识别服务，获取API Key和Secret Key，生成访问令牌（Access Token）：

const getAccessToken = async () => {
  const response = await fetch('https://aip.baidubce.com/oauth/2.0/token', {
    method: 'POST',
    body: new URLSearchParams({
      grant_type: 'client_credentials',
      client_id: 'YOUR_API_KEY',
      client_secret: 'YOUR_SECRET_KEY',
    }),
  });
  return await response.json();
};

2.2 实时语音识别（WebSocket）

百度语音识别API支持WebSocket协议实现流式识别，适合长语音或实时场景：

const startRealTimeRecognition = async (token) => {
  const ws = new WebSocket(
    `wss://vop.baidu.com/websocket_sock/json?token=${token}&cuid=YOUR_DEVICE_ID`
  );
  ws.onopen = () => {
    // 发送配置信息
    ws.send(JSON.stringify({
      format: 'wav',
      rate: 16000,
      channel: 1,
      token: token,
      cuid: 'YOUR_DEVICE_ID',
    }));
  };
  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.result) {
      // 更新实时文本
      realTimeText.value += data.result;
    }
  };
  // 发送音频数据...
};

2.3 离线文件识别（HTTP）

对于已录制的音频文件，可通过HTTP接口上传识别：

const recognizeAudioFile = async (audioBlob, token) => {
  const formData = new FormData();
  formData.append('audio', audioBlob, 'recording.wav');
  const response = await fetch('https://vop.baidu.com/server_api', {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    body: formData,
  });
  return await response.json();
};

3. Vue3组件实现

3.1 录音按钮组件

封装<RecordButton>组件，支持长按/点击触发：

<template>
  <button 
    @mousedown="handleMouseDown" 
    @mouseup="handleMouseUp"
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
  >
    {{ isRecording ? '录音中...' : '长按录音' }}
  </button>
</template>
<script setup>
import { ref } from 'vue';
const isRecording = ref(false);
const handleMouseDown = () => { /* ... */ };
const handleMouseUp = () => { /* ... */ };
</script>

3.2 文本展示区域

使用<textarea>或可编辑<div>展示识别结果：

<template>
  <div class="text-display">
    {{ recognitionText }}
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const recognitionText = ref('');
// 监听API返回更新文本...
</script>

三、优化与注意事项

音频格式兼容性：百度语音识别API支持PCM/WAV/AMR等格式，建议统一转换为16kHz、16bit的单声道PCM或WAV格式。
实时性优化：通过WebSocket分块发送音频数据，减少延迟；设置合理的interval参数控制发送频率。
错误处理：捕获API调用错误（如配额不足、音频质量差），提供用户友好的提示。
隐私与安全：明确告知用户录音用途，避免存储敏感音频数据；使用HTTPS加密传输。

四、完整流程示例

用户长按录音按钮，触发startRecording()。
采集音频数据并分块，通过WebSocket发送至百度API。
API返回实时识别结果，更新Vue组件中的recognitionText。
用户松开按钮后，停止录音并发送最终请求（如需要）。
展示完整文本，提供复制/导出功能。

五、扩展功能

多语言支持：通过API参数切换识别语言（中文、英文等）。
标点预测：启用百度API的标点符号预测功能，提升文本可读性。
历史记录：将录音与文本存储至本地IndexedDB或后端数据库。

通过以上方案，开发者可快速构建基于Vue3和百度语音识别API的录音转文字应用，满足多样化场景需求。

基于Vue3与百度语音识别API的录音转文字实现方案