Телеграм: @camouf_ru Почта: mihail@bazarow.ru Заказать разработку проекта

Cordova, ввод в input под диктовку. Голосовой поиск в мобильном приложении.

Итак, задачка: реализовать голосовой поиск в мобильном приложении на Cordova. По сути, нам нужно захватить речь с микрофона устройства и, передать текст в input.

Распознование речи в мобильном приложении

Для этого будем использовать плагин cordova-plugin-speechrecognition. Он требует интернет подключения, поэтому лучше всего использовать в связке с плагином cordova-plugin-network-information

Что бы не усложнять статью, будем предполагать, что интернет на устройстве работает. Соединение нужно для связи с сервисами Apple и Google, по диктовке и голосовому вводу. Сервисы постоянно мониторят все "диктовки" и улучшаются, на базе машинного обучения.

Устанавливаем плагин в проект. Переходим в директорию проекта и выполняем:

cordova plugin add cordova-plugin-speechrecognition

В config.xml, в секцию ios, сразу добавляем:

<config-file parent="NSMicrophoneUsageDescription" target="*-Info.plist">
   <string>Для голосового ввода в окно поиска</string>
</config-file>
<config-file parent="NSSpeechRecognitionUsageDescription" target="*-Info.plist">
   <string>Для голосового ввода в окно поиска</string>
</config-file>

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

Использование плагина диктовки

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

<form method="post" action="search_page">
  <input id="speech_txt" type="text" value="">
  <button type="submit">Искать</button>
</form>
<button onclick="startRecognition()">Голосовой поиск</button>

Теперь, добавляем скрипт, который проверит доступность микрофона на устройстве и запросит разрешение на его использование. Не забываем обвернуть в функцию проверки готовности устройства deviceready.

window.plugins.speechRecognition.isRecognitionAvailable(function (available) {
        if (!available) {
            alert("Извините, микрофон не доступен");
        }
        window.plugins.speechRecognition.hasPermission(function (isGranted) {
            if (isGranted) {
               // Если доступ уже есть, был выдан ранее. 
               // Можно делать что угодно на js
            } else {
                window.plugins.speechRecognition.requestPermission(function () {
                   // Если доступа еще нет, он запросится сам
                   // но можете добавить что-то от себя, просто на js
                }, function (err) {
                });
            }
        }, function (err) {
        });
    }, function (err) {
    });

Теперь добавим функцию, которая запускается кликом по кнопке "Голосовой поиск" speechRecognition.startListening.

function startRecognition() {
            window.plugins.speechRecognition.startListening(function (result) {
                $('#speech_txt').val(result);
            }, function (err) {
                // console.error(err);
            }, {
                language: 'ru-RU', // Вкл рус языка
                matches: 1, // Вкл только одно совпадение
                showPopup: false, // Не показывать вспл окно
                showPartial: true, // подбор совпадений
            });
        }

Запускается прослушивание и обработка речи пользователя с заполнением преобразованной в текст, в input формы поиска. В result функции, просто наполняем value инпута с id speech_txt. Здесь же можете добавить любой js код и обработчкики. Сделать красивое оформление страницы. Например так:

Cordova, ввод в input под диктовку.

Особенности работы распознавания речи на ios и android

Android прекращает прослушивать вместе с остановкой диктовки. То есть, как только пользователь перестал говорить (есть некая пауза, определяющая конец речи).

IOs слушает без остановки, на ней, в целом, можно надиктовывать целые поэмы). Но для формы поиска это не актульно, поэтому под iOs есть событие speechRecognition.stopListening. Можете выполнять его по таймауту, после запуска прослушивания или ловить паузу в заполнении инпута текстом и запускать.

window.plugins.speechRecognition.stopListening(function () {
	// Любой js например алерт c "Больше не слушаю"
}, function (err) {
	// ошибка остановки диктовки. Любой js
});

На конец

На всякий напомню: если используете Cordova для работы с внешним бекендом, который открывается внутри нее. Не забудте использовать плагин cordova-plugin-remote-injection который пробрасывает API в Webview. Иначе ни один плагин не заработает.


Просмотров: 34 | Комментариев: 0

Комментарии

Внимание! все сообщения проходят премодерацию. Ваше сообщение появится после проверки
 
Текст сообщения*
Загрузить файл или картинкуПеретащить с помощью Drag'n'drop
Перетащите файлы
Ничего не найдено
Защита от автоматических сообщений
Загрузить файл
Нажимая кнопку "Отправить", Вы принимаете условия
Политики конфиденциальности и обработки персональных данных
Поделиться страницей Спасибо, это помогает развивать сайт.
Мой youtube канал. C 1-го сентября начнется выход видеокурса по разработке доски объявлений с мобильным приложением.
Перейти на канал Подписывайтесь и будьте в курсе:
Заметки разработчика

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

attention