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:

https://github.com/bradtraversy/tts-translate

For more Vanilla JS projects, check out these courses:

20 Vanilla JS Projects:

https://www.traversymedia.com/20-Vanilla-JavaScript-Projects

Modern JS From the Beginning:

https://www.traversymedia.com/modern-javascript-2-0

50 Projects In 50 Days:

https://www.traversymedia.com/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