Speech Recognition & Voice Synthesis in React (Web Speech API)
Ғылым және технология
How to build an AI voice translator app in JavaScript using Next.js, the Web Speech API, and the OpenAI API.
We'll walk through creating an app that converts speech-to-text using the browser's SpeechRecognition API, translates that text using from one language to another with OpenAI's Chat Completions API, and reads the text out loud in the translated language using SpeechSynthesis and the browser's available voices.
Some helpful links about browser compatibility and such...
caniuse.com/speech-recognition
/ taming-the-web-speech-api
talkrapp.com/speechSynthesis....
dev.to/jankapunkt/cross-brows...
🧰 Resources
Tutorial: spacejelly.dev/posts/how-to-b...
Code: github.com/colbyfayock/my-tra...
Demo: my-universal-translator.verce...
📺 KZread: kzread.info?sub_c...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayock.com/newsletter/
🎥 What I Use: www.colbyfayock.com/uses
#colbyfayock #nextjs #ai #speechrecognition #speechsynthesis #aitranslator #javascript #webdevelopment
Пікірлер: 27
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Thank you so much, Your expalining is really smooth 💯
@colbyfayock
4 ай бұрын
thanks! happy to hear that 🙌
I hope you get more visibility and subscribers. This was exactly what I needed (and the typescript type was a really nice touch)
@colbyfayock
Ай бұрын
really appreciate that! glad it helped you out
I enjoyed this, straight to the point! :)
@colbyfayock
3 ай бұрын
thanks, glad to hear that!
this video is lit.. clean explanation, thanks.
@colbyfayock
2 ай бұрын
🫡
I just want you to know personally i spent 4 months trying to do what you did in 30 min 😂😂😂 you got a new subscriber my friend e si eu gosto JavaScript ❤😂
@colbyfayock
Ай бұрын
haha glad i was able to help!
Thank you ..💚
@colbyfayock
2 ай бұрын
No problem!
something happened with Web Speech Recognition API. On Google Chrome Desktop it stopped providing punctuation and on Android Chrome it started making duplicate interimResults... I am not sure where to report this bug, I had it working with my AI app and all of the sudden things broke. On the Edge which is Chromium based it still works flawless, very strange..
@colbyfayock
Ай бұрын
i'm not sure how to report the bug, but here's their issue tracker: issues.chromium.org/issues?q=status perhaps once logged in it'l let you submit a new issue?
Nice work dude! I have a question, if i have my mic always on, how can I avoid the app listen to the bot?is there any way?
@colbyfayock
Ай бұрын
thank you! do you mean if you have your mic physically always on? or do you mean the browser API? the browser should only listen if you tell it to start listening, where in the example used a button to start that
Edge provides the best results, Synthesis & Recognition.
@colbyfayock
Ай бұрын
interesting didnt test that one! and realizing i can download that on Mac now, will have to play with it
thanks for the video, but can i record the speech to mp3? like voice note whatsapp
@colbyfayock
Ай бұрын
do you mean the translated version to mp3? or just simply recording a voice as is?
@yogyyconst
Ай бұрын
@@colbyfayock just the recording, because i need send the recording to backend
@colbyfayock
Ай бұрын
@@yogyyconst i think you'd actually want to use this API: developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API perhaps I'll make a tutorial around it at some point but i dont currently have one
@yogyyconst
Ай бұрын
@@colbyfayock it's ok, thank you man
does speech synthesis and speech recognition work offline
@colbyfayock
2 ай бұрын
im not sure about this. i know that some devices come with local synthesis services, so i would recommend trying it and seeing what's available on the devices/browsers you want to support