Новый JavaScript Web Speech API упрощает добавление распознавания речи на ваши веб-страницы. Этот API обеспечивает точный контроль и гибкость в работе функций распознавания речи в Chrome версии 25 и более поздних. Вот пример, где распознанный текст появляется практически мгновенно во время произнесения.
Давайте заглянем под капот. Сначала мы проверяем, поддерживает ли браузер Web Speech API, проверяя, существует ли объект webkitSpeechRecognition . Если нет, мы предлагаем пользователю обновить браузер. (Поскольку API все еще экспериментальный, в настоящее время он имеет префикс поставщика.) Наконец, мы создаем объект webkitSpeechRecognition , который предоставляет интерфейс распознавания речи, и устанавливаем некоторые его атрибуты и обработчики событий.
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
...
Значение по умолчанию для continuous — false, это означает, что когда пользователь перестаёт говорить, распознавание речи прекращается. Этот режим отлично подходит для простого текста, например, для коротких полей ввода. В этой демонстрации мы установили значение true, чтобы распознавание продолжалось, даже если пользователь делает паузу во время речи.
Значение по умолчанию для interimResults — false, что означает, что распознаватель возвращает только окончательные результаты, которые не изменятся. В демонстрационном примере установлено значение true, поэтому мы получаем предварительные, промежуточные результаты, которые могут измениться. Внимательно посмотрите демонстрацию: серый текст — это промежуточные результаты, которые иногда меняются, а черный текст — это ответы распознавателя, помеченные как окончательные и не изменяющиеся.
Для начала пользователь нажимает на кнопку микрофона, что запускает следующий код:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Мы устанавливаем язык для распознавания речи в поле «lang» на значение BCP-47, выбранное пользователем из выпадающего списка, например, «en-US» для английского языка США. Если это значение не задано, по умолчанию используется язык корневого элемента и иерархии HTML-документа. Система распознавания речи Chrome поддерживает множество языков (см. таблицу « langs » в исходном коде демонстрации), а также некоторые языки с письмом справа налево, которые не включены в эту демонстрацию, такие как he-IL и ar-EG.
После установки языка мы вызываем recognition.start() для активации распознавателя речи. Как только он начинает захватывать аудио, он вызывает обработчик события onstart , а затем для каждого нового набора результатов вызывает обработчик события onresult .
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
Этот обработчик объединяет все полученные результаты в две строки: final_transcript и interim_transcript . Полученные строки могут содержать символ "\n", например, когда пользователь произносит "новый абзац", поэтому мы используем функцию linebreak для преобразования их в HTML-теги <br> или <p> . Наконец, он устанавливает эти строки в качестве innerHTML для соответствующих элементов <span> : final_span , который оформлен черным текстом, и interim_span , который оформлен серым текстом.
Переменная interim_transcript является локальной и полностью перестраивается каждый раз при вызове этого события, поскольку возможно, что все промежуточные результаты изменились с момента последнего события onresult . Мы могли бы сделать то же самое для final_transcript , просто начав цикл for с 0. Однако, поскольку окончательный текст никогда не меняется, мы сделали код здесь немного более эффективным, сделав final_transcript глобальной переменной, чтобы это событие могло начать цикл for с event.resultIndex и добавлять только новый окончательный текст.
Вот и всё! Остальная часть кода нужна лишь для того, чтобы всё выглядело красиво. Она поддерживает состояние, показывает пользователю информативные сообщения и меняет GIF-изображение на кнопке микрофона между статическим изображением микрофона, изображением с косой чертой микрофона и анимацией микрофона с пульсирующей красной точкой.
Изображение косой черты микрофона отображается при вызове recognition.start() , а затем заменяется на mic-animate при срабатывании onstart . Обычно это происходит настолько быстро, что косая черта незаметна, но при первом использовании распознавания речи Chrome должен запросить у пользователя разрешение на использование микрофона, в этом случае onstart срабатывает только тогда, когда и если пользователь даст разрешение. Страницы, размещенные по протоколу HTTPS, не нуждаются в повторном запросе разрешения, в отличие от страниц, размещенных по протоколу HTTP.
Поэтому оживите свои веб-страницы, позволив им прислушиваться к вашим пользователям!
Мы будем рады услышать ваши отзывы...
- Для комментариев к спецификации W3C Web Speech API: электронная почта , архив рассылки , группа сообщества.
- Для комментариев по реализации этой спецификации в Chrome: электронная почта , архив рассылки.
Ознакомьтесь с нашей политикой конфиденциальности в разделе « Понимание конфиденциальности в Chrome» (обновлено: 16 июня 2026 г.).