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

  • @colbyfayock
    @colbyfayock4 ай бұрын

    Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

  • @AsemAmr19
    @AsemAmr194 ай бұрын

    Thank you so much, Your expalining is really smooth 💯

  • @colbyfayock

    @colbyfayock

    4 ай бұрын

    thanks! happy to hear that 🙌

  • @devlearnllm
    @devlearnllmАй бұрын

    I hope you get more visibility and subscribers. This was exactly what I needed (and the typescript type was a really nice touch)

  • @colbyfayock

    @colbyfayock

    Ай бұрын

    really appreciate that! glad it helped you out

  • @nicolaihoegsbjerg
    @nicolaihoegsbjerg3 ай бұрын

    I enjoyed this, straight to the point! :)

  • @colbyfayock

    @colbyfayock

    3 ай бұрын

    thanks, glad to hear that!

  • @Imvivekvermaa
    @Imvivekvermaa2 ай бұрын

    this video is lit.. clean explanation, thanks.

  • @colbyfayock

    @colbyfayock

    2 ай бұрын

    🫡

  • @svnbeats6700
    @svnbeats6700Ай бұрын

    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

    @colbyfayock

    Ай бұрын

    haha glad i was able to help!

  • @AhmadJS
    @AhmadJS2 ай бұрын

    Thank you ..💚

  • @colbyfayock

    @colbyfayock

    2 ай бұрын

    No problem!

  • @lev1ato
    @lev1atoАй бұрын

    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

    @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?

  • @LucasSilva-yg3nr
    @LucasSilva-yg3nrАй бұрын

    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

    @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

  • @contigen
    @contigen2 ай бұрын

    Edge provides the best results, Synthesis & Recognition.

  • @colbyfayock

    @colbyfayock

    Ай бұрын

    interesting didnt test that one! and realizing i can download that on Mac now, will have to play with it

  • @yogyyconst
    @yogyyconstАй бұрын

    thanks for the video, but can i record the speech to mp3? like voice note whatsapp

  • @colbyfayock

    @colbyfayock

    Ай бұрын

    do you mean the translated version to mp3? or just simply recording a voice as is?

  • @yogyyconst

    @yogyyconst

    Ай бұрын

    @@colbyfayock just the recording, because i need send the recording to backend

  • @colbyfayock

    @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

    @yogyyconst

    Ай бұрын

    @@colbyfayock it's ok, thank you man

  • @crazyb8593
    @crazyb85932 ай бұрын

    does speech synthesis and speech recognition work offline

  • @colbyfayock

    @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

Келесі