一、

Web Speech API 是 W3C 标准化的浏览器原生 JavaScript 接口，它让网页应用具备了语音识别和语音合成能力。与需要后端服务、AI 模型或第三方 SDK 的语音方案不同。Web Speech API 完全运行在客户端，无需 API Key、无需服务器、零依赖。老实说，

// 三行代码。让网页开口说话
const utterance = new SpeechSynsisUtterance;utterance.lang = 'zh-CN';speechSynsis.speak;其实，

这个 API 由两个主要模块构成：

解决了什么痛点？

在 Web Speech API 出现之前，开发者实现语音功能只能走两条路：

1. 调用云端 ASR/TTS API需要自行搭建服务器、付费、处理网络延迟而且面临隐私合规风险。
2. 使用 Flash/Applet 插件已被现代浏览器废弃，安全性差且维护成本高。怎么说呢，

Web Speech API 打破了这两难选择。为 Web 应用提供了一种轻量、免费、即时响应的语音交互方案。

为什么可以关注？

This is a classic “原生 API 冷知识”。话说回来，大多数前端同学甚至不知道浏览器已经内置完整的语音能力。担心兼容性而止步，但在以下场景。它恰是零成本方法

• 快速验证语音交互原型
• 建立无障碍辅助功能
• Electron 桌面应用的本地语音交互
• PWA 的离线语音能力

二、主要功能详解

Speech Synsis

. API 结构和主要方法

Synsizer 的入口是 window.speechSynsis常用对象是 SPEECHSYNTHESISUTTERANCE.

// TypeScript 类型定义
interface SpeechSynsisUtterance extends EventTarget {
从text来看，string;按理说，lang: string;voice: SpeechSynsisVoice | null;volume: number;rate: number;说起来，pitch: number;}
interface SpeechSynsisVoice {
voiceURI: string;其实，name: string;lang: string;localService: boolean;// 是否本地语音
default: boolean;其实，// 是否默认
}

. 基本使用示例

// 基础用法
const synth = window.speechSynsis;if {
console.error;}
const utterance = new SpeechSynsisUtterance;utterance.lang = 'zh-CN';utterance.rate = 1;// 正常速度
utterance.pitch = 1;// 正常音调
utterance.volume = 1;// 最大音量
synth.speak;不过，utterance.onstart = => console.log;utterance.onend = => console.log;utterance.onerror = e => console.error;

. Vue 组合式 API 封装

// composables/useSpeechSynsis.ts
import { ref。onMounted,onUnmounted } from 'vue';export interface SpeechOptions {
从lang?不过，来看，string;rate，: number;pitch，说起来，: number;volume，: number;voice，: SpeechSynsisVoice;}
export function useSpeechSynsis {
const isSupported = ref;const isSpeaking = ref;const voices = ref;// 初始化
onMounted => {
isSupported.value = 'speechSynsis' in window;不过，if return;const loadVoices = => { voices.value = window.speechSynsis.getVoices;}，不过，loadVoices;window.speechSynsis.onvoiceschanged = loadVoices;})，怎么说呢，const speak = => {
if { console.warn;return，}
window.speechSynsis.cancel;// 停止上一次
const u = new SpeechSynsisUtterance;if u.lang = opts.lang;if u.rate = opts.rate!，老实说，if u.pitch = opts.pitch!，if u.volume = opts.volume!，if u.voice = opts.voice;u.onstart = => isSpeaking.value=true;u.onend = => isSpeaking.value=false;u.onerror = => isSpeaking.value=false;不过，window.speechSynsis.speak;}，const stop = =>{ window.speechSynsis?话说回来，.cancel;isSpeaking.value=false;}，const pause = =>{ window.speechSynsis?.pause，};const resume = =>{ window.speechSynsis?.resume，};onUnmounted，return { isSupported,isSpeaking。voices,speak,stop,pause,resume };}

. 可配置参数详解

Speech Recognition

. API结构和主要方法

