FramerでSpeechRecognition関数を再起動するにはどうすればよいですか？

Framer（coffeescript）で音声入力として特定の単語を言うことができる関数を作成したいと思います。たとえば、「りんご」と言うと、長方形が緑色に変わります。私が「バナナ」と言うと、それは黄色に変わります。FramerでSpeechRecognition関数を再起動するにはどうすればよいですか？

これまでは1回しか動作していなかったので、新しい単語を記録するためにプロトタイプをリフレッシュする必要がありました。どのように私はそれを流暢にすることができますので、私はより多くの言葉を言うことができ、常に色を変更することができますか？

ここは私の現在のコードです。私は音声認識に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

出典

2017-07-30 ocha

接頭辞プロパティwebkitSpeechRecognition()とwebkitSpeechGrammarList()を使用してください。 resultイベントが複数回発生したにもかかわらず、エンジンに入力文法として"red"を認識させることしかできませんでした。

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

出典

2017-07-30 14:45:21 guest271314

FramerでSpeechRecognition関数を再起動するにはどうすればよいですか？

答えて

関連する問題