1. Web Speech API基础入门第一次接触Web Speech API时我也被它的能力惊艳到了。这个内置在现代浏览器中的API不需要任何第三方库就能让网页听懂人说话。想象一下你对着电脑说打开灯光网页就能执行相应操作这种交互方式比点击按钮酷多了。Web Speech API主要包含两大功能模块语音合成Text-to-Speech和语音识别Speech-to-Speech。今天我们重点聊语音识别部分。在Chrome浏览器中你可以直接在控制台试试这个const recognition new webkitSpeechRecognition(); recognition.onresult event console.log(event.results[0][0].transcript); recognition.start();执行这段代码后浏览器会请求麦克风权限。同意后说几句话你就能在控制台看到识别出的文字。我实测下来英文识别准确率能达到90%以上中文稍低但也有80%左右。这里有个坑要注意不同浏览器对API的实现有差异。Chrome和Edge使用webkit前缀而Firefox则直接使用标准名称。所以生产环境中最好这样初始化const SpeechRecognition window.SpeechRecognition || window.webkitSpeechRecognition; const recognition new SpeechRecognition();2. 搭建语音转文本应用2.1 基础HTML结构我们先从最简单的HTML骨架开始。创建一个index.html文件!DOCTYPE html html head title语音转文本工具/title style #result { border: 1px solid #ddd; min-height: 200px; padding: 10px; } .interim { color: gray; } .final { color: black; font-weight: bold; } /style /head body button idtoggleBtn开始录音/button div idresult/div script srcapp.js/script /body /html这个界面包含一个按钮和一个显示结果的div。interim和final两个CSS类分别用于区分临时识别结果和最终结果。2.2 JavaScript核心逻辑新建app.js文件我们来逐步实现核心功能。首先检测浏览器兼容性window.addEventListener(DOMContentLoaded, () { const SpeechRecognition window.SpeechRecognition || window.webkitSpeechRecognition; if (!SpeechRecognition) { alert(您的浏览器不支持语音识别API请使用Chrome或Edge); return; } const recognition new SpeechRecognition(); const toggleBtn document.getElementById(toggleBtn); const resultDiv document.getElementById(result); let isListening false; // 更多代码将在这里添加 });2.3 配置识别参数接下来配置识别器参数这是提升体验的关键recognition.continuous true; // 持续识别而不是说一句话就结束 recognition.interimResults true; // 返回临时识别结果 recognition.lang zh-CN; // 设置中文识别 // 识别结果处理 recognition.onresult (event) { let interimTranscript ; let finalTranscript ; for (let i 0; i event.results.length; i) { const transcript event.results[i][0].transcript; if (event.results[i].isFinal) { finalTranscript transcript; } else { interimTranscript transcript; } } resultDiv.innerHTML p classfinal${finalTranscript}/p p classinterim${interimTranscript}/p ; };我在这里踩过一个坑如果不设置lang属性默认会使用浏览器语言可能导致中文识别不准。明确指定语言能显著提高准确率。3. 处理边界情况3.1 错误处理语音识别过程中可能遇到各种问题良好的错误处理很重要recognition.onerror (event) { console.error(识别错误:, event.error); toggleBtn.textContent 开始录音; isListening false; let errorMessage 发生错误; switch(event.error) { case not-allowed: errorMessage 请允许麦克风访问权限; break; case no-speech: errorMessage 没有检测到语音; break; } resultDiv.innerHTML p classerror${errorMessage}/p; };3.2 权限管理现代浏览器对麦克风访问有严格限制处理不当会导致功能失效toggleBtn.addEventListener(click, async () { try { // 先请求麦克风权限 await navigator.mediaDevices.getUserMedia({ audio: true }); if (isListening) { recognition.stop(); toggleBtn.textContent 开始录音; } else { recognition.start(); toggleBtn.textContent 停止录音; } isListening !isListening; } catch (err) { console.error(权限获取失败:, err); resultDiv.innerHTML p classerror麦克风访问被拒绝/p; } });这里有个重要细节在Chrome中必须在用户交互如点击的上下文内调用getUserMedia否则会被自动拒绝。4. 高级功能扩展4.1 添加标点符号Web Speech API默认不返回标点符号我们可以通过正则表达式自动添加function addPunctuation(text) { // 在疑问词后添加问号 text text.replace(/(吗|呢|什么|为什么|怎么|如何|是不是)\b/g, $1); // 在句末添加句号 if (!/[.。]$/.test(text)) { text 。; } return text; } // 在onresult处理中使用 if (event.results[i].isFinal) { finalTranscript addPunctuation(transcript); }4.2 关键词唤醒实现类似Hey Siri的唤醒功能const WAKE_WORD 小助手; let hasWakeWord false; recognition.onresult (event) { const transcript event.results[0][0].transcript.trim(); if (!hasWakeWord) { if (transcript.includes(WAKE_WORD)) { hasWakeWord true; resultDiv.innerHTML p已唤醒请说出指令/p; } return; } // 处理具体指令... };4.3 离线识别目前Web Speech API需要联网但我们可以结合WebAssembly实现基础离线识别// 加载预训练的语音模型 async function loadOfflineModel() { const model await speechCommands.create(BROWSER_FFT); await model.ensureModelLoaded(); return model; } // 识别短语音命令 const model await loadOfflineModel(); const labels model.wordLabels(); // 获取支持的词汇列表 const result await model.listen(({scores}) { // 返回识别结果 });5. 性能优化技巧经过多次项目实践我总结出几个提升语音识别体验的关键点降噪处理在嘈杂环境中识别率会下降。可以添加前置的噪声抑制处理const audioContext new AudioContext(); const stream await navigator.mediaDevices.getUserMedia({ audio: true }); const source audioContext.createMediaStreamSource(stream); const noiseSuppressor audioContext.createScriptProcessor(4096, 1, 1); noiseSuppressor.onaudioprocess (event) { // 实现简单的降噪算法 const inputData event.inputBuffer.getChannelData(0); const outputData event.outputBuffer.getChannelData(0); // 这里添加降噪逻辑... };识别超时长时间不说话自动停止以节省资源let silenceTimer; const SILENCE_TIMEOUT 5000; // 5秒 recognition.onsoundstart () { clearTimeout(silenceTimer); }; recognition.onsoundend () { silenceTimer setTimeout(() { if (isListening) { recognition.stop(); } }, SILENCE_TIMEOUT); };多语言切换动态改变识别语言function setLanguage(lang) { recognition.lang lang; // 中文普通话: zh-CN // 英文美国: en-US // 粤语: zh-HK } // 示例切换按钮 document.getElementById(langCN).addEventListener(click, () setLanguage(zh-CN)); document.getElementById(langEN).addEventListener(click, () setLanguage(en-US));在实际项目中我发现将语音识别与WebSocket结合可以实现实时字幕等有趣应用。比如将识别结果实时发送到服务器经过处理后广播给所有客户端就能实现会议实时字幕系统。
