Question

我是React JS的新手。我正在为输入框实现将语音回复为文本。我正在使用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，然后将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 Voice to Text Recognition

3 个答案: