- Популярные видео
- Авто
- Видео-блоги
- ДТП, аварии
- Для маленьких
- Еда, напитки
- Животные
- Закон и право
- Знаменитости
- Игры
- Искусство
- Комедии
- Красота, мода
- Кулинария, рецепты
- Люди
- Мото
- Музыка
- Мультфильмы
- Наука, технологии
- Новости
- Образование
- Политика
- Праздники
- Приколы
- Природа
- Происшествия
- Путешествия
- Развлечения
- Ржач
- Семья
- Сериалы
- Спорт
- Стиль жизни
- ТВ передачи
- Танцы
- Технологии
- Товары
- Ужасы
- Фильмы
- Шоу-бизнес
- Юмор
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
Видео TTS & Translate App | Serverless Functions, Google Translate & Web Speech API канала Traversy Media
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
Видео TTS & Translate App | Serverless Functions, Google Translate & Web Speech API канала Traversy Media
Комментарии отсутствуют
Информация о видео
20 января 2025 г. 20:00:40
00:45:22
Другие видео канала



![PHP Front To Back - [Part 13] Ternary & Shorthand Syntax](https://i.ytimg.com/vi/NUq0ZT54zvw/default.jpg)

![Building a GraphQL Server [Part 5] - Mutations](https://i.ytimg.com/vi/ay81Q5JhkEw/default.jpg)





![JavaScript Under The Hood [4] - Memory Storage](https://i.ytimg.com/vi/Hci9Bb4_fkA/default.jpg)
![JavaScript Under The Hood [2] - Execution Context](https://i.ytimg.com/vi/Fd9VaW0M7K4/default.jpg)



![Responsive Portfolio Website [5] - About Page With CSS Grid](https://i.ytimg.com/vi/QOdnrMC9O7A/default.jpg)
![Full Stack React & LoopBack [4] - Add, Edit & Delete Meetups](https://i.ytimg.com/vi/yN5qKqLDlpM/default.jpg)


