Синтез речи в браузере: возможно ли это в HTML-файле?

Да, это абсолютно реально. В современном веб-приложении, состоящем из одного HTML-файла, можно реализовать чтение текста книг вслух без единой сторонней библиотеки.

Краткая статья

В основе лежит Web Speech API — нативный интерфейс браузера, который включает в себя SpeechSynthesis (синтез речи). Это значит, что весь процесс происходит на стороне клиента: не нужно подключать внешние сервисы, платить за API или отправлять данные на сервер.

Основные преимущества этого подхода:

· Кроссплатформенность: работает в Chrome, Edge, Firefox и Safari.

· Приватность: текст книги не покидает устройство пользователя.

· Простота: достаточно нескольких строк JavaScript, чтобы «оживить» текст.

Главный нюанс — качество и доступность голосов зависят от браузера и операционной системы. Например, Chrome и Edge обычно имеют широкий набор голосов, включая русский («Google русский»), тогда как в некоторых других браузерах могут быть только системные голоса. Тем не менее, для базового чтения книг этого вполне достаточно.

Пример кода

Вот минимальный рабочий пример, который можно сохранить как .html-файл и открыть в браузере:

```html

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Чтение текста вслух</title>

</head>

<body>

<h2>Синтез речи</h2>

<textarea id="text" rows="5" cols="50">Привет! Это пример синтеза речи прямо в браузере.</textarea>

<br><br>

<button onclick="speak()">Читать</button>

<button onclick="stop()">Стоп</button>

<script>

function speak() {

const text = document.getElementById('text').value;

if (!window.speechSynthesis) {

alert('Ваш браузер не поддерживает синтез речи.');

return;

}

const utterance = new SpeechSynthesisUtterance(text);

utterance.lang = 'ru-RU'; // Устанавливаем русский язык

utterance.rate = 1.0; // Скорость (0.5 - 2)

utterance.pitch = 1.0; // Тон (0 - 2)

window.speechSynthesis.speak(utterance);

}

function stop() {

window.speechSynthesis.cancel();

}

</script>

</body>

</html>

```

Этот код создаёт простое поле для ввода текста и две кнопки. При нажатии на «Читать» браузер озвучит введённый текст.