Синтез речи в React

Синтез речи быстро становится обязательной функцией современного веба. Работаете ли вы над доступностью, вовлечённостью или просто хотите дать пользователям ещё один способ потреблять контент — добавить голос в React-проект проще, чем кажется. В этом руководстве разберём, как работает синтез речи в браузере, чем различаются подходы и как шаг за шагом интегрировать TTS2Go в React-приложение.

Во всех современных браузерах есть Web Speech API. Можно вызвать window.speechSynthesis.speak() с SpeechSynthesisUtterance и услышать, как текст читается вслух, без каких-либо внешних сервисов. Это бесплатно, не требует API-ключа и работает полностью на клиенте.

Подвох — в качестве. Браузерные голоса звучат роботизированно, различаются в разных операционных системах и браузерах, а выбор голосов ограничен. Один и тот же текст на разных устройствах может звучать совершенно по-разному.

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

Обратная сторона — генерация такого аудио стоит денег и требует API. Отсюда важный вопрос: когда и как его генерировать?

Один подход — сгенерировать всё аудио заранее и отдавать его как статические файлы. Плюс — мгновенное воспроизведение, ведь аудио уже лежит в CDN, и неизменно высокое качество.

Минус — стоимость. Вы платите за генерацию аудио для всего контента, независимо от того, слушает его кто-нибудь или нет. Весь контент нужно знать заранее, а значит, динамический текст исключён. Каждое изменение контента запускает новый цикл генерации, а расходы на хранение растут вместе с библиотекой.

Альтернатива — генерировать аудио только тогда, когда его запрашивает пользователь. Это дешевле, ведь вы платите только за контент, который люди действительно хотят послушать, и такой подход работает с динамическим контентом.

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

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

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

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

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

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

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

Установите пакет TTS2Go для React в директории проекта:

npm install @tts2go/react

Пакет лёгкий — меньше 15 КБ в gzip — и не имеет peer-зависимостей, кроме React.

Оберните приложение в TTS2GoProvider в корне дерева компонентов. Передайте в конфигурацию ключ API и ID проекта.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TTS2GoProvider } from "@tts2go/react";
import App from "./App";

const config = {
  apiKey: "your-api-key",
  projectId: "your-project-id",
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TTS2GoProvider config={config}>
      <App />
    </TTS2GoProvider>
  </StrictMode>
);

Используйте хук useTTS в любом компоненте, чтобы получить управление воспроизведением, паузой и остановкой. А для быстрой иконки динамика можно просто вставить готовый TTSButton.

import { TTSButton, useTTS } from "@tts2go/react";

const VOICE_ID = "your-voice-id";

export default function Article({ text }: { text: string }) {
  const { status, play, stop, pause } = useTTS(text, VOICE_ID);

  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId={VOICE_ID} />
      <button onClick={status === "playing" ? stop : play}>
        {status === "playing" ? "Stop" : "Play"}
      </button>
    </div>
  );
}

Первый пользователь, нажавший «Воспроизвести», слышит браузерный TTS, а в вашу панель управления TTS2Go отправляется запрос на генерацию. После одобрения все последующие пользователи слышат ИИ-аудио.

Изучите выбор голосов, поддержку SSML для тонкой настройки произношения и API подсветки, который синхронизирует текст на экране с произносимыми словами.

Полная документация по React с продвинутыми паттернами и примерами — по адресу tts2go.com/docs/react.