javascript - react JS : React Voice to Text Recognition

Question

我是 React JS 新手。我正在为输入框实现 React Voice to text 。我正在使用React Voice to Text我的工作插件。不知怎的，它对我不起作用。

还有其他库或插件对我有帮助吗？

我已经尝试过以下代码。

import React, { PropTypes, Component } from 'react'
import SpeechRecognition from 'react-speech-recognition'


const propTypes = {
  // Props injected by SpeechRecognition
  transcript: PropTypes.string,
  resetTranscript: PropTypes.func,
  browserSupportsSpeechRecognition: PropTypes.bool
}


class Dictaphone extends Component {
  render() {
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props

    if (!browserSupportsSpeechRecognition) {
      return null
    }

    return (
      <div>
        <button onClick={resetTranscript}>Reset</button>
        <span>{transcript}</span>
      </div>
    )
  }
}


Dictaphone.propTypes = propTypes

export default SpeechRecognition(Dictaphone)

任何帮助都会很棒。

谢谢。

Answer 1

react-speech-recognition 在 Chrome 上运行良好(因为它支持 Web Speech API)。我认为你没有正确使用它。

只需使用 create-react-app 创建新的 React 应用程序，并将 App.js 代码替换为以下代码。

import React, {Component } from 'react'
import SpeechRecognition from 'react-speech-recognition'

class Dictaphone extends Component {
  render() {
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props

    if (!browserSupportsSpeechRecognition) {
      return null
    }

    return (
      <div>
        <button onClick={resetTranscript}>Reset</button>
        <span>{transcript}</span>
      </div>
    )
  }
}

export default SpeechRecognition(Dictaphone)

默认情况下，它开始直接监听。您可以通过提供 npm 文档中提到的选项来控制它。

const options = {
  autoStart: false
}

export default SpeechRecognition(options)(Dictaphone)