Вы можете реализовать для какой-то статьи, которая озвучивает текст на вашем сайте, используя JavaScript и Web Speech API. Это API встроено в большинство современных браузеров и позволяет синтезировать речь на основе текстовых данных. Вот простой пример того, как это можно сделать:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Озвучивание текста</title>
</head>
<body>
<p id="text">Внимание! Здесь должен быть размещён текст с возможностью его озвучки.</p>
<button onclick="speakText()">Озвучить этот текст</button> <button onclick="stopSpeech()">Остановить озвучивание</button>
<script>
// Глобальная переменная для синтеза речи
let speechSynthesis = window.speechSynthesis;
let utterance;
function speakText() {
// Получаем текст из элемента с id "text"
let text = document.getElementById("text").innerText;
// Создаем объект для синтеза речи
utterance = new SpeechSynthesisUtterance(text);
// Устанавливаем параметры голоса и языка
utterance.voice = speechSynthesis.getVoices().find(voice => voice.lang === "ru-RU" && voice.name.includes("Female"));
utterance.lang = "ru-RU";
// Устанавливаем дополнительные параметры (опционально)
utterance.pitch = 1; // Высота голоса
utterance.rate = 2; // Скорость речи
// Запускаем озвучивание текста
speechSynthesis.speak(utterance);
}
function stopSpeech() {
// Останавливаем синтез речи
if (speechSynthesis.speaking) {
speechSynthesis.cancel();
}
}
</script>
</body>
</html>
Пояснение
Получение текста: Мы получаем текст, который нужно озвучить, из элемента на странице (например, параграфа с id "text").
Создание объекта для синтеза речи: Используем SpeechSynthesisUtterance для создания объекта речи, который будет озвучен.
Настройка голоса и языка: Мы находим и устанавливаем женский голос для русского языка. Важно заметить, что выбор конкретного голоса может зависеть от браузера и операционной системы.
Дополнительные параметры: Высота (pitch) и скорость (rate) речи могут быть настроены по желанию.
Запуск озвучивания: Метод speak начинает процесс озвучивания текста.
Важно:
Эта функция работает в современных браузерах, поддерживающих Web Speech API, таких как Google Chrome, Bing от MicroSoft и Yandex.Browser.
Если нужный голос не будет найден, может использоваться любой доступный голос по умолчанию.
Если вы хотите сделать этот функционал более сложным, например, с поддержкой других языков или мужского голоса, это можно сделать, добавив дополнительные проверки и параметры.