| 使用 Web Speech API | 您所在的位置：网站首页 › 不支持Google语音搜索 › 使用 Web Speech API |
|
JavaScript 部分会介绍更多细节。 浏览器支持之前有说到过，Chrome 现在支持的是带有前缀的 speech recognition，因此在 code 开始部分得加些内容保证在需要前缀的 Chrome 和不需要前缀的像 Firefox 中，使用的 object 都是正确的。 js var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition; var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList; var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent; The grammar这部分是我们的代码定义希望应用能够识别的语法。语法放在下面定义的变量grammar中： js var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ]; var grammar = '#JSGF V1.0; grammar colors; public = ' + colors.join(' | ') + ' ;'语法格式使用的是 JSpeech Grammar Format（JSGF）——你可以在前面的链接中了解更多关于语法格式的规范。不过现在，让我们快速地浏览它： 每一行用分号分隔，和 js 中一样 第一行——#JSGF V1.0——说的是语法使用的格式和版本。这总是需要首先包括在内 第二行表示我们想要识别的term 的类型 (这里就是colors)。public 声明这是一条公共规则，尖括号中的字符串定义需要识别term 的名字 (这里就是color)，等号后面的是这个term 可以被识别和接受的具体值。得注意每一个值如何被一个管道符号分割开的 你可以按照上面的结构，在多行中，想定义多少就定义多少terms ，也可以包括相当复杂的语法定义。对于我们这个简单的 demo，就把语法定义的简单些 将 grammer 插入 speech recognition接下来是使用 SpeechRecognition() (en-US) 构造函数，定义一个 speech recognition 实例，控制对于这个应用的识别。还需要使用 SpeechGrammarList() (en-US) 构造函数，创立一个 speech grammer list 对象，包含我们的语法。 js var recognition = new SpeechRecognition(); var speechRecognitionList = new SpeechGrammarList();使用 SpeechGrammarList.addFromString() (en-US) 把语法添加到列表 (list)，这个方法接收两个参数，第一个是我们想要添加的包含语法内容的字符串，第二个是对添加的这条语法的权重 (权重值范围是 0~1)，权重其实是相对于其他语法，这一条语法的重要程度。添加到列表的语法就是可用的，并且是一个SpeechGrammar 实例。 js speechRecognitionList.addFromString(grammar, 1);我们然后通过设置 SpeechRecognition.grammars (en-US) 属性值，把我们的SpeechGrammarList (en-US) 添加到 speech recognition 实例。在继续往前走之前，我们还需要设置 recognition 实例其他的一些属性： SpeechRecognition.lang (en-US) ：设置识别的是什么语言。这个设定是良好的做好，因此墙裂推荐~ SpeechRecognition.interimResults (en-US) ：定义 speech recognition 系统要不要返回临时结果 (interim results)，还是只返回最终结果。对于这个简单 demo，只返回最终结果就够了。 SpeechRecognition.maxAlternatives (en-US) ：定义每次结果返回的可能匹配值的数量。这有时有用，比如要的结果不明确，你想要用一个列表展示所有可能值，让用户自己从中选择一个正确的。但这里这个简单 demo 就不用了，因此我们设置为 1(1 也就是默认值)。js recognition.grammars = speechRecognitionList; //recognition.continuous = false; recognition.lang = "en-US"; recognition.interimResults = false; recognition.maxAlternatives = 1;备注： SpeechRecognition.continuous (en-US) 控制的是每一次允许多个结果被捕捉 (比如在这个 demo 中连着说两个颜色关键字，都可以被捕捉)，或者一次只能识别一个结果。代码中它被注释掉的原因是，在 Gecko 中它还不被支持，所以如果把它加进去会破坏这个应用。你可以在收到第一个结果后简单地停止识别，从而得到类似的结果，稍后将会看到。 开始语音识别在获取输出的 和 html 元素引用之后 (这些我们可以用来待会输出语音识别诊断的结果，更新应用的背景颜色)，我们添加了一个onclick 事件处理，作用是当屏幕被点击后，语音识别服务将开启——这通过调用 SpeechRecognition.start() (en-US) 实现。forEach() 方法内部的工作是，为每个颜色关键字添加一个这个颜色的背景色，这样就直观知道了这个颜色关键字指向什么颜色。 js var diagnostic = document.querySelector(".output"); var bg = document.querySelector("html"); var hints = document.querySelector(".hints"); var colorHTML = ""; colors.forEach(function (v, i, a) { console.log(v, i); colorHTML += ' ' + v + " "; }); hints.innerHTML = "Tap/click then say a color to change the background color of the app. Try " + colorHTML + "."; document.body.onclick = function () { recognition.start(); console.log("Ready to receive a color command."); }; 接收、处理结果一旦语音识别开始，有许多 event handlers 可以用于做结果返回的后续操作，除了识别的结果外还有些零碎的相关信息可供操作 (可查看 SpeechRecognition event handlers list (en-US) )。最常见会使用的一个是 SpeechRecognition.onresult (en-US) ，这在收到一个成功的结果时候触发。 js recognition.onresult = function (event) { var last = event.results.length - 1; var color = event.results[last][0].transcript; diagnostic.textContent = "Result received: " + color + "."; bg.style.backgroundColor = color; console.log("Confidence: " + event.results[0][0].confidence); };代码中第三行看上去有一点复杂，让我们一步一步解释以下。SpeechRecognitionEvent.results (en-US) 属性返回的是一个SpeechRecognitionResultList (en-US) 对象 (这个对象会包含SpeechRecognitionResult (en-US) 对象们)，它有一个 getter，所以它包含的这些对象可以像一个数组被访问到——所以[last] 返回的是排在最后位置 (最新) 的SpeechRecognitionResult对象。每个SpeechRecognitionResult 对象包含的 SpeechRecognitionAlternative (en-US) 对象含有一个被识别的单词。这些SpeechRecognitionResult 对象也有一个 getter，所以[0] 返回的是其中包含的第一个SpeechRecognitionAlternative (en-US) 对象。最后返回的transcript属性就是被识别单词的字符串，把背景颜色设置为这个颜色，并在 UI 中报告出这个结果信息。 也使用了 SpeechRecognition.onspeechend (en-US) 这个 handle 停止语音识别服务 (具体工作在SpeechRecognition.stop() (en-US)) ，一旦一个单词被识别就不能再说咯 (必须再点击屏幕再次开启语音识别) js recognition.onspeechend = function () { recognition.stop(); }; 处理 error 和未能识别的语音最后两个 handlers 处理的两种情况，一种是你说的内容不在定义的语法中所以识别不了，另一种是出现了 error。 SpeechRecognition.onnomatch (en-US) 支持的就是第一种，但是得注意它似乎在 Firefox 或者 Chrome 中触发会有问题；它只是返回任何被识别的内容： js recognition.onnomatch = function (event) { diagnostic.textContent = "I didnt recognise that color."; };SpeechRecognition.onerror (en-US) 处理的是第二种情况，识别成功了但是有 error 出现——SpeechRecognitionError.error (en-US) 属性包含的信息就是返回的确切的 error 是什么。 js recognition.onerror = function (event) { diagnostic.textContent = "Error occurred in recognition: " + event.error; }; |
| CopyRight 2018-2019 实验室设备网 版权所有 |