How to convert speech to text in React JS

In this article,we are going to make a program which converts speech into text window.webkitSpeechRecognition.We divide the whole program into two files,One is App.js and other is styles.css file

App.js file is displayed below:

1import React, { useState, useEffect } from 'react'
2import './styles.css'
3
4const SpeechRecognition =
5  window.SpeechRecognition || window.webkitSpeechRecognition
6const mic = new SpeechRecognition()
7
8mic.continuous = true
9mic.interimResults = true
10mic.lang = 'en-US'
11
12function App() {
13  const [isListening, setIsListening] = useState(false)
14  const [note, setNote] = useState(null)
15  const [savedNotes, setSavedNotes] = useState([])
16
17  useEffect(() => {
18    handleListen()
19  }, [isListening])
20
21  const handleListen = () => {
22    if (isListening) {
23      mic.start()
24      mic.onend = () => {
25        console.log('continue..')
26        mic.start()
27      }
28    } else {
29      mic.stop()
30      mic.onend = () => {
31        console.log('Stopped Mic on Click')
32      }
33    }
34    mic.onstart = () => {
35      console.log('Mics on')
36    }
37
38    mic.onresult = event => {
39      const transcript = Array.from(event.results)
40        .map(result => result[0])
41        .map(result => result.transcript)
42        .join('')
43      console.log(transcript)
44      setNote(transcript)
45      mic.onerror = event => {
46        console.log(event.error)
47      }
48    }
49  }
50
51  const handleSaveNote = () => {
52    setSavedNotes([...savedNotes, note])
53    setNote('')
54  }
55
56  return (
57    <>
58      <h1>Voice Notes</h1>
59      <div className="container">
60        <div className="box">
61          <h2>Current Note</h2>
62          {isListening ? <span>🎙️</span> : <span>🛑🎙️</span>}
63          <button onClick={handleSaveNote} disabled={!note}>
64            Save Note
65          </button>
66          <button onClick={() => setIsListening(prevState => !prevState)}>
67            Start/Stop
68          </button>
69          <p>{note}</p>
70        </div>
71        <div className="box">
72          <h2>Notes</h2>
73          {savedNotes.map(n => (
74            <p key={n}>{n}</p>
75          ))}
76        </div>
77      </div>
78    </>
79  )
80}
81
82export default App

Styles.css file is displayed below

1.App {
2  text-align: center;
3}
4
5.App-logo {
6  height: 40vmin;
7  pointer-events: none;
8}
9
10@media (prefers-reduced-motion: no-preference) {
11  .App-logo {
12    animation: App-logo-spin infinite 20s linear;
13  }
14}
15
16.App-header {
17  background-color: #282c34;
18  min-height: 100vh;
19  display: flex;
20  flex-direction: column;
21  align-items: center;
22  justify-content: center;
23  font-size: calc(10px + 2vmin);
24  color: white;
25}
26
27.App-link {
28  color: #61dafb;
29}
30
31@keyframes App-logo-spin {
32  from {
33    transform: rotate(0deg);
34  }
35  to {
36    transform: rotate(360deg);
37  }
38}

Here is the link of live example which we done so far:
Click here