Веб-приложения с голосовым управлением: введение в API веб-речи

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

Демонстрация API веб-речи

ДЕМО / ИСТОЧНИК

Давайте заглянем под капот. Сначала мы проверяем, поддерживает ли браузер 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.

Так что оживите свои веб-страницы, предоставив им возможность слушать ваших пользователей!

Мы будем рады услышать ваши отзывы...

Обратитесь к техническому документу по конфиденциальности Chrome , чтобы узнать, как Google обрабатывает голосовые данные из этого API.