Внедрение распознавания речи на веб-сайты и в браузерные приложения стало проще благодаря встроенным в браузер API для преобразования речи в текст (STT), таким как Web Speech API. Разработчики могут легко передавать поток данных с микрофона, анализировать аудиоданные и обрабатывать транскрипты с помощью вызовов API, не создавая локальный сервер для автоматического распознавания речи.

Web Speech API — это распространенный API для распознавания речи, предназначенный для реализации голосовых команд в JavaScript. Он предоставляет методы, аргументы и свойства, позволяющие выполнять транскрипцию в реальном времени прямо в веб-браузере. Однако разработчики могут обнаружить, что Web Speech API ограничен для сложных веб-клиентов.

Это руководство поможет вам настроить простое веб-приложение для распознавания речи на JavaScript с использованием Web Speech API, рассмотрит его ограничения и альтернативы для создания более надежных клиентов для транскрипции в реальном времени.

Резюме

Web Speech API — это встроенный в браузер API для преобразования речи в текст, который отправляет аудио с микрофона в облачный бэкенд-сервис для обработки.
Разработчики используют класс SpeechRecognition API для создания приложений с голосовыми командами на JavaScript.
При создании приложения для распознавания речи учитывайте конфиденциальность пользователей, уведомляя их о том, что идет запись звука.
Web Speech API имеет ряд ограничений, включая нестабильность транскрипции, зависимость от браузера и отсутствие понимания намерений.
ElevenLabs предлагает высокоточные API для преобразования речи в текст промышленного уровня, которые поддерживают потоковую передачу как на стороне клиента, так и на стороне сервера.

Как работает Web Speech API

Web Speech API предоставляет веб-разработчикам встроенную в браузер функцию распознавания речи без необходимости использования локального сервера. По сути, Web Speech API отправляет аудиопоток из вашего веб-браузера в облачный бэкенд-сервис для обработки, анализа и преобразования аудио в транскрипт. Поскольку для выполнения транскрипции используется движок бэкенда браузера, результаты могут различаться в зависимости от браузера.

Как правило, Web Speech API требует активного интернет-соединения для транскрибирования аудиопотоков, особенно если вы разрабатываете приложение для Chrome и Safari. Однако некоторые браузеры теперь поддерживают автономную транскрипцию. При автономной транскрипции браузер выступает в роли движка преобразования речи в текст, распознавая фонемы и превращая их в связный текст.

Независимо от используемого браузера, основы работы API остаются неизменными.

Вам не нужен API-ключ для выполнения запроса к API.
Web Speech API поддерживает как непрерывные, так и разовые высказывания.
Он возвращает как промежуточные, так и финальные транскрипты.

Однако, поскольку каждый браузер может реализовывать движок STT по-своему, точность и задержка могут варьироваться.

Чтобы использовать Web Speech API, вы инициализируете интерфейс SpeechRecognition в своем коде JavaScript. Затем вы получаете доступ к методам, атрибутам и обработчикам событий по мере написания кода. Вот некоторые из них, которые вы будете использовать для создания веб-клиента голосового поиска.

SpeechRecognition.continuous: если установлено значение true, позволяет движку распознавания обрабатывать непрерывный поток.
SpeechRecognition.lang: устанавливает язык аудио.
SpeechRecognition.interimResults: указывает движку возвращать промежуточные транскрипты.
SpeechRecognition.start(): запускает процесс распознавания речи.
SpeechRecognition.onresult: принимает обработчик событий, который API вызывает после завершения транскрибирования.

Web Speech API возвращает транскрипцию в виде массива строк. Когда движок STT возвращает транскрипт, будь то промежуточный или финальный, вы можете найти его в массиве результатов. Он может вернуть одну или несколько строк. Поэтому вам нужно перебрать строки результата, чтобы получить весь транскрибированный текст.

Примечание: если вы включили промежуточную транскрипцию, проверьте свойство isFinal, чтобы определить, является ли текст окончательным транскриптом.

Создание примера распознавания речи на JavaScript

В этом примере используется интерфейс SpeechRecognition JavaScript для создания веб-приложения для транскрипции в реальном времени. На скриншоте ниже показана готовая страница.

