Синтез речи на чистом JavaScript

Чтобы добавить на сайт синтез речи (text-to-speech, TTS), фреймворк не нужен. Пишете ли вы на чистом HTML и JavaScript, пользуетесь генератором статических сайтов или рендерите страницы на сервере — озвучить контент несложно.

В этом руководстве разберём, как работает синтез речи в браузере, чем различаются подходы и как интегрировать TTS2Go в любой проект на JavaScript.

В современные браузеры уже встроен Web Speech API. Достаточно нескольких строк на чистом JavaScript:

```js

const utterance = new SpeechSynthesisUtterance("Hello world");

window.speechSynthesis.speak(utterance);

```

Никаких npm-пакетов, API-ключей и сервера. Это бесплатно и работает офлайн.

Минусы — качество и предсказуемость:

• Голоса часто звучат роботизированно.
• Качество и набор голосов различаются от платформы к платформе.
• Chrome на Windows звучит иначе, чем Safari на macOS.
• Вы не можете гарантировать всем пользователям одинаковое впечатление от прослушивания.

ИИ-синтез речи изменил представление о том, что возможно с голосом в вебе. Нейросетевые голосовые модели создают аудио, которое звучит по-настоящему по-человечески: с естественными паузами, ударениями и ритмом.

Один вариант — заранее сгенерировать аудио для всего контента и разместить файлы в CDN.

Плюсы

• Мгновенное воспроизведение для пользователей
• Одинаковое качество и голос везде

Минусы

• Вы платите за генерацию аудио для всего контента сразу — независимо от того, прослушают его или нет
• Весь контент должен быть известен заранее
• При обновлениях файлы приходится генерировать заново
• Расходы на хранение растут вместе с библиотекой контента

Предварительная генерация хорошо подходит для небольших и стабильных каталогов, но при масштабировании становится дорогой и негибкой.

Более экономный подход — генерировать аудио только тогда, когда кто-то действительно нажимает «Воспроизвести».

Преимущества

• Вы платите только за аудио, которое запрашивают пользователи
• Динамический и пользовательский контент обрабатывается естественным образом

Сложность

Без ограничений любой посетитель сайта может запустить дорогостоящую генерацию. Нужен способ решать, что и когда генерировать, чтобы контролировать бюджет и при этом предлагать озвучку везде.

TTS2Go использует гибридный подход, который сочетает качество, стоимость и простоту.

1. Безопасный клиентский ключ

Вы подключаете SDK к сайту с фронтенд-ключом API. Ключ защищён блокировкой запросов по домену и ограничением частоты запросов, поэтому его можно спокойно хранить в клиентском коде. Это механизм идентификации и ограничения частоты, а не секрет.

1. Первый посетитель: мгновенный браузерный TTS и генерация в фоне

Когда первый человек нажимает кнопку озвучки на странице, он сразу слышит браузерный синтез речи. Одновременно в фоне в TTS2Go отправляется запрос на генерацию.

1. Одобрение и контроль бюджета

В панели управления TTS2Go вы можете:

• одобрять запросы на генерацию вручную или
• настроить ИИ-систему одобрения, чтобы она автоматически одобряла запросы, которые соответствуют вашим критериям.

Так вы полностью контролируете бюджет на генерацию.

1. Следующие посетители: премиальное ИИ-аудио из CDN

Как только запрос одобрен и аудио сгенерировано, каждый следующий пользователь, нажавший кнопку озвучки на этой же странице, получает качественное ИИ-аудио выбранным вами голосом — мгновенно, из CDN TTS2Go.

На практике: первый посетитель слышит браузерный TTS, расходы контролируются через одобрение, а все последующие получают премиальное ИИ-аудио.

Установите пакет TTS2Go для чистого JavaScript через npm:

npm install @tts2go/vanilla

Если вы не используете сборщик, подключите его из CDN через тег <script> и обращайтесь к нему как к window.TTS2Go.

Инициализируйте новый экземпляр TTS2Go с данными вашего проекта:

import { TTS2Go } from "@tts2go/vanilla";

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

Вызовите tts.create() с текстом и ID голоса, чтобы получить TTS-экземпляр с полным набором элементов управления воспроизведением:

const instance = tts.create(
"Hello from TTS2Go in plain JavaScript!",)

Дальше можно изучить полный JavaScript API TTS2Go, в том числе:

• tts.getVoices() – список голосов, доступных в вашем проекте