Голосове керування сайтом: 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.