How to restart a SpeechRecognition function in Framer?

Question

I want to build a function in Framer (coffeescript) where I can say a specific word as voice input and something happens. For example I say "apple" then a rectangle turns green. If I say "banana" it turns yellow.

So far it works only once and then I have to refresh the prototype in order to record a new word. How can I make it fluent, so I can say more words and always change the colors?

Here is my current code. I use the Google Chrome API for speech recognition, so the prototype itself only works if you open it in the Chrome Browser.

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

score 0 · Answer 1 · answered Jul 30 '17 at 14:45

Use the prefixed properties webkitSpeechRecognition() and webkitSpeechGrammarList(). Was only able to get the engine to recognize "red" as input grammar, though the result event is fired more than once.

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">

How to restart a SpeechRecognition function in Framer?

1 Answers1