Все статьи
Текстовые инструменты

Text-to-Speech: синтез речи в браузере

Web Speech API, синтез речи на JavaScript, поддержка языков, использование для доступности.

6 марта 2025
7 мин чтения
ConvertHub
#tts#речь#доступность

Введение

Text-to-Speech (TTS), или синтез речи, — технология, превращающая текст в звучащую речь. Долгое время она была доступна только через серверные сервисы с платными API, но сегодня базовый синтез встроен прямо в браузеры через Web Speech API. Это значит, что озвучить статью, новость или учебный материал можно без установки приложений, без отправки текста на сервер и без платных подписок — достаточно открыть инструмент и нажать кнопку.

В этой статье разберём, как работает синтез речи в браузере, какие возможности даёт Web Speech API, насколько хорошо поддерживается русский язык и где TTS оказывается полезным. Попробовать озвучку можно в инструменте text-to-speech — он работает прямо в браузере.

Что такое Web Speech API

Web Speech API — стандарт W3C, описывающий два независимых интерфейса: синтез речи (Speech Synthesis) и распознавание речи (Speech Recognition). Они никак не связаны между собой и могут использоваться по отдельности. Синтез поддерживается во всех современных браузерах на десктопе и мобильных, распознавание — более ограниченно. Подробнее о распознавании — в материале про speech-to-text.

SpeechSynthesis API

Синтез речи доступен через объект window.speechSynthesis. Основные компоненты:

  • SpeechSynthesisUtterance — объект, представляющий фразу для озвучивания. В него передаётся текст и настраиваются параметры: язык, голос, скорость, высота тона, громкость.
  • speechSynthesis.getVoices() — возвращает список доступных голосов. Состав зависит от операционной системы и установленных языковых пакетов.
  • speechSynthesis.speak(utterance) — запускает озвучивание.
  • Методы pause(), resume(), cancel() — управляют воспроизведением.
  • События onstart, onend, onboundary — позволяют отслеживать прогресс и синхронизировать с подсветкой слов.

Как работает синтез

Современный синтез речи делится на два поколения: традиционный (concatenative, формантный) и нейронный (neural TTS). В браузере через Web Speech API используется тот голос, который предоставляет операционная система, — обычно это встроенные голоса ОС.

Традиционный синтез

Классические голоса собирают речь из заранее записанных фрагментов (diphone, unit selection) или генерируют формантным методом. Качество приемлемое, но интонация механическая, ударения иногда ошибаются. На Windows это голоса Microsoft (Zira, David, Pavel и другие), на macOS — голоса Siri и Alex, на iOS — системные голоса Apple.

Нейронный синтез

Современные голосы на базе нейросетей (WaveNet, Tacotron, FastSpeech и их аналоги) звучат почти как живой диктор. Но они требуют значительных вычислительных ресурсов и обычно предоставляются через облачные API. В браузере Web Speech API не даёт к ним прямого доступа — для нейронного синтеза нужны сторонние библиотеки или сервисы. Тем не менее качество системных голосов на современных ОС заметно выросло, и для большинства задач их достаточно.

Поддержка языков и голосов

Список доступных голосов зависит от операционной системы. На Windows 10 и 11 есть русские голоса (например, Microsoft Pavel — мужской и Microsoft Irina — женский, на новых версиях также нейронные версии). На macOS и iOS русские голоса устанавливаются отдельно через настройки системы, по умолчанию их может не быть. На Linux набор зависит от установленного речевого движка (espeak, Festival, Pico).

Чтобы проверить наличие русского голоса, нужно вызвать getVoices() и отфильтровать по lang.startsWith('ru'). Если русских голосов нет, инструмент либо сообщит пользователю, что нужно установить голоса в системе, либо предложит использовать другой язык.

Параметры синтеза

SpeechSynthesisUtterance позволяет тонко настраивать звучание.

  • rate (скорость). От 0.1 до 10, по умолчанию 1. Скорость речи. Для быстрого просмотра статей часто ставят 1.2–1.5, для учебных материалов — 0.8–0.9.
  • pitch (высота тона). От 0 до 2, по умолчанию 1. Влияет на тембр: выше значение — выше голос.
  • volume (громкость). От 0 до 1, по умолчанию 1.
  • voice (голос). Объект из getVoices(). Выбор голоса определяет тембр и диктора.
  • lang (язык). Код языка в формате BCP 47, например ru-RU.

Зачем нужен text-to-speech

