我个人拿Chrome浏览器尝试了一下午，当识别率低于90%的时候，基本就会出现丢字的情况，比如我用较快的语气说了一句“今天天气怎么样”，最后识别的结果是“怎么样”。当环境比较嘈杂的时候，基本识别率就没有高于70%的时候，说一句“你好”，得到的结果要么直接报错要么不搭边，对长难句的识别率也不怎么高。
如果希望达到一个比较高的识别率，则需要安静的环境，简单的语句，说话清晰响亮缓慢（类似于播音腔）。
这算是一个相当新的api，新到什么程度呢？
新到MDN文档创建SpeechRecognition相关词条的时间在2020年9月15日，截止我写文的2021年03月13日刚好半年的时间。
虽然新意味着兼容性差，但这也从某种层次上说明，未来Web前端的发展方向也许真的可能替代原生应用。
从兼容性来看，PC只有Chrome和Edge（仅限Chromium核心）这两款浏览器支持，移动端几乎全军覆没，只有少数几个比较新的版本支持，但不确定对整体的兼容性如何。
经过实际的测试，Chrome支持英文和中文的语音识别，而Edge会提示language-not-supported的错误，更改html上的语言仍然报错，怀疑需要更改电脑的系统语言才能解决（未确定）。
市面上比较常见的各类语音助手（比如Siri），在前端的逻辑都比较简单，一般情况下如果只处理本地化的配置，如设置闹钟、询问日期等功能，核心功能主要分为语音识别和语音朗读两部分，当浏览器提供了这两项能力的时候，便已满足了语音助手的条件。
于是我尝试写了一个很简单的DEMO，将两者合二为一实现了一个语音助手。
代码示例 <!DOCTYPE html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>语音助手</title> </head> <body> <button type="button">点击识别语音</button> <p></p> <p></p> <script type="text/javascript"> function speak(sentence) { const utterance = new SpeechSynthesisUtterance(sentence) window.speechSynthesis.speak(utterance) } // 目前只有Chrome和Edge支持该特性，在使用时需要加私有化前缀 const SpeechRecognition = window.webkitSpeechRecognition const recognition = new SpeechRecognition() const output = document.getElementById("output") const status = document.getElementById("status") // 语音识别开始的钩子 recognition.onstart = function() { output.innerText = '' status.innerText = '语音识别开始' } // 如果没有声音则结束的钩子 recognition.onspeechend = function() { recognition.stop() } // 识别错误的钩子 recognition.onerror = function({ error }) { const errorMessage = { 'not-speech': '未检测到声源', 'not-allowed': '未检测到麦克风设备或未允许浏览器使用麦克风' } status.innerText = errorMessage[ error ] || '语音识别错误' } // 识别结果的钩子 recognition.onresult = function({ results }) { // 设置一些比较简单的回复 const answers = { '今天是星期几': '今天是星期六', '今天天气怎么样': '今天天气晴朗' } const { transcript, confidence } = results[0][0] // 设置一个阈值分别处理 if( confidence * 100 >= 90 ) { speak(answers[transcript] || '这件事我还不知道，换个问题吧') status.innerText = `语音回复的内容：${ answers[transcript] || '这件事我还不知道，换个问题吧' }` } else { speak('我好像没听明白') status.innerText = `我好像没听明白` } } </script> </body> </html> 总结