2017-07-30 5 views
1

Je veux construire une fonction dans Framer (coffeescript) où je peux dire un mot spécifique comme entrée vocale et quelque chose se passe. Par exemple je dis "pomme" puis un rectangle devient vert. Si je dis "banane", il devient jaune. Jusqu'à présent, cela ne fonctionne qu'une seule fois, puis je dois rafraîchir le prototype afin d'enregistrer un nouveau mot. Comment puis-je le faire parler couramment, donc je peux dire plus de mots et toujours changer les couleurs?Comment faire pour redémarrer une fonction SpeechRecognition dans Framer?

Voici mon code actuel. J'utilise l'API Google Chrome pour la reconnaissance vocale. Le prototype ne fonctionne donc que si vous l'ouvrez dans le navigateur 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 

Répondre

0

Utilisez les propriétés préfixées webkitSpeechRecognition() et webkitSpeechGrammarList(). Était seulement en mesure d'obtenir le moteur pour reconnaître "red" comme grammaire d'entrée, bien que l'événement result soit déclenché plus d'une fois.

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