Я хочу построить функцию в Framer (coffeescript), где я могу сказать конкретное слово в качестве голосового ввода, и что-то происходит. Например, я говорю "яблоко", затем прямоугольник становится зеленым. Если я скажу "банан", он станет желтым.
Пока это работает только один раз, а затем я должен обновить прототип, чтобы записать новое слово. Как я могу сделать это свободно, поэтому я могу сказать больше слов и всегда менять цвета?
Вот мой текущий код. Я использую API Google Chrome для распознавания речи, поэтому сам прототип работает, только если вы открываете его в браузере 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
Используйте префиксные свойства 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">