Сценариев использования синтеза речи больше, чем кажется.

  • Доступность. Для людей с нарушениями зрения или дислексией озвучка текста — способ потреблять контент. Сайты, предоставляющие TTS, соответствуют рекомендациям WCAG и доступны более широкой аудитории.
  • Мультитаскинг. Слушать статьи, пока моете посуду, едете в транспорте или занимаетесь спортом, — способ использовать время, которое иначе пропадает.
  • Изучение языков. Прослушивание текста с правильным произношением помогает освоить фонетику. Возможность замедлить скорость полезна для начинающих.
  • Корректура. Слушая свой текст, легче заметить опечатки и стилистические шероховатости, которые глаз пропускает.
  • Образование. Аудиоверсии лекций и конспектов для студентов, которым удобнее воспринимать на слух.
  • Контент для подкастов. Быстрая озвучка черновика, чтобы оценить, как материал звучит, перед записью с живым диктором.
  • Автоматические уведомления. В веб-приложениях голосовые оповещения о событиях (окончание таймера, входящее сообщение).

Подводные камни браузерного TTS

  • Зависимость от ОС. Голоса и их качество определяются системой пользователя, а не сайтом. У одного посетителя будет отличный нейронный голос, у другого — примитивный синтетический.
  • Асинхронная загрузка голосов. На некоторых браузерах getVoices() возвращает пустой массив при первом вызове. Нужно слушать событие voiceschanged и обновлять список.
  • Ограничения длины. Некоторые браузеры (особенно Chrome) обрывают длинные utterance примерно через 15 секунд. Для длинных текстов нужно разбивать на короткие фразы и вызывать speak() по цепочке.
  • Автовоспроизведение. Браузеры блокируют воспроизведение звука без пользовательского взаимодействия. TTS нужно запускать по клику или другому действию пользователя.
  • Ударения в русском. Системные движки иногда ошибаются с ударениями в русских словах (например, «зАмок» вместо «замОк»). Исправить можно, вставив символ ударения (U+0301) или заменив проблемное слово на фонетическую транскрипцию.
  • Мобильные ограничения. На iOS синтез речи обрывается при переключении вкладки в фон или блокировке экрана.
  • Поддержка старых браузеров. Internet Explorer и старые версии Safari либо не поддерживают Web Speech API, либо поддерживают с префиксами.

Сценарии использования

Озвучка статей на новостном сайте

Кнопка «слушать» над статьёй запускает TTS. Пользователь может продолжать заниматься своими делами, пока статья читается вслух. Для длинных материалов важно разбить текст на абзацы и озвучивать их последовательно, иначе браузер обрежет.

Учебные материалы

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

Доступность для слабовидящих

Сайт с кнопкой озвучки делает контент доступным для людей, которым трудно читать с экрана. Это соответствие WCAG и расширение аудитории.

Корректура текстов

Перед публикацией статьи прогоните её через TTS — услышите опечатки, тавтологии, корявые формулировки, которые глаз пропустил. Это бесплатная и эффективная проверка.

Изучение иностранных языков

Слушаете иностранный текст с правильным произношением, замедляете скорость, повторяете за диктором. TTS не заменяет живого общения, но для начального освоения фонетики полезен.

Лучшие практики

  • Проверяйте наличие голосов. Перед запуском TTS убедитесь, что в системе есть голос нужного языка, и сообщите пользователю, если его нет.
  • Разбивайте длинный текст. На абзацы или предложения — иначе браузер может оборвать воспроизведение.
  • Дайте пользователю управление. Кнопки паузы, возобновления, остановки, регулировки скорости и выбора голоса.
  • Запускайте по действию пользователя. Из-за ограничений автовоспроизведения TTS должен запускаться по клику, а не автоматически.
  • Подсветите читаемый фрагмент. Событие onboundary позволяет синхронизировать подсветку слов с речью — это улучшает восприятие.
  • Учитывайте мобильные ограничения. На iOS предупредите пользователя, что при сворачивании вкладки воспроизведение остановится.

Конфиденциальность

Браузерный TTS через Web Speech API синтезирует речь локально, на устройстве пользователя. Текст не отправляется на сервер — это важное преимущество для конфиденциальных материалов. Серверные TTS-сервисы, напротив, получают текст и могут его хранить. Если работаете с чувствительной информацией, выбирайте локальные решения.

Заключение

Text-to-Speech в браузере через Web Speech API — доступная, бесплатная и конфиденциальная технология озвучки текста. Несмотря на зависимость от системных голосов и некоторые ограничения браузеров, она решает множество задач: от доступности для слабовидящих до удобного потребления контента в дороге. Знание подводных камней — асинхронная загрузка голосов, обрыв длинных фраз, ограничения автовоспроизведения — помогает строить надёжные интерфейсы. Воспользуйтесь инструментом text-to-speech, чтобы озвучить свой следующий текст — и оценить, насколько удобнее воспринимать материал на слух.

Попробуйте эти инструменты

Похожие статьи