На странице примера кнопка «Начать прослушивание» запускает запись. Когда пользователь говорит, браузер отправляет аудио в движок STT, ожидает транскрипцию и отображает как промежуточный, так и финальный текст.

Пример также включает функцию голосовых команд, которая фиксирует определенные термины, указанные пользователем. Он сравнивает транскрипт со списком заранее определенных фраз в вашем коде, что отличается от подсказок по ключевым словам в API преобразования речи в текст.

Ниже приведены фрагменты кода, демонстрирующие ключевые части этого примера.

Настройка SpeechRecognition API и запрос доступа к микрофону

Чтобы использовать его в своем коде, сначала нужно создать экземпляр класса SpeechRecognition. Если вы используете старую версию Chrome или Safari, используйте webkitSpeechRecognition.

Затем создайте экземпляр SpeechRecognition и настройте режим потоковой передачи, поддержку промежуточной транскрипции и язык речи.

После этого можно начать транскрибирование, вызвав метод .start().

При первом запуске процесса распознавания речи браузер запросит у пользователя разрешение. Пользователь должен нажать «Разрешить», чтобы начать транскрибирование. В противном случае API вернет значение «not-allowed» в обработчике SpeechRecognitionErrorEvent.

Отображение транскриптов в реальном времени и финальных результатов

В этом примере мы отображаем транскрипт по мере того, как пользователь говорит в микрофон. Для этого мы добавляем функцию к событию onresult.

Промежуточные транскрипты не являются окончательными. Поэтому отображаемый текст может не совпадать с точно произнесенными словами. По мере того как движок STT получает больше контекста из последующих слов, он будет корректировать транскрипт и возвращать его в строке.

Вы также можете оформить промежуточный текст другим цветом, чтобы он выделялся на фоне финального транскрипта. Этот CSS делает именно это:

Добавление голосовых команд в JavaScript

Добавьте текстовое поле, куда пользователи будут вводить фразы для обнаружения, разделенные точкой с запятой. (Альтернативно, вы можете хранить фразы в JSON-файле и загружать их в свой код.)

Затем создайте функцию, которая сравнивает финальный транскрипт со списком фраз. При сопоставлении текста нормализуйте оба списка, приведя их к нижнему регистру. Это необходимо, так как пользователи могут писать слова с заглавной буквы, что может привести к несовпадению, даже если слова одинаковые. Например, «Hello World» и «hello world» должны давать совпадение, даже если одно из них написано с заглавной буквы.

Каждый раз, когда код получает транскрипт, он перебирает список фраз. Если есть совпадение, вы запускаете действие, например, запуск приложения или, в данном случае, отображение совпадающей фразы на отдельной панели.

Обработка поддержки браузеров, разрешений и ошибок распознавания

Web Speech API делает распознавание речи в JavaScript доступным, но не всегда работает без сбоев. Пользователи могут использовать браузер с ограниченной поддержкой или полным отсутствием поддержки SpeechRecognition API на бэкенде. В некоторых случаях сетевые проблемы могут привести к сбою транскрипции.

Поэтому ваш код должен обрабатывать эти условия и соответствующим образом уведомлять пользователей.

Например, вы можете порекомендовать пользователям использовать Chrome или Edge, где работа SpeechRecognition API подтверждена.

Тем временем, для обработки ошибок свяжите функцию обработки ошибок с обработчиком событий onerror и обработайте соответствующий код ошибки.

Например,

Код ошибки

Действие

not-allowed

Отобразите текст, предлагающий пользователю проверить настройки браузера.

no-speech

Попросите пользователя говорить ближе к микрофону

network

Попросите пользователя проверить интернет-соединение

aborted

Сообщите пользователю, что процесс распознавания речи был остановлен.

Сделайте распознавание голоса в JavaScript доступным и конфиденциальным

При интеграции Web Speech API помните о конфиденциальности. Всегда показывайте визуальный или звуковой индикатор перед тем, как веб-клиент начнет запись. Например, отображайте значок прослушивания в качестве визуального сигнала, пока код распознавания голоса JavaScript активно отправляет сигнал микрофона в движок преобразования речи в текст.

