В современном мире технологии распознавания и синтеза речи широко используются в Google, Apple и других крупных компаниях. Удобство сайтов, понимающих голосовые команды, например, «Перейти на главную», очевидно. Рассмотрим Web Speech API и Speech Synthesis API – экспериментальные, но перспективные JavaScript-технологии, реализующие подобный функционал.
Web Speech API: распознавание речи
Web Speech API определяет, что говорит пользователь. На данный момент поддерживается Opera и Google Chrome; поддержка в Mozilla, Safari, Internet Explorer и других браузерах отсутствует. Ссылки на документацию и примеры кода приведены в конце статьи.
Разбор кода распознавания
Код (ссылка в конце статьи), взятый из официальной документации, разбирается поэтапно:
- Создаётся объект SpeechRecognition для прослушивания речи.
- Устанавливаются опции: continuous (непрерывное распознавание) и lang (язык, например, «ru-RU»).
- Callback-функция обрабатывает результаты, выводя промежуточные (отдельные слова) в консоль, а окончательный результат – во всплывающем окне.
- recognition.start() запускает прослушивание микрофона.
Важно: Для работы Web Speech API необходим доступ к микрофону. При локальном запуске страницы может потребоваться запуск на сервере для корректной работы API.
Пример на демонстрационном сайте (ссылка в конце статьи) показывает процесс распознавания: после разрешения доступа к микрофону, программа выводит промежуточные и финальные результаты в консоль и всплывающее окно соответственно.
Запуск распознавания по кнопке
Для удобства добавим кнопку «Слушать», запускающую распознавание при нажатии:
<button onclick="speech()">Слушать</button>
<script>
function speech() {
// Код распознавания из предыдущего примера
}
</script>
Теперь распознавание запускается только по нажатию кнопки.
Speech Synthesis API: синтез речи
Speech Synthesis API проговаривает текст. Документация доступна по ссылке (в конце статьи). Для воспроизведения текста достаточно одной строки кода, но для русского языка следует учитывать особенности: API может проговаривать буквы по отдельности, а не слова.
let synth = window.speechSynthesis;
let utterThis = new SpeechSynthesisUtterance('Java Script');
synth.speak(utterThis);
Управление синтезом речи с помощью кнопок
Аналогично распознаванию, добавим кнопки «Проговорить» и «Остановить»:
<button onclick="talk()">Проговорить</button>
<button onclick="stop()">Остановить</button>
talk() запускает, а stop() останавливает синтез речи (учитывая особенности работы с SpeechSynthesisUtterance, см. документацию).
Обратите внимание: при длинном тексте единственный способ прерывания – закрытие браузера. Документация описывает методы управления воспроизведением, например, паузу.
Web Speech API и Speech Synthesis API – мощные инструменты для добавления голосового взаимодействия на веб-сайты. Несмотря на экспериментальный статус и ограничения в поддержке браузерами, они позволяют создавать интересные приложения. Изучение документации поможет раскрыть потенциал этих API.
Ссылки:
- [Ссылка на документацию Web Speech API]
- [Ссылка на пример кода Web Speech API]
- [Ссылка на документацию Speech Synthesis API]
- [Ссылка на пример кода Speech Synthesis API]