React JS：将语音反应到文本识别

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 上工作正常（因为它支持网络语音 API）。我认为你没有正确使用它。

只需使用 create-react-app 创建新的 React App 并将 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)

Answer 2

试试下面的代码，

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

const Dictaphone = () => {
  const { transcript, resetTranscript } = useSpeechRecognition()

  if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    return null
  }

  return (
    <div>
      <button onClick={SpeechRecognition.startListening}>Start</button>
      <button onClick={SpeechRecognition.stopListening}>Stop</button>
      <button onClick={resetTranscript}>Reset</button>
      <p>{transcript}</p>
    </div>
  )
}
export default Dictaphone

更多react speech to text demo

Answer 3

Speechly 有一个很棒的教程和示例代码，用于 React 和实时语音搜索。它不使用 Web Speech API 但它是自己的专有 API，但是配置它非常简单。这是构建语音搜索的教程 https://github.com/speechly/react-example-repo-filtering

React JS：将语音反应到文本识别

React JS: React Voice to Text Recognition

javascript

voice-recognition

reactjs