实战Web Speech API：从零构建一个实时语音转文本的Web应用
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 id="toggleBtn">开始录音</button> <div id="result"></div> <script src="app.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 class="final">${finalTranscript}</p> <p class="interim">${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 class="error">${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 class="error">麦克风访问被拒绝</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结合可以实现实时字幕等有趣应用。比如将识别结果实时发送到服务器，经过处理后广播给所有客户端，就能实现会议实时字幕系统。