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:
- Intro
- Project Structure
- HTML & Tailwind Classes
- Web Speech API & TTS
- Get Voices
- Language Selection
- Google Translate API Key Setup
- Vercel CLI Setup
- Creating a Serverless Function
- dotenv Setup
- Google Translate API Request
- Test Function With Postman
- Make Request To Serverless Function Endpoint
- Translate Text & Play TTS
- Deploy To Vercel
1:38:36
1:40
7:18
43:53