Friday, November 20, 2020

React JS - Speech to text

A React hook that converts speech from the microphone to text and makes it available to your React components.

Under the hood, it uses Web Speech API. Note that browser support for this API is currently limited. But most of the browsers it seems to be working well as well, So this is good library for most of the purposes. 

Basic example is below 

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



references:

https://www.npmjs.com/package/react-speech-recognition


No comments:

Post a Comment