如何在 Vue 3 工程化项目中集成类 Siri 的苹果语音助手能力？

在 Vue 3 的工程化体系里接入类似苹果 Siri 的语音助手，本质是利用浏览器提供的原生语音能力，并结合组件化与组合式 API 做状态与逻辑封装。Safari 桌面端与 iOS 端内置的语音识别引擎和 Siri 同源，因此通过 Web Speech API 就能获得接近系统级助手的听写与指令体验，而不需要引入任何苹果私有 SDK。

一、技术选型与底层原理

Web Speech API 包含两个主要部分：SpeechRecognition 用于把语音转成文本，SpeechSynthesis 用于将文本播报为语音。在苹果设备上，Safari 会调用系统的语音识别服务，这也是为什么前端听到的结果和 Siri 识别风格高度一致。Vue 3 的响应式系统可以自然地映射识别状态，例如是否正在聆听、临时结果、最终结果等。

工程化场景下，我们不应当在每个组件里直接 new 一个识别对象，而是抽离为独立的 composable。这样在路由切换、组件卸载时，能够统一终止语音会话，避免麦克风被长期占用。同时，组合式函数也方便在测试环境中用 mock 替换原生对象。

// useVoiceAssistant.js
import { ref, onUnmounted } from 'vue';

export function useVoiceAssistant() {
  const transcript = ref('');
  const listening = ref(false);
  let recognition = null;

  if (typeof window !== 'undefined' && window.SpeechRecognition) {
    recognition = new window.SpeechRecognition();
    recognition.lang = 'zh-CN';
    recognition.interimResults = true;

    recognition.onresult = (event) => {
      let text = '';
      for (let i = event.resultIndex; i < event.results.length; i++) {
        text += event.results[i][0].transcript;
      }
      transcript.value = text;
    };

    recognition.onend = () => {
      listening.value = false;
    };
  }

  function start() {
    if (!recognition) return;
    listening.value = true;
    recognition.start();
  }

  function stop() {
    if (!recognition) return;
    recognition.stop();
  }

  onUnmounted(() => {
    stop();
  });

  return { transcript, listening, start, stop };
}

二、在 Vue 3 组件中接入与渲染

借助上面的组合式函数，业务组件只需要关心界面反馈。我们可以提供一个麦克风按钮，点击后开始聆听，并把实时文本展示出来。由于 Safari 要求语音权限必须由用户手势触发，因此 start 调用必须放在 click 回调中，不能放在 onMounted 自动执行。

下面的示例展示了一个最简工程化组件。它利用 script setup 语法保持简洁，并通过计算属性判断当前是否为等待指令状态。实际项目中，你还可以把 transcript 传递给一个意图识别模块，例如匹配“打开设置”或“查询天气”等类 Siri 指令。

<template>
  <div class="assistant">
    <button @click="toggle">{{ listening ? '停止' : '说话' }}</button>
    <p v-if="transcript">识别内容：{{ transcript }}</p>
  </div>
</template>

<script setup>
import { useVoiceAssistant } from './useVoiceAssistant';

const { transcript, listening, start, stop } = useVoiceAssistant();

function toggle() {
  if (listening.value) {
    stop();
  } else {
    start();
  }
}
</script>

三、工程化避坑与权限处理

第一个常见误区是认为语音识别在所有浏览器都可用。实际上 Chrome 与 Safari 支持程度不同，且 iOS 上仅 Safari 与部分WebView可用。工程里应先做特性探测，缺失时降级为手动输入，而不是白屏或抛错。可以用代码判断 window.SpeechRecognition 或 webkitSpeechRecognition 是否存在。

第二个坑是忽略安全上下文。麦克风采集要求页面运行在 https 或 localhost 环境，部署到普通 http 域名会直接失效。此外，真机测试中若用户拒绝过一次权限，后续 start 调用会静默失败，需要在界面上明确引导去系统设置开启。下面是一段特性探测与降级的参考实现。

export function isVoiceSupported() {
  const w = window;
  return !!(w.SpeechRecognition || w.webkitSpeechRecognition);
}

// 在入口处降级
if (!isVoiceSupported()) {
  console.warn('当前环境不支持语音识别，已切换为文本输入模式');
}

四、语义分流与类 Siri 体验增强

单纯把语音转文字并不能称为助手。要接近 Siri 的交互感，前端需把 transcript 做轻量意图提取，例如正则匹配“帮我”“打开”“查询”等关键词，再派发到对应业务函数。重逻辑如自然语言理解应放到服务端，避免前端包体膨胀。

播报环节可使用 SpeechSynthesis 让助手“开口说话”。注意在 iOS 上合成语音也需要用户手势激活过音频上下文，否则首次播报会被拦截。通过把听与说封装在同一 composable，我们能在 Vue 3 项目中获得一套连贯、可维护、接近苹果语音助手风格的工程化方案。

export function speak(text) {
  if (!window.speechSynthesis) return;
  const u = new SpeechSynthesisUtterance(text);
  u.lang = 'zh-CN';
  window.speechSynthesis.speak(u);
}

Vue_3语音助手Web_Speech_API修改时间：2026-08-10 15:24:31