DEV Community

Cover image for How to perfectly use Deepgram in React-JS? ๐Ÿ˜ฒ
Jackson Kasi
Jackson Kasi Subscriber

Posted on โ€ข Edited on

6 2

How to perfectly use Deepgram in React-JS? ๐Ÿ˜ฒ

Simple speech recognition AI with Deepgram in React-JS ๐Ÿ˜


Overview of My Submission: ๐Ÿ‘€

React developers' contribution to the Deepgram hackathon was minimal, so I created this.

Also in a lot of projects, does not handle browser audio properly. i.e. once the mic recording is turned on and then I can't turn off it.

I am not criticizing anyone for any project, I just say it could probably help others.
please forgive me if I offended you.

I hope this simple project of mine will help.

I would be very happy if anyone found this project helpful :)


Submission Category: ๐ŸŽŠ

Wacky Wildcards


GitHub ๐Ÿ‘จโ€๐Ÿ’ป

Simple AI Speech Recognition with Deepgram on React-JS ๐Ÿฑโ€๐Ÿ’ป

img

Deployment commands ๐Ÿ”ง

Create a new directory, navigate to that directory in a terminal and clone the GitHub repository

git clone https://github.com/jacksonkasi0/simple-speech-recognition-with-deepgram-in-reactjs.git
Enter fullscreen mode Exit fullscreen mode

Change directory to the pattern directory:

cd simple-speech-recognition-with-deepgram-in-reactjs
Enter fullscreen mode Exit fullscreen mode

From the command line, you should Enter:

npm install 
Enter fullscreen mode Exit fullscreen mode

Past your Deepgram secret key on .env

REACT_APP_DEEPGRAM_KEY=< secret-key >

npm start
Enter fullscreen mode Exit fullscreen mode

happy coding ๐Ÿค—๐ŸŽ‰


Web link ๐Ÿ”—:

https://ai-speech-recognition.netlify.app

Read more ๐Ÿ“–:

https://dev.to/jacksonkasi

About this application ๐Ÿง:

https://dev.to/jacksonkasi/how-to-perfectly-use-deepgram-in-react-js-1cef

Some life saving info ๐Ÿค”๐Ÿ’ญ:




Additional Resources / Info ๐Ÿ“–

Top comments (2)

Collapse
 
techjmi profile image
MD SHAMIM AKHTER โ€ข

bro i tried it is not working.... i am getting error like connection failed with websocket..

Collapse
 
jacksonkasi profile image
Jackson Kasi โ€ข

Hi @techjmi, it was built it, two years ago. I recommend checking the document once, as some things might have changed for the latest version of Deepgram models.

nextjs tutorial video

Youtube Tutorial Series ๐Ÿ“บ

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series ๐Ÿ‘€

Watch the Youtube series