// TypeScript 类型定义
interface SpeechRecognition extends EventTarget {
grammars: SpeechGrammarList;按理说，lang: string;// 如 'zh-CN'
continuous: boolean;// 连续识别，interimResults: boolean;// 临时结果，maxAlternatives: number;abort: void，onaudiostart : =>void)|null;// ，其余事件同理 …}
interface SpeechRecognitionEvent extends Event {
resultIndex: number;results: SpeechRecognitionResultList;}
interface SpeechRecognitionAlternative {
transcript:string;// 文本
confidence:number;//置信度
}

*注意*: Chrome 使用前缀 webkitSpeechRecognition;其实，Firefox 与 Safari 尚未正式实现。

. 基本使用示例

// 检测兼容性
const SRClass =
window.SpeechRecognition ||
.webkitSpeechRecognition;if {
console.error;}
// 创建实例并配置
const recognition = new SRClass;recognition.lang ='zh-CN';recognition.continuous = false;// 单次识别
recognition.interimResults =;// 返回临时结果
// 启动识别
recognition.start;
// 捕获结果
recognition.onresult ==> {
for{
const result = event.results;const transcript =.transcript as string;if{
console.log;}else{
console.log;}
}
}，// 错误处理示例
recognition.onerror ==> {
switch{
case'no-speech': console.warn;break，case'audio-capture': console.error;break，case'not-allowed': console.error;break，老实说，default: console.error;}
}，recognition.onend==>console.log;按理说，

. Vue 组合式 API 封装

// composables/useSpeechRecognition.ts
import { ref。onUnmounted } from 'vue';export type RecognitionStatus='idle'|'listening'|'processing'|'error';export interface UseSROpts{
至于lang?，string,continuous?:boolean,interimResults?:boolean,onResult?:=>void,onError?:=>void,}
export function useSpeechRecognition{
const status = ref;const transcript = ref;老实说，const interimTranscript= ref;const errorMsg = ref<|string|null>;const isSupported = ref;// 浏览器兼容层
const SRClass:any=window.SpeechRecognition||window.webkitSpeechRecognition||null;let recognizer:any=null;if{
isSupported.value=true;recognizer=new SRClass;recognizer.lang =;recognizer.continuous =;recognizer.interimResults =;recognizer.maxAlternatives=1;recognizer.onstart==>{status.value='listening';errorMsg.value=null;}
recognizer.onresult==>{
for{
const r=e.results;const txt=r.transcript as string;其实，if{
transcript.value+=txt+' ';interimTranscript.value='';其实，opts.onResult?.，}else{
​​ interimTranscript.value+=txt+' ';​​ opts.onResult?.，​​ }
​​ }
​ };​ recognizer.onerror==>{
​ status.value='error';​ errorMsg.value=e.error;​ opts.onError?.，​ };其实，​ recognizer.onend==>{ifstatus.value='idle';}，​ }
​ const start==>{if{errorMsg.value='not-supported';return，}
​   try{interimTranscript.value='';transcript.value='';recognizer.start;}
​   catch{console.error;}
​ }，​ const stop==>{recognizer?.stop，}
​ const abort==>{recognizer?.abort，}
​ const reset==>{transcript.value='';怎么说呢，interimTranscript.value='';errorMsg.value=null;status.value='idle';}，其实，​ onUnmounted=>{abort;})，​ return{
​​ status,​​ transcript,​​ interimTranscript。​​ errorMsg,​​ isSupported,​​ start,​​ stop,​​ abort,​​ reset,​ };}

<template>


从状态来看，{{statusText}}
/ div>


{{ transcript }}




< button @click ="isListening ? stop: start" :disabled ="!isSupported"
               :class="{recording:isListening}"& gt {{isListening?'⏹ 停止':'🎤 开始'} } & lt / button & gt 
           < button @click ="reset" :disabled ="!transcript"& gt 清除 & lt / button & gt 
       / div>
< p v-if ="errorMsg"class ="error"& gt {{ errorMessage }}& lt / p &
       / div>

<script setup lang ="ts">
import {computed} from 'vue';按理说，import {useSpeechRecognition} from './composables/useSpeechRecognition';c onst{
status,transcript,interimTranscript,errorMsg,isSupported,start,stop,reset}=useSpeechRecog nition({
从lang来看。'zh-CN',continuous:false,interimResults:true,onResult:=>console.log,onError:e=>console.error
});c onst isListening=c omputed=>status .value==='listening');c onst statusText=c omputed=>{
c ons tatus .value=== 'idle'?'空闲':
c ons tatus .value=== 'listening'?'正在聆听...' :
c ons tatus .value=== 'processing'?'处理中' :
c ons tatus .value=== 'error'?'错误' :'未知'，});老实说，c onst errorMessage=c omputed=>{
c ons t Msg .value==='no-speech'?'未检测到声音，请重试':
c ons t Msg .value==='audio-capture'?'无法访问麦克风':
c ons t Msg .value==='not-allowed'?'请授权麦克风访问':
c ons t Msg .value==='network'?'网络异常，请检查网络':
c ons t Msg .value==='not-supported'?'当前浏览器不支持识别':
'未知错误';})，&;/script&，/

. 高级用法：自定义词汇表与上下文偏向 

If your app deals with domain‑specific vocabularies you can improve accuracy by feeding a JSGF grammar or using Chrome’s experimental “phrases” property.

三、使用场景与痛点映射

无障碍访问 

User Pain Point：视障使用者只能依赖操作程序自带阅读器，网页内容缺乏灵活朗读控制。Solution：利用 Web Speech Synsize 将页面关键文字实时朗读，并可通过 UI 手动触发。

语音搜索与指令控制

User Pain Point：传统搜索只能键盘输入，对手部受限或多任务场景体验差。按理说，Solution：结合 Recognition + 简单指令解析。实现“搜索+打开”快捷操作。

多语言内容朗读

User Pain Point：跨国站点往往只提供文字切换，缺少对应语言的自然发声。Solution：根据 navigator.language 自动选取对应 Voice 并调节速率。

实时字幕生成

User Pain Point：远程会议缺少实时文字稿，需要额外软件或手工记录。Solution：利用连续 Recognition + interimResults 实时渲染字幕流。老实说，

Electron 桌面应用中的本地化交互

User Pain Point：桌面工具想加入“说出指令”却受限于跨网站插件成本。Solution：Electron 本身支持完整 Web APIs，无需额外依赖就可以使用声控。

其他典型场景汇总
场景说明教育类——语言学习发音练习 + 听力材料朗读游戏互动角色对白 + 故事驱动表单填报通过口述完成表单字段通知提醒关键信息通过声音播报提高可达性

四、优点分析 

原生支持。无第三方库依赖 

This eliminates bundle size bloat and removes need for secret keys.



h h
h h
h
But wait this seems incomplete...


一、

⚠️ 使用者痛点：传统方案要么昂贵，要么需要插件，还要担心隐私泄露
<\/span>
<\/h2>