去年我在做一个后台工单系统的时候接到一个很“轻”但实际很磨人的需求消息中心需要语音播报新工单表单页需要支持语音录入“快速填写”。当时第一反应是接讯飞或者云厂商的语音SDK但仔细一盘算又觉得为了这几个页面去申请AppID、写后端签名、接入SDK实在是杀鸡用牛刀。后来决定先试试浏览器自带的Web Speech API——也就是常说的Web原生TTS结果发现用Vue封装起来比想象中顺手整体体验也够用。这篇文章就围绕“Vue使用WEB自带TTS实现语音文字互转”这个话题展开。我会先讲清楚为什么值得用原生能力再分别拆解文字转语音SpeechSynthesis和语音转文字SpeechRecognition的实现方式最后把我实际踩过的兼容性和生命周期坑都列出来。适合正在用Vue做后台系统、内部工具、辅助功能改造或者不想为了一个语音功能引入大体积SDK的开发者参考。1. 需求背景什么场景下我会选择浏览器原生TTS而不是商用SDK1.1 项目里那个看似简单却很磨人的需求这个工单系统上线后运营反馈了两件事。第一新工单进来时管理员的浏览器一直挂着后台页面但没有声音提醒容易漏单第二工单内容经常是“客户描述的一长段文字”管理员想转成工单备注还得手动打字。两个需求合在一起就是“把文字变成语音播报出来”和“把语音变成文字填进表单”。第一个想法自然是接第三方语音服务。但我在评估阶段就把这个方案否了工单系统是内部使用并发量不高接云端语音识别要传录音数据还得考虑合规和成本而且语音SDK的体积通常不小为了一个辅助功能引入大量依赖在后续升级维护时都是负担。1.2 原生方案与第三方SDK的取舍Web Speech API由浏览器内置提供一部分是SpeechSynthesis语音合成也就是读文字一部分是SpeechRecognition语音识别也就是听语音转文字。它和第三方SDK的核心区别在于不需要申请密钥不用配置后端代理前端拿到代码就能直接用不产生调用费用不受并发配额限制语音合成走的是操作系统本地语音引擎数据不出本机语音识别在Chrome等浏览器上依赖远端识别服务要满足“有网”的前提且识别质量受环境噪声影响。我列了一张对比表方便你评估自己的项目维度浏览器原生Web Speech API第三方云语音SDK接入成本零成本无密钥无证书需要申请账号、AppID、Secret费用免费按调用量/时长计费语音合成离线可用本机引擎在线或独立离线包语音识别依赖浏览器和网络环境识别率更高可选择离在线模式数据隐私合成本地处理识别传递到远端接口数据会传至SDK厂商包体积无额外依赖增加几百KB到几MB不等结论很直接如果是给内部工具加一个轻量语音能力、辅助输入、消息提醒这类场景原生TTS完全够用。如果要做面向C端的语音搜索、高质量语音交互再考虑专业SDK也不迟。1.3 浏览器兼容性现状这里说的“Web自带TTS”严格来讲是Web Speech API。我先给一个基本盘浏览器语音合成 SpeechSynthesis语音识别 SpeechRecognitionChrome支持支持前缀webkitSpeechRecognitionEdge支持支持基于ChromiumFirefox支持不支持长期未实现Safari支持部分版本支持需要实验性功能开关Android WebView / 微信内置浏览器看系统TTS引擎大部分不支持所以在写组件的时候我习惯先做能力检测const isSupported speechSynthesis in window const RecognitionCtor window.SpeechRecognition || window.webkitSpeechRecognition const isRecognSupported Boolean(RecognitionCtor)不支持就降级成普通文本框输入不硬上语音功能。2. 先弄清楚Speech API的工作原理写代码才有方向2.1 语音合成是“全局单例 播报条目”的结构刚接触SpeechSynthesis的时候我有个误解以为是调用一个“朗读函数传入文本”那么简单。实际上浏览器把“朗读”这件事拆成了两层speechSynthesis负责整个语音引擎的调度它是全局对象相当于一个播音台SpeechSynthesisUtterance表示一次具体的朗读请求你要设置的文本、语言、语速、音调、音量都挂在这个对象上。每次调用speechSynthesis.speak(utterance)浏览器会把这条“播报请求”丢进队列里。如果当前有语音正在播放新请求会排队但很多实际场景里我们并不希望排队而是希望“正在播的被打断”这就需要在speak()之前先执行cancel()。SpeechSynthesisUtterance支持的事件也很关键onstart开始朗读onend朗读结束onerror朗读出错onpause/onresume暂停和恢复。Vue里通过ref维护“正在朗读”的状态主要就靠这几个事件来同步。2.2 语音识别比合成复杂得多且依赖服务端语音识别方向浏览器提供的是SpeechRecognition接口它不是一个“一次请求返回结果”的同步接口而是一个持续运行、不断回调的过程。从start()开始它会经历start - audiostart - soundstart - 识别中 - soundend - audioend - end结果通过onresult回调返回event.results是类数组结构每一段识别结果都包含一个isFinal字段用来区分“临时识别结果”还是“最终确定结果”。所以界面上很容易实现“边说边显示草稿文字停止说话后回填定稿文字”的效果。这里有个关键认知Chrome的语音识别实际上是把音频数据交给远端识别服务处理所以它依赖网络连通性。我在内网环境测试时就遇到过直接抛network错误的情况。这不是代码写错了而是该网络环境下识别服务不可达导致的。2.3 浏览器权限模型HTTPS和麦克风权限缺一不可语音识别要使用麦克风所以浏览器会执行权限检查。我自己踩过的一个坑是开发阶段在localhost跑得好好的部署到内网IP后点击语音按钮完全没反应控制台提示not-allowed。原因是浏览器对“非安全上下文”的敏感接口是直接禁用的。判断是不是这个原因可以看两个条件生产环境必须是HTTPS协议http://localhost本地开发例外部署在内网且只能HTTP访问时多数浏览器会拒绝麦克风权限识别功能直接不可用。另外如果用户之前手动点了“禁止麦克风权限”识别也会启动失败需要在UI里引导用户去地址栏的权限设置里恢复。我在组件里会把错误映射成中文提示展示出来而不是让用户面对一个无响应的按钮。3. Vue 3组合式API封装语音合成功能从零到可用3.1 一个完整的useSpeechSynthesis组合函数项目用的是Vue 3 Vite我再封装时优先用组合式API。这样可以把“浏览器语音能力”抽成一个独立模块组件里只关心业务状态。核心实现如下// composables/useSpeechSynthesis.js import { ref } from vue export function useSpeechSynthesis() { const supported typeof window ! undefined speechSynthesis in window const speaking ref(false) const paused ref(false) const voices ref([]) function loadVoices() { if (!supported) return const list window.speechSynthesis.getVoices() if (list.length) { voices.value list } } if (supported) { loadVoices() window.speechSynthesis.onvoiceschanged loadVoices } function speak(text, options {}) { if (!supported || !text) return // 先取消当前正在朗读的语音 window.speechSynthesis.cancel() const utterance new SpeechSynthesisUtterance(text) utterance.lang options.lang || zh-CN utterance.rate options.rate || 1 utterance.pitch options.pitch || 1 utterance.volume options.volume || 1 if (options.voice) utterance.voice options.voice utterance.onstart () { speaking.value true; paused.value false } utterance.onend () { speaking.value false; paused.value false } utterance.onerror () { speaking.value false; paused.value false } utterance.onpause () { paused.value true } utterance.onresume () { paused.value false } window.speechSynthesis.speak(utterance) } function pause() { if (supported speaking.value) { window.speechSynthesis.pause() } } function resume() { if (supported speaking.value) { window.speechSynthesis.resume() } } function stop() { if (!supported) return window.speechSynthesis.cancel() speaking.value false paused.value false } return { supported, speaking, paused, voices, speak, pause, resume, stop } }有一个细节值得注意speak()里我调用了window.speechSynthesis.cancel()。如果不做这一步连续点击“朗读”按钮时多段语音会排队用户听到的是几段语音连在一起体验很差。大多数场景下新的播报请求都应当打断旧的。3.2 为什么获取中文语音列表必须监听voiceschanged一开始很多人都会发现speechSynthesis.getVoices()返回的是空数组包括我也是。原因是浏览器启动语音引擎是异步的尤其是Chrome首次同步调用根本拿不到完整的语音列表必须在voiceschanged事件触发后再取一次列表里面才会出现完整的声音。我在组合函数里做了两件事初始化时先拉一次loadVoices()再挂onvoiceschanged监听。这样既覆盖了“首次调用就有数据”的浏览器也兼容了Chrome这种需要等待事件的实现。页面里如果需要下拉框选择发音人可以这样过滤出中文语音import { computed } from vue const { voices } useSpeechSynthesis() const zhVoices computed(() voices.value.filter(v v.lang v.lang.toLowerCase().includes(zh)) )3.3 页面组件一个带实时参数的语音控制面板接下来写一个最简的组件把文本转语音的常见操作都包含进去。组件里有文本输入框、语音选择、语速、音调调节、朗读/暂停/继续/停止按钮。template div classtts-panel textarea v-modeltext placeholder请输入要朗读的文字 / select v-modelcurrentVoice option v-forv in zhVoices :keyv.name :valuev {{ v.name }} ({{ v.lang }}) /option /select div span语速/span input v-model.numberrate typerange min0.5 max2 step0.1 / span{{ rate }}/span /div div span音调/span input v-model.numberpitch typerange min0 max2 step0.1 / span{{ pitch }}/span /div div button clickstartSpeak朗读/button button v-ifspeaking !paused clickpause暂停/button button v-ifspeaking paused clickresume继续/button button clickstop停止/button /div /div /template script setup import { ref } from vue import { useSpeechSynthesis } from /composables/useSpeechSynthesis const text ref(你好这是一段语音合成测试。) const rate ref(1) const pitch ref(1) const currentVoice ref(null) const { supported, speaking, paused, voices: allVoices, speak, pause, resume, stop } useSpeechSynthesis() const zhVoices ref([]) // 监听voices变化 import { watch } from vue watch(allVoices, (list) { zhVoices.value list.filter(v v.lang.toLowerCase().includes(zh)) }, { immediate: true }) function startSpeak() { if (!supported) { alert(当前浏览器不支持语音合成) return } speak(text.value, { voice: currentVoice.value || undefined, rate: rate.value, pitch: pitch.value }) } /script这个面板最大的价值不是功能本身而是把语音合成涉及的参数都暴露了出来。我在实际项目里发现语速和音调对听感的影响非常大。默认rate: 1、pitch: 1其实挺机械的播报工单消息时我一般会调到rate: 1.1、pitch: 1.05听起来更自然一点但也不至于太夸张。3.4 长文本朗读的分段处理SpeechSynthesis对超长文本的处理并不理想我曾经一次性塞进去一篇800字的工单内容结果有些浏览器读着读着就卡住了还有的浏览器直接不触发onend事件。后来我改用分段朗读的方式function splitText(text, maxLen 120) { // 按句子分割保留标点 const parts text.match(/[^。!?;\n][。!?;\n]?/g) || [text] const chunks [] let current for (const part of parts) { if ((current part).length maxLen) { chunks.push(current) current part } else { current part } } if (current) chunks.push(current) return chunks }朗读时逐段调用speak()下一段必须在上一段的onend回调里触发这样才能保证顺序不乱。这个方案的优点是兼容性好缺点是代码复杂度上去了适合文本量大的场景。4. 语音识别方向把麦克风里的声音变成Vue表单里的文字4.1 初始化识别器时的兼容性前缀处理语音识别的兼容性问题比合成严重得多。Chrome和Edge需要webkitSpeechRecognition前缀所以我先做一个统一的构造函数注册function createRecognition() { const Ctor window.SpeechRecognition || window.webkitSpeechRecognition if (!Ctor) return null const recognition new Ctor() recognition.lang zh-CN recognition.continuous false recognition.interimResults true recognition.maxAlternatives 1 return recognition }这里几个配置项的作用分别是lang识别语言中文设zh-CN英文设en-US多语言项目可以做成参数continuous是否连续识别。设为false表示识别完一句话就自动停适合“点击开始说完即止”的场景设为true则适合长时间听写interimResults是否返回临时结果。开启后说的过程中就能看到文字实时跳动体验更接近“边说边出字”maxAlternatives最多返回几个候选结果。保留1个足够太多反而干扰。4.2 封装useSpeechRecognition组合函数我按照和合成函数一样的思路封装了一个识别函数。对外暴露的核心状态是listening正在收音、finalText最终识别文本、interimText临时识别文本、start、stop。// composables/useSpeechRecognition.js import { ref } from vue export function useSpeechRecognition() { const Ctor window.SpeechRecognition || window.webkitSpeechRecognition const supported Boolean(Ctor) const listening ref(false) const finalText ref() const interimText ref() const errorText ref() let recognition null function init() { if (!supported || recognition) return recognition new Ctor() recognition.lang zh-CN recognition.continuous false recognition.interimResults true recognition.maxAlternatives 1 recognition.onstart () { listening.value true errorText.value } recognition.onresult (event) { let final let interim for (let i 0; i event.results.length; i) { const result event.results[i] if (result.isFinal) { final result[0].transcript } else { interim result[0].transcript } } finalText.value final interimText.value interim } recognition.onerror (event) { if (event.error not-allowed) { errorText.value 麦克风权限被拒绝请检查浏览器设置 } else if (event.error network) { errorText.value 识别服务连接失败请检查网络环境 } else { errorText.value 识别出错${event.error} } } recognition.onend () { listening.value false } } function start() { if (!supported) return init() try { recognition.start() } catch (e) { // 重复start会抛错这里静默处理 } } function stop() { if (recognition listening.value) { recognition.stop() listening.value false } } return { supported, listening, finalText, interimText, errorText, start, stop } }需要注意一个细节onresult里event.results是一个实时累计的集合每次回调都包含之前所有已经识别出来的内容。所以正确的做法是遍历整个event.results来组合最终文本而不是只取最后一段event.results[event.results.length - 1]。4.3 页面组件从麦克风到表单输入我在这套工单系统里把识别功能嵌在“工单备注”表单里。用户点击语音按钮开始说松开按钮停止识别识别到的文字自动回填到textarea的光标位置。template div textarea v-modelremark placeholder点击下方按钮用语音输入备注 / button :class{ recording: listening } mousedownstartRecognition mouseupstopRecognition mouseleavestopRecognition {{ listening ? 识别中... : 按住说话 }} /button p classinterim{{ interimText }}/p p classerror{{ errorText }}/p /div /template script setup import { ref, watch } from vue import { useSpeechRecognition } from /composables/useSpeechRecognition const remark ref() const { supported, listening, finalText, interimText, errorText, start, stop } useSpeechRecognition() function startRecognition() { if (!supported) { alert(当前浏览器不支持语音识别) return } start() } function stopRecognition() { stop() } // 识别结束后把结果追加到表单文本 watch(finalText, (val) { if (val) { remark.value remark.value ? ${remark.value}${val} : val } }) /script这里我采用“按住说话”模式比“点击开始、再次点击结束”更符合直觉。实现上就是mousedown触发start()mouseup或mouseleave触发stop()。注意要在mouseleave里也调用stop()否则用户按住按钮滑到别处松开时识别器会一直开着。4.4 临时结果和最终结果的区别很多第一次接触语音识别的同学不理解为什么要区分interimText和finalText。简单来说interimResults: true时浏览器会把识别到的前半段文字当作“临时结果”返回这些文字可能不准确随时会变化当一句话说完停顿一下浏览器认为这句话已经稳定就会返回isFinal: true的最终结果。界面上比较好的体验是临时结果显示为灰色时实变化最终结果用正式黑色字体填入文本框。这样用户能感知到自己说的话正在被“听见”同时也能在最终结果出现后复核纠正。5. 实测遇坑记录这几个坑让原生TTS差点被我换掉5.1 语音列表获取不到、中文语音不出现的完整排查链路这是我调试最久的问题。现象是在Chrome里第一次打开页面getVoices()返回空数组voiceschanged事件也没有触发。我当时的排查过程是这样的第一步检查调用时机。发现我在composable顶层直接调用了getVoices()但Chrome首次加载时语音引擎还没准备好返回空数组是正常现象。于是我先挂了onvoiceschanged等事件到了再取一次。第二步发现刷新页面后onvoiceschanged偶尔还是不触发。查了社区讨论有人提到需要在用户交互事件里调用一次speechSynthesis.getVoices()来“唤醒”语音模块。我试了一次确实有效。第三步在iOS Safari上又遇到新问题onvoiceschanged即使触发了getVoices()拿到的列表也不稳定有一次能拿到中文Voice有一次拿不到。后来发现Safari对语音列表的缓存策略比较特殊需要在speak()执行过一次之后再刷新getVoices()才会稳定。最终我采用的方案是“交互唤醒 定时器兜底”function ensureVoicesLoaded() { if (!supported) return loadVoices() // 某些浏览器需要等引擎完全就绪延时再拉一次 setTimeout(loadVoices, 200) } // 在页面第一个点击事件里调用 document.addEventListener(pointerdown, ensureVoicesLoaded, { once: true })这个监听器在组件初始化时注册用户第一次点击页面任意位置就会触发一次getVoices()语音列表往往瞬间就出来了。5.2 组件卸载后语音还在播生命周期清理有一次我做了个测试点击“朗读”播放语音后立刻从A页面切到B页面结果语音还在继续响。刚开始我以为是浏览器bug后来才意识到是utterance对象被全局语音引擎持有着Vue组件销毁并不会自动触发cancel()。解决方式是在组件的onBeforeUnmount钩子里调用停止方法import { onBeforeUnmount } from vue const { stop } useSpeechSynthesis() onBeforeUnmount(() stop())如果你封装的是全局TTS服务清理逻辑还可以放在Vue Router的afterEach全局守卫里路由切换时自动取消当前语音。这样比各组件单独清理更稳妥能避免“漏网之鱼”。5.3 识别引擎启动失败从network错误到权限问题的判定我在不同浏览器上遇到过的识别报错有好几种整理成一张表方便排查错误码出现场景处理建议not-allowedHTTPS之外环境、用户拒绝权限引导用户开启麦克风权限确保页面是HTTPS或localhostno-speech麦克风没有检测到声音提示用户靠近麦克风说话或检查设备是否被占用audio-capture没有找到可用的麦克风设备检查操作系统录音设备和浏览器设备权限network识别服务依赖的网络环境不可用提示“识别服务暂不可用”并提供手动输入兜底aborted调用stop()后正常中止不需要额外处理尤其要注意network错误。语音识别和语音合成不同识别依赖远端识别接口对外部网络环境有一定要求。我在内网测试环境里识别按钮基本不可用部署到公网后功能就正常了。如果项目强制要求纯内网环境原生SpeechRecognition就不太适用了这个时候才需要考虑离线识别SDK。5.4 多组件同时朗读会互相打断的冲突问题在一个页面中如果消息通知组件和某个业务组件同时有语音播报需求两个组件各自调用speechSynthesis.speak()后调用的会打断前面正在播放的语音。这在行为上可能并不是你想要的效果。我的处理方式是做一个全局唯一的TTS管理模块。用Vue的响应式对象存储待播报文本队列所有业务组件都不直接调用语音引擎而是给这个模块发消息由它统一调度// store/tts.js import { reactive } from vue import { useSpeechSynthesis } from /composables/useSpeechSynthesis const state reactive({ queue: [] }) let tts null export function initTts() { tts useSpeechSynthesis() } export function pushSpeak(text) { state.queue.push(text) playNext() } function playNext() { if (tts !tts.speaking.value state.queue.length) { const text state.queue.shift() tts.speak(text, { lang: zh-CN }) } }组件里监听tts.speaking的变化当一段语音播放结束后自动从队列里取下一段。这样即使有10个组件同时触发播报也不会互相打断而是按顺序播放。6. 进阶优化让原生TTS在Vue项目里真正好用起来6.1 全局消息播报从“工具函数”变为“全局服务”如果你在多个页面都要用到语音播报比如“收到新订单”“预警提醒”建议把TTS封装成全局可访问的服务而不是每个页面引用一遍组合函数。在Vue 3项目里可以用Pinia来管理语音状态。// stores/tts.js import { defineStore } from pinia import { useSpeechSynthesis } from /composables/useSpeechSynthesis export const useTtsStore defineStore(tts, () { const { supported, speaking, voices, speak, stop } useSpeechSynthesis() const queue [] function enqueue(text) { queue.push(text) if (!speaking.value) { playNext() } } function playNext() { if (!queue.length || speaking.value || !supported) return const text queue.shift() speak(text, { lang: zh-CN }) } return { supported, speaking, voices, enqueue, stop } })业务组件里只需要一行代码ttsStore.enqueue(您有一条新的工单请注意查收)。6.2 移动端适配iOS Safari和Android的差异性处理原生TTS在移动端也能用但坑比桌面端多。iOS Safari的语音合成基本可用但一旦用户把App切到后台或锁屏语音朗读会立即中断这是浏览器的系统级限制无法通过代码绕过。如果产品有“锁屏也能继续播放”的需求原生方案就不行了需要考虑Service Worker配合后台播放复杂度会明显上升。Android Chrome和WebView的语音合成依赖系统TTS引擎。我之前在一台测试机上遇到过speak()触发了onstart但没有任何声音的情况查了半天发现是系统里没安装中文语音包。这个无法在代码里解决只能在界面上引导用户到系统设置里查看“文本转语音输出”的语音引擎是否可用。语音识别在移动端的兼容性更差iOS Safari对SpeechRecognition的支持目前实验性质更强需要用户手动在设置里开启实验特性普通用户基本不会去开。所以我在移动端的方案是能识别就识别不能识别就隐藏语音按钮提供普通文本输入。6.3 中文识别结果的后处理与文本清洗语音识别出来的中文文本经常带一些语气词和重复例如“嗯”“呃”“那个”。如果直接写入表单工单内容会显得很不专业。我写了一个简单的清洗函数function cleanAsrText(raw) { return raw .replace(/[嗯呃啊哦]/g, ) .replace(/\s/g, ) .trim() }这个清洗要克制不要过度正则化。比如用户真的说“嗯好的”这里“嗯”如果是语气词可以去掉但如果“嗯”是内容的一部分去掉就影响语义了。我的做法是只清理“孤立出现的语气词”出现频率过高才替换。结果最终确认后还可以自动在句尾补上中文标点。语音识别出来的文本默认没有标点工单展示会显得很生硬。简单处理是每隔一句话的停顿时长判断加不加句号但纯前端不好精确判断我退而求其次直接在提交前给结尾补一个句号。6.4 录音过程中的音量提示一个简单又实用的增强用户按住说话时最好能提供“正在收音”的视觉反馈。我选择了活得麦克风音量信息作为反馈同时使用getUserMedia获取音频流再通过AnalyserNode读取音量数据。这样既不干扰SpeechRecognition又能让用户直观地看到“麦克风有声音”。async function setupAnalyzer() { const stream await navigator.mediaDevices.getUserMedia({ audio: true }) const audioCtx new AudioContext() const source audioCtx.createMediaStreamSource(stream) const analyser audioCtx.createAnalyser() analyser.fftSize 256 source.connect(analyser) return analyser }不过这里要注意getUserMedia和SpeechRecognition同时在用麦克风部分浏览器会冲突。我在实测中发现Chrome可以同时使用但Firefox等浏览器就不一定了。稳妥的做法是不用音量波形单纯用按钮状态和临时文字变化来反馈这样兼容性最好。6.5 什么时候该放弃原生换第三方案原生TTS好用但它的边界也很清楚。如果项目遇到以下情况我的建议是不要硬抗尽快换专业方案需要离线、内网环境下稳定识别语音原生SpeechRecognition做不到需要高识别率比如行业术语、方言或多人对话场景需要自定义发音人、音色、情绪原生SpeechSynthesis只有系统自带的声音需要长时间连续录音转写。尤其是“发音人”这个点如果老板说“语音播报能不能换成温柔的女声”浏览器的原生列表里可能只有一两个可选而且音质一般。此时就该去评估Coqui TTS这类神经网络语音合成或者商用云厂商的定制音色能力以独立TTS服务的方式接入Vue项目前端部分再考虑用WebSocket或HTTP音频流播放。说回这个工单项目最终上线的版本就是用原生TTS实现的新工单进来自动播报客服名称备注表单支持按住说话输入。虽然不是多惊艳的功能但内部同事用下来的评价是“不用再手敲一长段内容了挺省事”。浏览器原生TTS的上限不算高但对于这类轻量级语音交互它确实是一个成本极低、值得优先尝试的起点。