Еще одна область, на которую разработчикам следует обратить внимание, — это конфиденциальность данных. При транскрибировании с помощью API SpeechRecognition API по умолчанию выполняет транскрибирование онлайн. Даже если браузер поддерживает преобразование речи в текст в автономном режиме, API сначала попытается выполнить транскрибирование онлайн.

Эти технические спецификации имеют решающее значение при создании сервисов транскрибирования, где размещение данных, управление ими и соответствие требованиям строго регулируются.

Знайте, когда распознавания речи в браузере недостаточно для продакшена

Мы показали шаги по созданию автоматического распознавания речи для голосовых приложений на базе браузера с помощью Web Speech API. Этот API делает возможности преобразования речи в текст доступными для JavaScript-разработчиков. Однако ряд ограничений сужает варианты использования, особенно для коммерческих веб-продуктов.

Зависимость от браузера: транскрибирование сильно зависит от браузера пользователя. Разработчики не имеют контроля над конкретными голосовыми моделями, которые они используют, что приводит к нестабильному качеству транскрибирования.
Ограниченная поддержка языков: API поддерживает более 40 языков, но точное количество может варьироваться в зависимости от браузера.
Диаризация спикеров: вы не можете определить, кто говорит, и отразить отдельных спикеров в транскрипте.
Пользовательские словари: API SpeechRecognition не имеет надежной поддержки пользовательских словарей. Например, он не может точно транскрибировать «ElevenLabs». (Официальный API SpeechRecognition предоставляет интерфейс пользовательского словаря с использованием SpeechGrammarList, но современные браузеры часто игнорируют его.)
Точность: точность транскрибирования снижается, если говорящий находится в шумном окружении, имеет сильный акцент или находится далеко от микрофона.
Потоковая передача на стороне сервера: вы можете вести потоковую передачу только с микрофона, так как Web Speech API не поддерживает потоковую передачу на сервер или ручную загрузку аудиофайлов.

Если эти ограничения мешают вам коммерциализировать ваш продукт для распознавания голоса, мы рекомендуем использовать ElevenLabs Scribe v2 Realtime.

ElevenLabs Scribe v2 Realtime — это модель распознавания речи, которая обеспечивает высокоточное транскрибирование в реальном времени с задержкой менее 150 мс. Она поддерживает более 90 языков, согласованность независимо от браузера и пользовательские словари. С помощью ElevenLabs Scribe v2 Realtime вы можете запускать потоковую передачу на стороне клиента или сервера в соответствии с архитектурой вашего веб-приложения.

Учебное пособие по распознаванию голоса в JavaScript с использованием ElevenLabs Scribe v2 Realtime

Создание голосовой команды в JavaScript с помощью ElevenLabs следует аналогичному подходу. Однако вам нужно будет создать ключ API ElevenLabs для авторизации запросов API. Ниже приведены краткие шаги по созданию веб-клиента, который ведет потоковую передачу с микрофона.

Установите SDK ElevenLabs
Создайте одноразовый токен для передачи ключа API без его раскрытия
Настройте и подключитесь к модели Scribe v2 Realtime с нужными параметрами
Создайте обработчики событий для обработки транскриптов и обработки исключений

Для получения подробного руководства по Scribe v2 Realtime ознакомьтесь с нашей официальной документацией.

Начните работу с ElevenAPI для преобразования речи в текст в продакшене

ElevenAPI предоставляет модели преобразования речи в текст промышленного уровня для разработки веб-клиентов и серверов. Помимо распознавания речи в реальном времени, разработчики используют модели преобразования речи в текст ElevenAPI для обеспечения пакетного транскрибирования с диаризацией спикеров, временными метками на уровне слов и асинхронной обработкой.

Вместо постоянного опроса движка преобразования речи в текст вы можете создать вебхук на панели управления ElevenLabs и указать URL-адрес обратного вызова, куда API будет доставлять готовый транскрипт.

Независимо от того, хотите ли вы создать веб-клиент или серверное приложение с автоматическим распознаванием речи, ElevenAPI предлагает аудиомодели, которые вы можете легко интегрировать в свой код.

Получите свой ключ API ElevenLabs и изучите документацию API, чтобы начать разработку.