如何在 Framer 中重新启动 SpeechRecognition 功能？答案

【问题标题】：How to restart a SpeechRecognition function in Framer?如何在 Framer 中重新启动 SpeechRecognition 功能？
【发布时间】：2017-07-30 13:41:50
【问题描述】：

我想在 Framer (coffeescript) 中构建一个函数，我可以在其中说出一个特定的单词作为语音输入，然后发生一些事情。例如，我说“苹果”，然后一个矩形变成绿色。如果我说“香蕉”，它会变黄。

到目前为止它只工作一次，然后我必须刷新原型才能记录一个新单词。我怎样才能使它流利，这样我就可以说更多的词并随时改变颜色？

这是我当前的代码。我使用 Google Chrome API 进行语音识别，所以原型本身只有在 Chrome 浏览器中打开它才能工作。

SpeechRecognition = window.SpeechRecognition or 
window.webkitSpeechRecognition
recognizer = new SpeechRecognition
recognizer.lang = 'de-DE'

recognizer.continuous = true
recognizer.interimResults = true

recognizer.start()

recognizer.onresult = (event) ->
  result = event.results[event.resultIndex]
  if result[0].transcript is "Apfel"
    rect.backgroundColor = "green"
  else if result[0].transcript is "Banane"
    rect.backgroundColor = "yellow"
  return

【问题讨论】：

标签： javascript coffeescript framerjs

【解决方案1】：

使用前缀属性webkitSpeechRecognition() 和webkitSpeechGrammarList()。只能让引擎将"red" 识别为输入语法，尽管result 事件被多次触发。

var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
var recognition = new webkitSpeechRecognition();
var speechRecognitionList = new webkitSpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
recognition.continuous = true;
recognition.lang = 'en-US';
recognition.interimResults = true;
recognition.maxAlternatives = 0;

var diagnostic = document.querySelector('.output');
var bg = document.querySelector('html');

document.body.onclick = function() {
  recognition.start();
  console.log('Ready to receive a color command.');
}

recognition.onresult = function(event) {
  console.log(event);
  var color = event.results[0][0].transcript;
  diagnostic.textContent = 'Result received: ' + color;
  bg.style.backgroundColor = color;
}

<body>
click
<div class="output">

【讨论】：