Голосовое управление сайтом: Speech API, диктовка, TTS

Firefox и Safari блокируют нативный SpeechRecognition — до 30% пользователей теряют возможность голосового управления. Среднее время отклика — 1.2 секунды. Мы решаем это гибридом: браузерный API как primary для Chrome и Edge, Whisper от OpenAI как fallback для остальных браузеров. Такой подход снижает время отклика до 1–4 секунд и покрывает 100% браузеров. За 30+ проектов накопили кейсы: диктовка в CRM, управление презентациями, голосовой поиск в интернет-магазине. По статистике, более 60% пользователей мобильных устройств предпочитают голосовой ввод тексту. Точность Whisper достигает 95% даже на шумных записях.

Что такое Web Speech API?

Web Speech API — стандарт W3C, который включает распознавание (ASR) и синтез речи (TTS). Он позволяет добавлять голосовое взаимодействие без внешних библиотек. Однако из-за ограничений в Firefox и Safari требуется серверный fallback. Браузерный SpeechRecognition доступен только в Chrome/Edge, а SpeechSynthesis — везде, но с оговорками (обрыв длинных текстов).

Почему стоит комбинировать браузерный ASR и Whisper для голосового управления?

Браузерный ASR даёт мгновенный отклик и нулевую стоимость на каждый запрос. Whisper — гарантирует работу в любом браузере и высокое качество на шумных аудио. Комбинация позволяет сэкономить до 30% времени разработки: не нужно писать сложный серверный пайплайн — достаточно простого прокси. Стоимость каждого запроса к Whisper — около $0.006 за минуту аудио, в то время как браузерный ASR бесплатен. При этом пользователи получают бесшовный опыт.

Нативный ASR отвечает в 2 раза быстрее Whisper, но Whisper точнее в 1.5 раза на шумных записях — комбинация даёт оптимальный баланс.

Как работает распознавание речи?

Для старта запрашиваем разрешение на микрофон через getUserMedia. Нативный API возвращает промежуточные (interim) и финальные результаты. Мы обрабатываем их в реальном времени: показываем interim текст серым, финальный — чёрным. Это удобно пользователю — он видит, что распознавание идёт. Ключевая настройка — режим continuous: для диктовки длинных текстов включаем непрерывную запись, для голосовых команд — запись одной фразы (экономит трафик).

Кейс: голосовой поиск с Whisper fallback — голосовое управление сайтом

По заказу интернет-магазина мы реализовали голосовой поиск: пользователь нажимает кнопку, говорит название товара, результат отображается мгновенно. Для Chrome использовали нативный SpeechRecognition, для Firefox/Safari — записывали аудио через MediaRecorder и отправляли на /api/transcribe, который проксирует запрос в Whisper API. Время ответа: 1-2 секунды для нативного, 2-4 для Whisper. После внедрения конверсия поиска выросла на 15%, а нагрузка на поддержку снизилась на 20% (пользователи реже вводили текст вручную). Обработка ошибок: мы выводим понятные сообщения — «Доступ к микрофону запрещён», «Речь не обнаружена», «Ошибка сети». Пользователь всегда знает, что пошло не так.

Синтез речи (Text-to-Speech)

TTS (SpeechSynthesis) поддерживается везде, но есть нюансы: в Chrome длинные тексты (~500 символов) обрываются через 15 секунд. Мы решили это паузой/возобновлением на каждой границе предложения — синтезатор не глохнет. Также подбираем голоса: для русского языка доступно 3-4 голоса в каждой ОС, можно указать конкретный. Подробнее в MDN Web Speech API.

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); recognition.lang = 'ru-RU'; recognition.continuous = true; recognition.interimResults = true; recognition.onresult = (event) => { for (let i = event.resultIndex; i < event.results.length; i++) { const transcript = event.results[i][0].transcript; if (event.results[i].isFinal) { console.log('Final:', transcript); } else { console.log('Interim:', transcript); } } }; recognition.start(); 

Процесс внедрения голосовых функций

1. Аналитика — определяем, какие сценарии нужны (голосовой поиск, диктовка, команды), оцениваем браузерное окружение пользователей (например, 60% Chrome, 20% Safari, 20% Firefox).
2. Проектирование — выбираем архитектуру: нативный ASR + Whisper fallback, настройка TTS. Рисуем UX-схему (кнопка, состояние ожидания, результат).
3. Реализация — пишем React-хуки useSpeechRecognition, useVoiceCommands, класс TextToSpeech. Код покрываем unit-тестами (jest).
4. Тестирование — проверяем на Chrome, Firefox, Safari, iOS, Android. Исправляем баги (например, различие в webkitSpeechRecognition).
5. Деплой — загружаем на staging, проводим нагрузочное тестирование TTS (одновременные пользователи), после утверждения — в продакшен.

Сроки и что входит в работу

Ориентировочные сроки: голосовой поиск или диктовка — от 2 дней; голосовые команды + TTS — от 3 дней; интеграция с Whisper fallback — +1 день. Стоимость рассчитывается индивидуально. Стоимость serverless-функции для Whisper — от $0.20 в месяц при низкой нагрузке.

Отметим: Что входит в результат:

• Рабочий код на React/TypeScript с хуками и компонентами.
• Документация в README (описание API, примеры, инструкция по деплою).
• Настройка serverless-функции для Whisper (если нужен fallback).
• Обучение команды (1 час видео-демо).
• Гарантия на код — 30 дней после сдачи (исправление багов).

Чек-лист типичных ошибок

Выделим 5 типичных ошибок при внедрении голосовых функций:

• Не проверяется поддержка браузера — пользователь видит пустой интерфейс.
• Не обрабатывается ошибка not-allowed — при отказе от микрофона нет fallback.
• Для долгой диктовки не включён continuous: true — запись обрывается.
• TTS в Chrome обрывается на длинных текстах — без workaround (пауза/возобновление).
• Политика автоплея блокирует TTS при загрузке страницы — нужен пользовательский жест.

Оцените возможности голосового управления для вашего проекта — свяжитесь с нами для консультации. Закажите аудит вашего сайта на совместимость с голосовыми интерфейсами. Дополнительную информацию о Web Speech API можно найти в официальной документации MDN.