1

我正在创建语音控制的 React 应用程序，该应用程序将在语音命令 ON 和 OFF 时使用“react-speech-recognition”模块打开和关闭灯。一切都按预期工作，但是我面临的一个问题是，即使我说出了一次命令，该应用程序也在听我的声音两次或更多次。如果有人对此分享他们的建议，那就太好了。这是我的代码，

//This component will listen my command (ON/OFF) and pass the corresponding command value 28/-28
// to the next component which is RetrieveCommand
// The problem is, even I'm saying 'ON/OFF' once, in the console log printing I can see the APP is 
// listening it twice or more

import React from 'react';
import { Button, Row,Col } from 'antd';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
import RetrieveCommand from './RetrieveCommand';



const StartApplication = () => {

const buttonDiv = {
   marginTop : '100px',
    marginLeft : '400px',
};

const lampOffDiv = {
    border: '5px solid #ffebcc',
    backgroundColor: '#666666',
    height : '300px',
    width : '60%',
    marginLeft: '200px',
};

const lampOnDiv = {
  border: '5px solid #ffebcc',
  backgroundColor: '#adebad',
  height : '300px',
  width : '60%',
  marginLeft: '200px',
};

enum BUTTON {
    START = "Start Application",
    STOP = "Stop Application"
};

enum LAMP_STATE{
  ON = 28,
  OFF = -28,
  INITIAL = 0
}

const [buttonName, setButtonName] = React.useState(BUTTON.START);
const [commandNumber, setCommandNumber] = React.useState(LAMP_STATE.INITIAL);


const [lightOnOnce, setLightOnOnce] = React.useState(false);
const [lightOffOnce, setLightOffOnce] = React.useState(false);

React.useEffect(() => {
  if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    alert("Ups, your browser is not supported!");
  }  
}, []);

const onRegex = new RegExp('^on$','i');
const offRegex = new RegExp('^off$','i');


const commands = [
    {
      command: onRegex,
      callback: () => {
          console.log("on command");
        
          if(commandNumber === LAMP_STATE.ON){
            setLightOnOnce(false);
          }else{
            
            setCommandNumber(LAMP_STATE.ON);
            setLightOnOnce(true);
          }
          
        },
      
      matchInterim: true
    },
    {
      command: offRegex,
      callback: () => {
          
          if(lightOnOnce){
            
            if(commandNumber === LAMP_STATE.OFF){
              setLightOffOnce(false);
            }else{
              setCommandNumber(LAMP_STATE.OFF);
              setLightOffOnce(true);
            } 
          }
                       
          
        },
      matchInterim: true
    },
  ]

  const { transcript } = useSpeechRecognition({commands});
  //console.log("this is transcript :",transcript);



const handleListening = () => {
  if(buttonName === BUTTON.START){
    console.log("button start is clicked");
    setButtonName(BUTTON.STOP);
    SpeechRecognition.startListening({ continuous: true });
  }else if(buttonName === BUTTON.STOP){
    SpeechRecognition.stopListening();
    setCommandNumber(LAMP_STATE.OFF);
    setLightOnOnce(false);
    if(lightOffOnce){
      setLightOffOnce(false);
    }else{
      setLightOffOnce(true);
    }
    
    
    setButtonName(BUTTON.START);
    setCommandNumber(LAMP_STATE.INITIAL);
  }
}


return(
    <>
        <div style={commandNumber === LAMP_STATE.ON ? lampOnDiv : lampOffDiv}>
        {((commandNumber === LAMP_STATE.ON && lightOnOnce) || (commandNumber === LAMP_STATE.OFF && lightOffOnce)) && <RetrieveCommand commandNumber={commandNumber}/>}
        </div>
        <div style={buttonDiv}>
            <Button type="primary" size={'large'} onClick={handleListening}>{buttonName}</Button>
        </div>
        
    </>
);
}


export default StartApplication;

所以，我注意到例如“on”命令的回调至少被调用两次，即使我只说一次“ON”。

有人可以帮我吗？有没有可能我说一次，命令就执行一次？

非常感谢您的光临！

4

1 回答 1

0

问题是matchInterim您设置的设置true。

将其更改为 false，该命令将只被识别一次。

这是来自react-speech-recognition 的文档：

  • matchInterim：确定“临时”结果是否应与命令匹配的布尔值。这将使您的组件更快地响应命令，但也使误报的可能性更大 - 即命令可能在未说出时被检测到。默认情况下这是错误的，应该只为简单的命令设置。

如果您绝对需要将临时选项设置为 true（因为它响应更快），那么您可以检查脚本以查看是否确实添加了新命令并仅在这种情况下响应。

于 2021-04-15T11:25:49.663 回答