TTS & Translate App | Serverless Functions, Google Translate & Web Speech API

We will build a JavaScript web app that takes in some text and does TTS as well as the option to select a language to translate to. We will use the Vercel CLI and a serverless function fot the translation and API KEY security. Tailwind CSS for styling.

Final Code:

For more Vanilla JS projects, check out these courses:

20 Vanilla JS Projects:

Modern JS From the Beginning:

50 Projects In 50 Days:

Timestamps:
0:00 - Intro
2:22 - Project Structure
4:38 - HTML & Tailwind Classes
8:32 - Web Speech API & TTS
11:10 - Get Voices
16:20 - Language Selection
20:06 - Google Translate API Key Setup
21:29 - Vercel CLI Setup
23:57 - Creating a Serverless Function
26:57 - dotenv Setup
29:22 - Google Translate API Request
32:58 - Test Function With Postman
34:18 - Make Request To Serverless Function Endpoint
38:39 - Translate Text & Play TTS
43:21 - Deploy To Vercel

[NiagaraThistle]

Man! I've been doing web dev for 15+ years and EVERY SINGLE VIDEO you put out teaches me something awesome. Thanks for everything you put out Brad!

[bryansim]

Hi, thanks for another great tutorial!

I managed to find out why chinese and japanese doesn't work! U just need to choose the correct voices that is associated to the choice of language!

Even if the translation works perfectly, without appropriate voices, the speech synthesis will either:
Use an English voice (sounds wrong)
Fail silently
Produce garbled audio

[BRAHIM-ntw]

you are my teacher, and udemy teacher
thks

[BMELoganathanC]

Man your teaching way I always like ❤ and I want please start services workers playlist

[CutsMetaphor]

I have missed brad, reason I am in big tech from Kenya 🇰🇪

[lawaldare]

Thanks so much for this - I am gonna rebuild with Angular

[skootdiggity]

Thanks for this. Very informative and it only requires a small time investment!

[romainmt]

As usual your videos are awesome and I learned so much with you ! Thank you so much for that !
The app works perfectly on PC or Mac but is there anyone having trouble making it work on iPhone ?

[zerozeroisland]

This is a great project! I was really enjoying following along but i stopped at the Google API point, when i went to set up the Cloud Translation API it said my account needed to have billing set up and the cost was $45/hr, is that right? I didn't see any other options but the paid one. Either way i picked up some great tips on tailwind and setting up speech, so thanks!

[curiousJais]

Do you recommend adding payment method to use google cloud translation api for learning purpose as a student? Is there any risk of high billing:)

[durangodave]

thanks im using google in a popup now and its a pain and not user friendly. This is great 👍

[omyele]

Can you make STT so that we can avoid using open ai API

[waqarwld]

do you give advice and I just want to talk to you for me and for my kids. how can i reach you ?

[Beanbag]

Hey I’m new to this channel how do I think like a programmer

[iowatheother]

Hey mate, hope you see this!!

Are all your videos 5years and older still valid to this day???

[chihuhahuana]

can't wait for the 2025 web dev guide

[dreamsachiever]

Woah! Just yesterday I was checking out Google Translation API, wanted to know if it was free or paid lmao