Распознавание речи управляется объектом SpeechRecognition. Для его получения применяется свойство
webkitSpeechRecognition глобального объекта window
, через которое мы можем проверить поддержку распознавания текущим браузером:
if(window.webkitSpeechRecognition) { console.log("Распознавание речи поддерживается"); } else { console.log("Распознавание речи НЕ поддерживается"); } // Альтернативный способ проверки if("webkitSpeechRecognition" in window) { console.log("Распознавание речи поддерживается"); } else { console.log("Распознавание речи НЕ поддерживается"); }
Префикс webkit
в название свойства намекает, что это свойство поддерживается только в браузерах на движке WebKit. Соответственно
в реальности в браузерах на движке WebKit распознавание будет осуществляться с помощью объекта webkitSpeechRecognition, а не SpeechRecognition.
Интерфейс SpeechRecognition предоставляет ряд свойств для настройки распознавания:
grammars: возвращает и устанавливает коллекцию объектов SpeechGrammar, которые представляют используемые грамматики
lang: возвращает и устанавливает язык распознавания. Если не указано, по умолчанию используется значение атрибута lang
корневого элемента
<html>
continious: определяет, возвращаются ли непрерывные результаты для каждого распознавания (значение true) или только один результат (значение false). По умолчанию возвращается только один результат
interimResults: определяет, следует ли возвращать промежуточные результаты (true) или нет (false). Промежуточные результаты — это результаты, которые еще не являются окончательными (например, свойство SpeechRecognitionResult.isFinal имеет значение false).
maxAlternatives: устанавливает максимальное количество вариантов распознавания, предоставляемых для каждого результата. Значение по умолчанию — 1.
Для управления распознаванием для SpeechRecognition
определено три метода:
abort(): прерывает распознавание, не позволяя службе распознавания прослушивать входящий звук и не пытаясь вернуть SpeechRecognitionResult
start(): запускает распознавание.
stop(): останавливает распознавание, не позволяет службе распознавания речи прослушивать входящий звук и пытается вернуть SpeechRecognitionResult, используя записанный на данный момент звук
После запуска распознавания речи методом start()
в процессе распознавания могут возникать различные события:
audiostart: запускается, когда начался захват звука. Доступно через свойство onaudiostart
audioend: запускается, когда завершен захват звука. Доступно через свойство onaudioend
end: запускается после отключения службы распознавания. Доступно через свойство onend
error: запускается при возникновении ошибки. Доступно через свойство onerror
nomatch: запускается, когда служба распознавания возвращает финальный результат при неудачном распознавании (степень распознавания не отвечает заданному порогу). Доступно через свойство onnomatch
result: запускается, когда служба распознавания возвращает результат — слово или фразу. Доступно через свойство onresult
soundstart: запускается, когда был обнаружен звук (вне зависимости речь или случайный шум). Доступно через свойство onsoundstart
soundend: запускается после завершения обнаружения звука. Доступно через свойство onsoundend
speechstart: запускается, когда служба распознавания обнаружила речь начала распознавать звук. Доступно через свойство onspeechstart
speechend: запускается, когда служба распознавания завершила обнаружение речи. Доступно через свойство onspeechend
start: запускается, когда служба распознавания начала прослушивать звук. Доступно через свойство onstart
чтобы получить доступ к результату распознавания речи, регистрируется обработчик события result:
const recognition = new webkitSpeechRecognition(); recognition.onresult = function(event){ const results = event.results; // получаем результат распознавания console.log(results); // список SpeechRecognitionResultList }
Параметр функции-обработчика представляет тип SpeechRecognitionEvent, у которого через свойство results можно
получить результаты распознавания в виде списка SpeechRecognitionResultList
. Каждая запись в этом списке представляет объект
SpeechRecognitionResult и содержит один или несколько вариантов распознавания речи (объектов SpeechRecognitionAlternative) на случай, если распознавание речи было неоднозначным.
const recognition = new webkitSpeechRecognition(); recognition.onresult = function(event){ const results = event.results; // получаем список результатов const firstResult = results[0]; // получаем первый распознанный результат const firstAlternative = firstResult[0]; // получаем первый вариант распознавания }
Каждая альтернатива (объект SpeechRecognitionAlternative), в свою очередь, имеет два свойства: transcript
(содержит распознанный текст) и
confidence
(уровень уверенности в диапазоне от 0 до 1). Самая первая альтернатива представляет собой результат с наибольшей вероятностью
const recognition = new webkitSpeechRecognition(); recognition.onresult = function(event){ const results = event.results; // получаем список результатов const firstResult = results[0]; // получаем первый распознанный результат const firstAlternative = firstResult[0]; // получаем первый вариант распознавания const transcript = firstAlternative.transcript; // распознанный текст const confidence = firstAlternative.confidence; // уровень уверенности console.log(transcript); console.log(confidence); }
Для демонстрации распознавания определим следующую веб-страницу:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <button id="startBtn">Start</button> <button id="stopBtn">Stop</button> <script> const recognition = new webkitSpeechRecognition(); let index = 0; recognition.onresult = function(event){ const results = event.results; // получаем список результатов const firstResult = results[index++]; // получаем распознанный результат const firstAlternative = firstResult[0]; // получаем первый вариант распознавания const transcript = firstAlternative.transcript; // распознанный текст const confidence = firstAlternative.confidence; // уровень уверенности console.log(transcript); console.log(confidence); } // по нажатию на кнопку Start запускаем распознавание document.getElementById("startBtn").addEventListener("click", ()=>{ if(window.webkitSpeechRecognition) { recognition.continuous = true; recognition.lang = "ru"; // распознавание речи на русском языке recognition.start(); // начинаем распознавание } else { console.log("Распознавание речи НЕ поддерживается"); } }); // по нажатию на кнопку Stop останавливаем распознавание document.getElementById("stopBtn").addEventListener("click", ()=>{recognition.stop(); index=0;}) </script> </body> </html>
В данном случае по нажатию на кнопку Start запускаем распознавание речи на русском языке. Результаты распознавания выводятся на консоль. При нажатии на кнопку Stop останавливаем распознавание.
Для получения результата определяем переменную index. При каждом срабатывании события result
в список распознаваний будет добавляться новый результат распознавания. И, инкрементируя переменную
index, мы сможем при последующем срабатывании события result получить распознанный результат по этому индексу.
Стоит отметить, что при запуске распознавания браузер предложит пользователю дать разрешения на использование микрофона:
Соответственно если пользователь хочет использовать распознавание речи, то он должен разрешить браузеру доступ к микрофону.