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

一、录音功能的核心实现原理

录音功能的实现依赖浏览器提供的Web Audio API和MediaRecorder API。Web Audio API用于处理音频流，而MediaRecorder API则负责将音频流转换为可存储的Blob对象。

1.1 音频流的获取与权限控制

首先需要获取用户设备的麦克风权限。通过navigator.mediaDevices.getUserMedia({ audio: true })方法，可以请求音频输入权限。权限获取后，会返回一个包含音频流的MediaStream对象。

async function startAudioStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    return stream;
  } catch (err) {
    console.error('获取麦克风权限失败:', err);
    throw err;
  }
}

1.2 音频数据的录制与存储

使用MediaRecorder API录制音频流时，需要指定音频格式（如audio/wav或audio/webm）和采样率。录制过程中，通过dataavailable事件监听器可以获取音频片段的Blob对象。

function startRecording(stream) {
  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'audio/webm',
    audioBitsPerSecond: 128000
  });
  const audioChunks = [];
  mediaRecorder.ondataavailable = event => {
    if (event.data.size > 0) {
      audioChunks.push(event.data);
    }
  };
  mediaRecorder.onstop = () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
    // 处理音频Blob（如上传或转换）
  };
  mediaRecorder.start();
  return mediaRecorder;
}

1.3 录音的启动与停止控制

录音的启动和停止需要通过按钮交互触发。启动时调用startRecording函数，停止时调用mediaRecorder.stop()，并清理音频流资源。

let mediaRecorder = null;
let audioStream = null;
async function handleStartRecording() {
  audioStream = await startAudioStream();
  mediaRecorder = startRecording(audioStream);
}
function handleStopRecording() {
  if (mediaRecorder) {
    mediaRecorder.stop();
    mediaRecorder.stream.getTracks().forEach(track => track.stop());
  }
}

二、语音转文字服务的集成

语音转文字功能需要依赖后端服务或第三方API。本文以WebSocket协议为例，介绍如何将音频数据实时传输至服务端进行转换。

2.1 WebSocket连接建立

建立WebSocket连接时，需指定服务端地址，并处理连接状态事件。

function createWebSocketConnection() {
  const socket = new WebSocket('wss://your-asr-service.com/ws');
  socket.onopen = () => {
    console.log('WebSocket连接已建立');
  };
  socket.onerror = error => {
    console.error('WebSocket错误:', error);
  };
  socket.onclose = () => {
    console.log('WebSocket连接已关闭');
  };
  return socket;
}

2.2 音频数据的分片传输

由于音频数据量较大，需将其分片为固定大小的二进制数据（如16KB），并通过WebSocket逐片发送。

async function sendAudioChunks(audioBlob, socket) {
  const chunkSize = 16384; // 16KB
  const fileReader = new FileReader();
  fileReader.onload = () => {
    const arrayBuffer = fileReader.result;
    const chunks = [];
    for (let i = 0; i < arrayBuffer.byteLength; i += chunkSize) {
      chunks.push(new Uint8Array(arrayBuffer.slice(i, i + chunkSize)));
    }
    chunks.forEach(chunk => {
      socket.send(chunk);
    });
  };
  fileReader.readAsArrayBuffer(audioBlob);
}

2.3 服务端响应处理

服务端返回的语音转文字结果通常为JSON格式，包含时间戳和识别文本。需解析这些数据并更新前端显示。

function handleWebSocketMessage(socket, updateTextCallback) {
  socket.onmessage = event => {
    const response = JSON.parse(event.data);
    if (response.text) {
      updateTextCallback(response.text);
    }
  };
}

三、Vue组件中的完整实现

将录音和语音转文字功能封装为Vue组件，需管理组件状态、处理用户交互，并集成上述API。

3.1 组件状态管理

使用Vue的data选项管理录音状态、WebSocket连接和识别结果。

export default {
  data() {
    return {
      isRecording: false,
      socket: null,
      recognizedText: '',
      audioStream: null
    };
  },
  methods: {
    async startRecording() {
      this.audioStream = await startAudioStream();
      this.mediaRecorder = startRecording(this.audioStream);
      this.socket = createWebSocketConnection();
      handleWebSocketMessage(this.socket, text => {
        this.recognizedText += text;
      });
      this.isRecording = true;
    },
    stopRecording() {
      if (this.mediaRecorder) {
        this.mediaRecorder.stop();
        this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
      }
      if (this.socket) {
        this.socket.close();
      }
      this.isRecording = false;
    }
  }
};

3.2 模板与交互设计

在模板中添加录音按钮和结果显示区域，通过v-if控制按钮状态。

<template>
  <div>
    <button @click="isRecording ? stopRecording() : startRecording()">
      {{ isRecording ? '停止录音' : '开始录音' }}
    </button>
    <div v-if="recognizedText" class="result-text">
      {{ recognizedText }}
    </div>
  </div>
</template>

四、优化与注意事项

4.1 错误处理与用户反馈

在权限请求失败或网络异常时，需通过Toast或Modal提示用户。

async function startAudioStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    return stream;
  } catch (err) {
    this.$toast.error('无法访问麦克风，请检查权限设置');
    throw err;
  }
}

4.2 性能优化

• 限制音频采样率（如16kHz）以减少数据量。
• 使用Web Worker处理音频分片，避免阻塞主线程。

4.3 兼容性处理

检测浏览器是否支持MediaRecorder API，若不支持则提示用户使用Chrome或Edge。

function isMediaRecorderSupported() {
  return typeof MediaRecorder !== 'undefined';
}

五、总结与扩展

本文实现了Vue项目中录音和语音转文字的核心功能，包括音频流获取、录制控制、WebSocket传输和结果解析。实际应用中，可进一步扩展以下功能：

1. 多语言支持：通过服务端配置切换识别语言。
2. 实时字幕：在录音过程中动态显示识别结果。
3. 历史记录：将录音文件和识别结果保存至本地存储。

通过模块化设计和清晰的API调用，该方案可轻松集成至现有Vue项目，为AI问答小助手提供更自然的交互方式。