Question

我希望将语音识别整合到我的React项目中，我可能会将每个可以通过语音识别控制的功能分离到各种服务中，但目前我对如何将其非常困惑接近这个。

我可以通过将代码放入索引并运行如下代码来使Annyang工作：

const annyang = require('annyang');
if (annyang) {
// Let's define a command.
annyang.debug();
var commands = {
  'hello world': function() { alert('Hello'); }
};

// Add our commands to annyang
annyang.addCommands(commands);

annyang.addCallback('soundstart', function() {
  console.log('sound detected');
});

annyang.addCallback('result', function() {
  console.log('sound stopped');
});
// Start listening.
annyang.start();
}

但我真的很困惑这段代码如何与我已经拥有的组件进行交互？我是React的新手，很想知道这样的最佳实践。

我正在考虑在自己的文件中运行此代码，并且可能导出模块并在我的组件中需要它，这是不错的做法还是我错过了什么？

如果我不清楚，请告诉我，我会尽力解释

Answer 1

这实际上取决于你的目标。

一个好的做法是将所有Annyang命令放在顶级组件（例如<App/>）中，并在执行语音命令时设置状态（或调度操作）。这是一个非常基本的例子，没有任何通量实现或许多组件：

＆＃13;

class App extends React.Component {
  constructor() {
    super();
    this.state = { hello: false };
  }
  componentDidMount() {
    if (annyang) {
      // Let's define a command.
      var commands = {
        'hello': () => this.setState({ hello: true })
      };

      // Add our commands to annyang
      annyang.addCommands(commands);

      // Start listening.
      annyang.start();
    }
  }
  render() {
    return this.state.hello ? <SaidHello /> : <Welcome />;
  }

}

class Welcome extends React.Component {
  render() {
    return <div>Say "hello"!</div>;
  }
}

class SaidHello extends React.Component {
  render() {
    return <div>Well, hello! How are you?</div>;
  }
}

ReactDOM.render(<App/>, document.getElementById('View'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>

<div id="View"></div>

＆＃13;

请记住在您的浏览器中允许麦克风访问，否则它将无法正常工作。如果此示例不适用于StackOverflow，check it out on JSBin。

Annyang in react - 最佳实践

1 个答案: