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

5.0 (3)

31 learners

What you'll learn

This course includes

52 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

javascript javascript tutorial tts tts app vercel vercel cli serverless functions vercel serverless functions Google translation API web speech api Google translate api

Full Transcript

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