Vue 可组合项实战：从零构建语音识别功能

一、为什么选择 Vue 可组合项开发语音识别？

Vue 3 的 Composition API（可组合项）通过逻辑复用和代码组织方式的革新，为复杂功能开发提供了更清晰的解决方案。语音识别作为典型的浏览器 API 集成场景，涉及状态管理、事件监听、生命周期控制等需求，传统 Options API 容易陷入代码分散的困境。而可组合项通过将相关逻辑封装为独立函数，既能保持代码的模块化，又能通过组合实现复杂功能。

以语音识别为例，核心逻辑包括：权限请求、语音事件监听、实时转录文本处理、错误处理等。使用可组合项可以将这些功能拆分为 useSpeechRecognition、usePermission 等独立模块，再通过组合实现完整功能。这种模式不仅提升了代码可读性，还便于测试和维护。

二、技术准备：浏览器语音识别 API 基础

现代浏览器提供了 SpeechRecognition 接口（Web Speech API 的一部分），允许开发者通过 JavaScript 访问设备的麦克风并实现语音转文本功能。其核心方法包括：

1. SpeechRecognition.start()：启动语音识别
2. SpeechRecognition.stop()：停止语音识别
3. 事件监听：
   • onresult：语音识别结果事件
   • onerror：错误处理事件
   • onend：识别结束事件

不同浏览器的实现略有差异，例如 Chrome 使用 webkitSpeechRecognition，而 Firefox 可能需要用户显式授权。为确保兼容性，代码中需进行特征检测：

const isSpeechRecognitionSupported = () => {
  return 'SpeechRecognition' in window || 
         'webkitSpeechRecognition' in window;
};

三、手把手实现：useSpeechRecognition 可组合项

1. 基础结构搭建

创建一个可组合项函数 useSpeechRecognition，封装语音识别的核心逻辑：

import { ref, onMounted, onUnmounted } from 'vue';
export function useSpeechRecognition() {
  const isListening = ref(false);
  const transcript = ref('');
  const error = ref(null);
  let recognition = null;
  // 初始化识别器
  const initRecognition = () => {
    const SpeechRecognition = window.SpeechRecognition || 
                             window.webkitSpeechRecognition;
    recognition = new SpeechRecognition();
    recognition.continuous = true; // 持续识别
    recognition.interimResults = true; // 返回临时结果
  };
  // 启动识别
  const startListening = () => {
    if (!recognition) initRecognition();
    recognition.start();
    isListening.value = true;
  };
  // 停止识别
  const stopListening = () => {
    if (recognition) {
      recognition.stop();
      isListening.value = false;
    }
  };
  return { isListening, transcript, error, startListening, stopListening };
}

2. 事件处理与状态更新

完善事件监听逻辑，将识别结果实时更新到响应式变量：

export function useSpeechRecognition() {
  // ...前文代码...
  onMounted(() => {
    if (!recognition) initRecognition();
    recognition.onresult = (event) => {
      let interimTranscript = '';
      let finalTranscript = '';
      for (let i = event.resultIndex; i < event.results.length; i++) {
        const transcript = event.results[i][0].transcript;
        if (event.results[i].isFinal) {
          finalTranscript += transcript + ' ';
        } else {
          interimTranscript += transcript;
        }
      }
      transcript.value = finalTranscript + interimTranscript;
    };
    recognition.onerror = (event) => {
      error.value = `识别错误: ${event.error}`;
      stopListening();
    };
    recognition.onend = () => {
      isListening.value = false;
    };
  });
  onUnmounted(() => {
    if (recognition) {
      recognition.stop();
    }
  });
  // ...返回语句...
}

3. 权限控制可组合项

将麦克风权限请求封装为独立的 useMicrophonePermission：

import { ref } from 'vue';
export function useMicrophonePermission() {
  const hasPermission = ref(false);
  const permissionError = ref(null);
  const requestPermission = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      stream.getTracks().forEach(track => track.stop());
      hasPermission.value = true;
    } catch (err) {
      permissionError.value = `权限错误: ${err.message}`;
    }
  };
  return { hasPermission, permissionError, requestPermission };
}

四、组件集成与使用示例

在 Vue 组件中组合使用上述可组合项：

<template>
  <div>
    <button @click="toggleListening">
      {{ isListening ? '停止' : '开始' }}识别
    </button>
    <p>识别结果: {{ transcript }}</p>
    <p v-if="error" class="error">{{ error }}</p>
    <p v-if="permissionError" class="error">{{ permissionError }}</p>
  </div>
</template>
<script setup>
import { useSpeechRecognition } from './composables/useSpeechRecognition';
import { useMicrophonePermission } from './composables/useMicrophonePermission';
const { 
  isListening, 
  transcript, 
  error, 
  startListening, 
  stopListening 
} = useSpeechRecognition();
const { 
  hasPermission, 
  permissionError, 
  requestPermission 
} = useMicrophonePermission();
const toggleListening = async () => {
  if (!hasPermission.value) {
    await requestPermission();
  }
  if (hasPermission.value) {
    isListening.value ? stopListening() : startListening();
  }
};
</script>
<style>
.error {
  color: red;
}
</style>

五、优化与扩展建议

1. 多语言支持：通过设置 recognition.lang = 'zh-CN' 实现中文识别
2. 性能优化：添加防抖处理频繁的 onresult 事件
3. 错误重试机制：在 onerror 中自动重启识别
4. TypeScript 支持：为可组合项添加类型定义
5. 状态管理集成：将识别结果同步到 Pinia/Vuex

六、常见问题解决方案

1. 浏览器兼容性问题：

   • 检测 API 可用性后再初始化
   • 提供降级方案（如输入框）

2. 权限被拒绝：

   • 监听 navigator.permissions.query() 变化
   • 引导用户手动修改浏览器设置

3. 识别准确率低：

   • 优化麦克风环境（减少背景噪音）
   • 限制识别词汇表（通过 grammar 属性）

七、总结与进阶方向

通过可组合项开发语音识别功能，开发者可以：

• 将复杂逻辑拆分为独立模块
• 通过组合实现功能复用
• 保持代码的可测试性和可维护性

进阶方向包括：

1. 集成更先进的语音处理库（如 TensorFlow.js）
2. 实现实时语音翻译功能
3. 添加语音命令控制（通过关键词识别）

这种模式不仅适用于语音识别，还可扩展到视频流处理、地理位置跟踪等需要复杂浏览器 API 集成的场景。掌握可组合项的设计思想，将显著提升 Vue 应用的开发效率和代码质量。