Современные веб-технологии сделали огромный шаг вперёд за последние годы, значительно упростив разработку интерактивных инструментов, которые раньше были доступны только профессиональным разработчикам. Одной из таких технологий является Text-to-Speech (TTS), позволяющая браузеру «говорить» с пользователем. Сегодня я хочу подробно рассказать о том, как создать собственный интерактивный инструмент для чтения текста вслух с подсветкой предложений на JavaScript и HTML/CSS.
🎯 Что такое Text-to-Speech в браузере?
TTS (Text-to-Speech) — это технология, благодаря которой текст преобразуется в устную речь. В браузерах эту функцию обеспечивает встроенный API под названием SpeechSynthesis.
Эта технология открывает широкие возможности для:
- 📚 Обучающих инструментов
- 👨🦯 Поддержки людей с ограниченными возможностями
- 🎧 Голосовых помощников и приложений для чтения новостей
🛠️ Технические детали реализации
Создание простого TTS-ридера в браузере состоит из трёх основных частей:
1️⃣ Подключение API SpeechSynthesis
JavaScript предоставляет простой и понятный интерфейс:
const message = new SpeechSynthesisUtterance("Привет, мир!");
window.speechSynthesis.speak(message);
2️⃣ Настройка голоса и параметров
Можно выбрать голос, установить скорость и высоту голоса:
const utterance = new SpeechSynthesisUtterance("Проверка голоса");
const voices = window.speechSynthesis.getVoices();
utterance.voice = voices.find(v => v.lang === 'ru-RU');
utterance.rate = 1; // нормальная скорость
utterance.pitch = 1; // нормальная высота
window.speechSynthesis.speak(utterance);
3️⃣ Динамическая подсветка предложений
Для подсветки текущего читаемого предложения используется CSS и JavaScript:
<p>
<span class="sentence">Первое предложение.</span>
<span class="sentence">Второе предложение.</span>
</p>
.sentence.active {
background-color: #ffeb3b;
font-weight: bold;
}
function highlightSentence(index) {
document.querySelectorAll('.sentence').forEach((el, i) => {
el.classList.toggle('active', i === index);
});
}
🚀 Реальный проект: интерактивный читатель с TTS и подсветкой
Чтобы создать полноценный интерактивный инструмент, объединим всё вышеперечисленное и добавим управление воспроизведением.
📄 HTML-структура интерфейса
HTML-код создаёт базовый интерфейс для управления воспроизведением и отображения текста:
<div class="toolbar">
<button id="play">▶️ Воспроизвести</button>
<button id="pause" disabled>⏸️ Пауза</button>
<button id="resume" disabled>⏯️ Продолжить</button>
<button id="stop" disabled>⏹️ Стоп</button>
<select id="voices"></select>
</div>
<div class="reader">
<span class="sentence">Изучение JavaScript – это увлекательный процесс.</span>
<span class="sentence">С каждым днём вы узнаёте что-то новое.</span>
<span class="sentence">Создание интерактивных веб-приложений стало доступнее.</span>
</div>
🎨 Оформление интерфейса (CSS)
Стили помогут визуально выделить активные предложения и сделать интерфейс приятным:
body {
font-family: sans-serif;
padding: 2rem;
}
.toolbar button {
padding: 0.5rem 1rem;
margin-right: 5px;
}
.sentence {
display: block;
margin-bottom: 10px;
}
.sentence.active {
background-color: #ffeb3b;
font-weight: bold;
}
💡 JavaScript-логика работы приложения
Важнейшая часть — обработка событий, воспроизведение и подсветка предложений:
const sentences = document.querySelectorAll('.sentence');
const playBtn = document.getElementById('play');
const pauseBtn = document.getElementById('pause');
const resumeBtn = document.getElementById('resume');
const stopBtn = document.getElementById('stop');
const voiceSelect = document.getElementById('voices');
let synth = window.speechSynthesis;
let voices = [];
let currentSentence = 0;
let utterance;
function populateVoices() {
voices = synth.getVoices();
voiceSelect.innerHTML = voices
.map((voice, i) => `<option value="${i}">${voice.name}</option>`)
.join('');
}
populateVoices();
synth.onvoiceschanged = populateVoices;
function highlight(index) {
sentences.forEach((sentence, i) => {
sentence.classList.toggle('active', i === index);
});
}
function speak(index) {
if (index >= sentences.length) {
resetControls();
return;
}
const text = sentences[index].textContent;
utterance = new SpeechSynthesisUtterance(text);
utterance.voice = voices[voiceSelect.value];
utterance.onstart = () => highlight(index);
utterance.onend = () => speak(index + 1);
synth.speak(utterance);
currentSentence = index;
updateControls('playing');
}
function updateControls(state) {
playBtn.disabled = state === 'playing';
pauseBtn.disabled = state !== 'playing';
resumeBtn.disabled = state !== 'paused';
stopBtn.disabled = state === 'stopped';
}
function resetControls() {
updateControls('stopped');
highlight(-1);
}
playBtn.onclick = () => speak(0);
pauseBtn.onclick = () => { synth.pause(); updateControls('paused'); };
resumeBtn.onclick = () => { synth.resume(); updateControls('playing'); };
stopBtn.onclick = () => { synth.cancel(); resetControls(); };
🧠 Личное мнение: почему это важно?
Создание таких инструментов важно не только с точки зрения обучения, но и доступности технологий. TTS с подсветкой предложений делает контент доступным для большего числа людей:
- 📖 Улучшает понимание текстов и их восприятие.
- ♿️ Облегчает доступ к информации людям с ограниченными возможностями.
- 🚀 Способствует созданию интерактивных и образовательных платформ.
Кроме того, JavaScript и современные браузеры делают реализацию подобных инструментов максимально простой и доступной каждому разработчику.
🌟 Идеи для дальнейшего развития:
Вы можете расширить проект, добавив:
- 💾 Сохранение прогресса в localStorage.
- 📊 Визуализацию прогресса чтения.
- 📥 Загрузку текстов из внешних источников.
🔗 Полезные ссылки и источники:
Создание интерактивных инструментов становится доступнее с каждым днём — и именно в этом огромная сила современных веб-технологий!