Телеграм: @camouf_ru Почта: mihail@bazarow.ru

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

Просмотров: 1263

Итак, задачка: реализовать голосовой поиск в мобильном приложении на 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. Иначе ни один плагин не заработает.

Написать первый комментарий:

Перетащите файлы
Ничего не найдено
Защита от автоматических сообщений
Нажимая кнопку "Отправить" вы соглашаетесь
с политикой конфиденциальности и обработки персональных данных.

Записная книжка разработчика

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

Создание скидки на общую сумму покупки в Битрикс корзине Просмотров: 26960 Функционал интернет-магазина, работающего под управлением 1С Битрикс, позволяет задавать м... Установка вебсервера на Apple M1 (нативный ARM стек), оптимизированны... Просмотров: 6143 Появилась задачка, установить стек MAMP (macOS, Apache, MYSQL, PHP) на рабочий ноутбук с п... Получить все товары из всех заказов пользователя. История купленных т... Просмотров: 1374 Задача: нужно создать раздел, в персональном разделе пользователя, с историей всех купленн... Данные о текущем разделе каталога вывести в section.php Просмотров: 3115 Если нужно получить какие-то данные о текущем разделе, которых нет в изначальном массиве, ... Ссылка и название раздела в списке новостей Битрикс Просмотров: 10517 Если нужно вывести название раздела инфоблока в котором находится конкретный элемент/новос... Вывод даты создания элемента в правильном формате в Битрикс Просмотров: 21668 Если нужно вывести дату создания новости, статьи или товара в каталоге, в принципе любого ... Дополнительные параметры в меню Битрикс Просмотров: 19336 Иногда нужно присвоить какой-то функционал к конкретному пункту меню в битрикс. Например о... AJAX корзина с отправкой количества из раздела каталога Просмотров: 19125 Столкнулся с задачкой: нужно было на одном сайте реализовать интерактивный прайс лист. При... Как работает система сертификации партнеров 1С-Битрикс, уровни партне... Просмотров: 3514 Сертификация от «1С-Битрикс» – это объективная оценка знаний и практических навыков разраб... Прятать или показывать описание раздела каталога Просмотров: 598 В новых компонентах и шаблонах catalog.section есть не документированный и не выводимый па... Цвета торговых предложений из Highload инфоблоков в списке товаров Просмотров: 14086 Подвернулся на доработку очень старый сайт, работал еще на 11-ой версии Битрикс. Выполнили... Вывести свойство привязка к Яндекс Картам в Битрикс Просмотров: 18184 Часто бывает нужно вывести свойство привязка к Яндекс карте в детальном описании элемента... Получение доступа к железу устройства из Битрикс мобильное приложение Просмотров: 5604 Документация к мобильному приложению 1С-Битрикс очень куцая. В основном описывает функцион... Валидация пароля и подтверждения при регистрации в битрикс Просмотров: 14265 Встала задачка сделать валидацию пароля и его подтверждения в стандартной форме регистраци... Спойлер в списке новостей Битрикс Просмотров: 11287 Иногда нужно сделать спойлеры в копонентах Битрикс, в основном конечно, имеет смысл при оч... Сортировать товары по названию, цене и дате поступления в каталоге Би... Просмотров: 39398 Достаточно часто заказчик просит вывести сортировку по цене, новым поступлениям и названию... Вывести компонент новостей на страницу в Битрикс Просмотров: 63592 Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, ч... Очистить брошенные корзины с помощью API 1С-Битрикс Просмотров: 367 Задача: в интернет-магазине накапливается большое количество брошенных корзин, нужно их оч... Старые шаблоны битрикс для простой верстки Просмотров: 16916 Новые версии типового интернет-магазина, который идет в комплекте с Битрикс (от 12 версии ... Показать только один тип цены в каталоге Битрикс Просмотров: 13743 Достаточно часто, при создании сайта на битрикс, можно столкнуться с такой проблемой: на с...