Up next in 10
Build a React.js Speech to Text Web App Through Microphone Using react -speech-recognition Library
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/88c65e58367c4ad7b989c952bbe3a935
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we will look at a speech
0:05
recognition example inside react Chase
0:08
where we'll be converting our own Voice
0:10
through microphone into text and we'll
0:12
be showing it in the text area we'll be
0:14
having a react specific library for this
0:17
react speech recognition library on your
0:19
screen you can see the demo of the
0:21
screen we have four buttons start
0:24
listening if you click this
0:26
button you need to Grant the permission
0:29
for the microphone pH so now you can see
0:31
whatever I'm speaking right here through
0:32
my microphone is it capturing and it is
0:35
displaying it in the text area and it's
0:37
automatically being written in the text
0:39
area this is actually in the whole it's
0:41
a speech to text uh
0:45
application so once you
0:48
stop automatically it will be stopped
0:50
and you can copy this text to clipboard
0:52
again if you want to listen you can
0:55
simply click this button and then
0:58
whatever you're speaking it will be Capt
1:00
caped so you can see it's a very awesome
1:03
application so whatever I'm speaking in
1:05
the microphone it is capturing in this
1:07
speech to text application so in this
1:09
way you can make this I will show you
1:11
step by step in this video how to make
1:13
this application in the browser using
1:16
react
1:17
CH so you can see the status here it is
1:21
showing not listening if I click Start
1:24
listening it will change to listening so
1:26
in this
1:28
way so the module is if you go to
1:31
npmjs.com it is react
1:36
speech
1:38
recognition this is actually the name of
1:40
the module here almost 35,000 weekly
1:44
downloads are there so this is actually
1:46
the command here npmi react speech
1:49
recognition so simply go to your command
1:51
line and just install this
1:57
module I have already installed it so
2:00
what I will do I will start the
2:02
development server
2:04
so now just create a simple app level
2:07
component
2:09
so so I will show you step by step so
2:12
first of all we need to include the
2:15
actual package at using the import
2:17
statement so import speech recognition
2:21
from react speech recognition this is
2:23
actually your module and also there is
2:26
one other hook that we need to import
2:28
which is use page recognition this is
2:31
actually a react hook which is available
2:33
from this
2:35
library and now we need to actually
2:38
import some methods using this package
2:42
so using this hook that is provided by
2:45
this uh Library use speech recognition
2:48
and from these we have three methods or
2:51
four methods first is a
2:53
transcript transcript is whatever that
2:56
you speak it is captured using a text
2:59
and then then we have the status here
3:02
listening whether you are uh speaking or
3:05
not it will be captured in this variable
3:07
the third variable is reset transcript
3:10
so this simply means that if you want to
3:12
delete everything that you spoken you
3:13
can click this button and then it will
3:15
reset this and lastly we have the
3:18
browser support speaker recognition it
3:21
will be true or false either depending
3:23
upon your browser whether it supports
3:25
speech recognition or not so we have
3:27
these four methods now we will simply
3:31
check here using this if condition that
3:33
if your browser supports speak
3:35
recognition or not using this Boolean
3:37
variable so if it doesn't support then
3:40
you will simply return a simple
3:42
paragraph showing to the user that your
3:45
browser doesn't does not
3:47
support speech
3:50
recognition very simple message and now
3:53
coming back to the jsx inside this we
3:56
will actually have a div
4:03
so here you'll be giving a
4:05
style attribute we'll be changing the
4:07
font family to aial and we'll be
4:11
aligning this in
4:14
the center position and we'll be giving
4:16
a
4:19
margin from the top which is 50 pixels
4:22
so these three custom Styles and then
4:25
inside this we will have an actual
4:27
heading which will say
4:30
react speech
4:34
recognition example
4:37
and inside your div we will show
4:40
actually the status here whether you are
4:42
speaking or not so the status will be
4:44
coming from that listening variable that
4:48
we imported so depending upon whether
4:51
you are speaking we will change the
4:53
status using this stary operator
5:03
so if you refresh your browser uh just
5:06
go to you will see the status will not
5:08
be not listening because we are not
5:10
speaking we do need to get a button here
5:13
to let the user Grant the permission to
5:15
the microphone so after this paragraph
5:18
We will have the button here which will
5:21
be start
5:24
listening the second button will be to
5:27
stop listening
5:30
and the third button will be
5:37
for reset
5:42
transcript so we have these three
5:44
buttons so if you just see you will have
5:47
these three buttons now we just need to
5:48
bind an onclick listener to each of
5:51
these buttons so when we click the start
5:55
listening button we will execute this
5:57
method speech recognition and it
6:00
contains this method start listening so
6:03
it has this property here start
6:06
listening and when you click this button
6:09
again we have a built-in method inside
6:12
this
6:13
Library which is speech recognition and
6:16
it contains this method stop
6:21
listening and lastly we have this reset
6:25
transcript we have the property reset
6:27
transcript so we have just binded all
6:30
three methods on these buttons so now if
6:33
you open your application click on this
6:36
button so now I'm speaking it is
6:39
capturing it but we do need to show the
6:41
text as well in the text area so right
6:44
after this div we will actually have
6:48
a text area where we can display the
6:51
text which has been spoken by the user
6:55
so in this we'll give it a margin of 20
6:59
pixel and inside this we will have an H2
7:02
heading which will say
7:04
transcript and after this we will
7:07
actually have an
7:08
paragraph inside this we will display
7:11
the
7:12
transcript like this inside C bracket
7:16
transcript or say something so if you
7:19
refresh your browser you will see now we
7:22
have the button here if I click the
7:24
button you will see what I'm speaking it
7:26
is been captured and it has been
7:28
displayed in the text area so in this
7:31
way you can make a speech to text kind
7:33
of an application inside react CH so
7:35
using your microphone you can capture
7:39
anything so in this way all the source
7:42
code will be given in the description of
7:44
this
7:48
video so we have these text speech to
7:51
text application in react
7:53
CHS so thank you very much for watching
7:56
this video and do check out my website
7:59
as well free mediat tools.com which
8:01
contains thousands of free tools
8:03
regarding audio video and
8:05
image and I will be seeing you in the
8:07
next video
#Programming
#Software