Новый API JavaScript Web Speech позволяет легко добавить распознавание речи на ваши веб-страницы. Этот API обеспечивает точный контроль и гибкость возможностей распознавания речи в Chrome версии 25 и более поздних версиях. Вот пример, когда распознанный текст появляется почти сразу во время разговора.
Давайте заглянем под капот. Сначала мы проверяем, поддерживает ли браузер 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> . Наконец, он устанавливает эти строки в качестве внутреннего HTML соответствующих им элементов <span> : final_span , оформленный черным текстом, и interim_span , оформленный серым текстом.
interim_transcript — это локальная переменная, которая полностью перестраивается каждый раз, когда вызывается это событие, поскольку возможно, что все промежуточные результаты изменились с момента последнего события onresult . Мы могли бы сделать то же самое для final_transcript просто начав цикл for с 0. Однако, поскольку конечный текст никогда не меняется, мы сделали код немного более эффективным, сделав final_transcript глобальным, чтобы это событие могло запускать цикл for. в event.resultIndex и добавляйте только новый окончательный текст.
Вот и все! Остальная часть кода предназначена только для того, чтобы все выглядело красиво. Он поддерживает состояние, показывает пользователю некоторые информационные сообщения и меняет изображение GIF на кнопке микрофона между статическим микрофоном, изображением косой черты микрофона и анимацией микрофона с пульсирующей красной точкой.
Изображение микрофона-косой черты отображается при вызове recognition.start() , а затем заменяется на микрофон-анимация при запуске onstart . Обычно это происходит так быстро, что косая черта не заметна, но при первом использовании распознавания речи Chrome должен запросить у пользователя разрешение на использование микрофона, и в этом случае onstart срабатывает только тогда и если пользователь дает разрешение. Страницам, размещенным по протоколу HTTPS, не нужно повторно запрашивать разрешение, в отличие от страниц, размещенных по протоколу HTTP.
Так что оживите свои веб-страницы, предоставив им возможность слушать ваших пользователей!
Мы будем рады услышать ваши отзывы...
- Для комментариев по спецификации W3C Web Speech API: электронная почта , архив рассылки , группа сообщества.
- Комментарии к реализации этой спецификации в Chrome: электронная почта , архив рассылки.
Обратитесь к техническому документу по конфиденциальности Chrome , чтобы узнать, как Google обрабатывает голосовые данные из этого API.