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

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

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

Итак, задачка: реализовать голосовой поиск в мобильном приложении на 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-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Автоматическая загрузка каталогов из csv файлов в Битрикс Просмотров: 11797 Если требуется настроить автоматический импорт каталогов из csv файлов, от поставщиков. В... Снять ограничение на количество символов в комментарии к заказу магаз... Просмотров: 12606 Как многим известно, в интернет-магазине на Битрикс имеется ограничение на количество симв... Удалить товары из корзины, если есть определенные товары. Просмотров: 1915 Задача: если в корзину добавлены товары с определенным свойством, нужно удалить из корзины... Подключение мобильной версии шаблона Битрикс сайта, с автопереключени... Просмотров: 43365 Предпочитаю, что бы сайт не грузил кучу скриптов и стилей. При загрузке адаптивного шаблон... Фиксированная корзина с обновлением, без перезагрузки страницы. Просмотров: 18455 Иногда нужно сделать так, чтобы корзина в интернет магазине, созданном на Битрикс, была по... Вывести все товары, с постраничной навигацией, из всех разделов инфоб... Просмотров: 29885 По сути, эта заметка, небольшой лайфхак. Достаточно часто нужно, в корне каталога, в ТОП-е... INPUT type="file" Предпросмотр превью картинки до загрузки Просмотров: 12922 Рассмотрим на примере компонента "Форма добавления-редактирования элементов инфоблока", ка... Фотогалерея на базе компонента новостей, с fancybox. Просмотров: 2906 Это заметка обновление к очень старой, уже имеющейся на сайте. Сделаем что-то типа фотогал... Индивидуальные цены в 1С-Битрикс: в каталоге и при оформлении заказа Просмотров: 6057 В этой заметке постараюсь описать процесс реализации индивидуальных цен, для пользователей... Вывести разделы инфоблока по первым буквам не меняя структуру каталог... Просмотров: 2503 Например: у нас есть инфоблок с большим количеством разделов. И мы хотим, на сайте разбить... Дать пользователю возможность быстро отредактировать материал Просмотров: 4945 На одном из разрабатываемых сайтов, пользователи формирую его контент. После регистрации, ... Получение местоположений через API Битрикс c поиском по select. Просмотров: 23194 Если нужно получить список городов из модуля "Местоположения" можно воспользоваться API Би... Заполнить свойство инфоблока ценой из торгового каталога Просмотров: 5090 Если вам по какой-то причине нужно скопировать цену товара в свойство этого же инфоблока. ... Автоматически отгрузить заказ и сменить статус отгрузки, при выполнен... Просмотров: 951 Проблема: Заказы, на сайте, обрабатываются только в 1С. При этом 1С не работает с отгрузка... Рассылка новинок каталога в автоматическом режиме Просмотров: 1868 Что бы реализовать рассылку новинок каталога на email-ы пользователей, можно воспользовать... Fancybox в стандартном шаблоне детальной карточки товара, вместо вспл... Просмотров: 105 Задача: заменить работу с изображениями в стандартном или кастомном шаблоне детальной карт... Отфильтровать новости в Битрикс за заданный период Просмотров: 16692 Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компо... Вывести разделы инфоблока в которых находится элемент Битрикс Просмотров: 17017 Если нужно в карточке товара или новости, вывести структуру разделов в котором находится э... Прятать или показывать описание раздела каталога Просмотров: 1046 В новых компонентах и шаблонах catalog.section есть не документированный и не выводимый па... Запретить изменения описаний товаров при выгрузке из 1С УТ на сайт Просмотров: 18107 При разработке сайтов на Битрикс, с интеграцией с 1С Управление Тороговлей, нужно запретит...