Создать голосовое управление UI

Мы видели много новых API в Интернете в Интернете за последние несколько лет, которые действительно включали веб-контент, чтобы иметь такую ​​же функциональность, поскольку многие приложения имели в течение некоторого времени. Относительно новая API - API распознавания речи, которые, как вы можете догадаться, позволяет использовать ваш текст в качестве ввода на страницу. Это требует, чтобы начать службу и снова остановиться.

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

Были прогнозы, которые на основе экрана интерфейсы могут начать исчезать в течение десяти лет. Сначала это может звучать как научная фантастика, но, как пользователи становятся все более удобными с речью в качестве входа через такие как Alexa и Siri, то стоит рассуждать, что это станет распространенным в качестве метода ввода. Учебник здесь приведет вас к скорости на входе речи, а затем использовать их, чтобы оставить отзывы о продукте на Сайт электронной коммерции Отказ

Загрузите файлы Для этого учебника.

• 8 советов для проектирования голосовых интерфейсов

01. Начните проект

Из папки «Файлы проекта» откройте папку «Пуск» в IDE вашего кода и откройте файл «RechT.HTML» для редактирования. Все CSS для проекта написан так, чтобы это не фокус речи API, поэтому добавьте ссылку, показанную здесь, чтобы получить шрифт NOOO Serif, и ссылка на файл CSS.

& lt; link rel = "stylesheeet" href = "CSS / style.css" & gt; 

02. Добавьте содержимое

Первые элементы этого будут иметь обертку, в которой можно держать весь наш наш экранный контент. Первый элемент здесь будет скрытое сообщение, которое говорит пользователя, если в браузере поддерживается. Это будет видно только, если это не так. Затем заголовок говорит пользователя, что элементы формы, которые следуют, будут использоваться для их сообщения.

 & lt; div id = "Wrapper" & gt;
& lt; Span ID = «неподдерживаемый« класс = »поддержка скрытых« & gt; api api не поддерживается & lt; / span & gt;
& lt; h2 & gt; ваше сообщение: & lt; / h2 & gt; 

03. Выберите результаты

При использовании речи API есть два способа отображения содержимого. В одном текстовые дисплеи отображаются, когда пользователь перестал речь и нажмите кнопку «Прослушивание». Другое показывает слова на экране как говорят. Эта первая переключатель позволяет отображать окончательный речевой результат.

 & lt; div id = "typeofinput" & gt;
& lt; Результаты: результаты: & lt; / span & gt;
& lt; этикетка & gt;
& lt; тип входного типа = радио имя = значение типа распознавания = Final & GT; Финальная речь и LT; / MALK & GT; 

04. Радио два

Вторая переключатель добавляется здесь, и этот позволяет пользователю выбрать текст, который будет отображаться, как они говорят. Эти радиопередачи будут поднимать JavaScript позже и использовали для управления речевым входом, но на данный момент это позволяет пользователю иметь интерфейс для управления этим.

 & lt; label & gt;
& lt; тип ввода = радио имя = значение типа распознавания = промежуточный проверенный & gt; Как вы говорите и LT; / MALK & GT;
& lt; / div & gt; 

05. Показать текст

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

 & lt; textarea id = "транскрипция" readonly & gt;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; кнопка id = "close-all" Class = "кнопка" & gt; Очистить текст & lt; / button & gt; 

06. Последний интерфейс

Конечные элементы интерфейса теперь добавляются на экран. Кнопка речи включает в себя и отключает речь, поэтому она должна быть нажата перед головой. Нажав снова останавливает его. Поскольку это относительно новое взаимодействие, журнал внизу расскажет пользователям, что делать.

& lt; class = "Кнопка-обертка" & gt;
    & lt; div id = "Class ЩУN =« Запуск »и GT;
  & lt; / div & gt;
  & lt; div id = "log" & gt; нажмите, чтобы начать говорить & lt; / div & gt;
& lt; / div & gt; 

07. Добавить JavaScript

Теперь добавьте теги скрипта перед тегом закрытия тела. Это где все JavaScript пойдет. Первые две строки схватывают элементы страницы с идентификатором сопоставления и храните их в переменной. Транскрипция - это текстовый результат речи. Журнал обновит пользователь с тем, как его использовать.

 & lt; скрипт & gt;
VAR Transcription = Document.getElementById («транскрипция»);
var log = document.getelementbyId ('log');
& lt; / script & gt; 

08. Переменные результаты

Используя следующие несколько переменных, в них кэшируются больше элементов интерфейса. Кнопка речи станет переключателем, позволяя пользователям переключать речь и выключить., Монтируемое логией, True / False Privable. Кнопка CLEAR-ALL удалит неудовлетворительные результаты речи.

 VAR Start = Document.getelementById («Speefhuutton»);
var clear = document.getelementbyId ('clear-all');
VAR говоря = false; 

09. Поддерживается ли это?

Первое, что наш код будет делать, это выяснить, поддерживается ли эта речевая функция браузера пользователя. Если этот результат возвращается как NULL, то оператор IF бросит скрытое сообщение, при этом одновременно принимает кнопку запуска от интерфейса, чтобы остановить речевой ввод.

 Window.speechrecognition = Window.speechrecognition ||
window.webkitspeechrecognition ||
ноль;
Если (window.speechrecognition === null) {
Document.getelementbyId («неподдерживаемый»). ClassList.Remove («скрытый»);
start.classlist.add («скрытый»);
} else {

10. Начните распознавание

Распознавание речи начинается как «еще» для доступного признания речи. Непрерывный вход запускается так, как это значение по умолчанию на кнопках радио. Функция «onResult» будет обрабатывать результаты речевого ввода. Это будет добавлено в текстовое поле транскрипции.

 VAR Distrizer = Новое окно.
Распознавание речи();
распознавание .Сереные = правда;
Установите .onresult = Функция (событие) {
Transcription.textcontent = '';
для (var i = event.resultindex; i lt; событие.
результаты. I ++) {

11. Финал или промежуточный?

Выявление IF теперь проверяет, хочет ли пользователь отображать текст, так как они говорят (промежуточный) или только после того, как они закончат говорить (финал). Вы заметите, что если он промежуточный, каждое слово добавляется в текст с помощью «+ =», а финал просто просто отбрасывает весь текст там.

 Если (Event.Results [I] .isfinal) {
Transcription.textcontent = event.results [i] 
 .transcript;
} еще {
Transcription.textcontent + = event.results [i] 
 .transcript;
}
}
}; 

12. Обработка ошибок

Как и в случае с большинством JavaScript APIS, есть обработчик ошибок, который позволит вам решить, что делать с любыми проблемами, которые могут возникнуть. Они брошены в «журнал», чтобы дать отзыв пользователям, так как важно, чтобы они знали, что может происходить с интерфейсом.

 Установление.oneRror = Функция (событие) {
log.innerhtml = 'Ошибка распознавания:' +
Event.message + '& lt; br / & gt; + log.innerhtml;
}; 

13. Начните говорить!

Слушатель событий здесь начинается, когда пользователь нажимает кнопку, чтобы начать говорить. Если пользователь не говорят, то кнопка меняет цвет, чтобы показать, что началась речь, переменная для речи установлена ​​значение True, и проверяется «временная» кнопка «Интерметра», чтобы увидеть, является ли это выбор пользователя для ввода.

 start.addeventListener ('click', Функция () {
Если (! Говоря) {
говоря = правда;
start.ClassList.toggle («Стоп»);
Установление.interimresults = документ.
QuerySelector («Ввод [name =» распознает
на тип «] [значение =« временный »] '). проверено; 

14. Возьмите вклад

Заявление «TRY и CALL» теперь начинает распознавание речи и говорит пользователю, что они должны начать говорить, и что, когда они сделаны, нажмите, нажмите еще раз, чтобы остановиться ». Catch подберет ошибку и бросит, что в «бревно», чтобы пользователь мог понять, что может быть не так.

 попробуйте {
расположение .start ();
log.innerhtml = 'Начать говорить сейчас
& lt; br / & gt; нажмите, чтобы остановить ';
} Catch (Ex) {
log.innerhtml = 'Ошибка распознавания:
& lt; br / & gt; + ex.message;
} 

15. Нажмите, чтобы остановить

Теперь, когда пользователь нажимает, чтобы перестать говорить, распознавание речи остановлено. Кнопка переходит назад к зеленому из красных во время разговора. Пользовательский интерфейс обновляется, так что пользователю сообщается, что служба остановилась. Разговорная переменная установлена ​​на false, готовая к тому, чтобы позволить пользователю снова говорить.

} else {
Установление .stop ();
start.ClassList.toggle («Стоп»);
log.innerhtml = 'распознавание остановлено
& lt; br / & gt; нажмите, чтобы поговорить ';
говоря = false;
}
}); 

16. Очистить текст

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

 Clear.addEventListener («Щелкнуть», функция () {Transcription.textcontent = '';
});
} 

17. Добавить цель

Теперь, как у вас есть рабочий пример, для интерфейса должна быть какая-то цель, поэтому давайте сделаем это, чтобы пользователи могли вводить отзывы. Сохраните страницу, а затем выберите Сохранить как, с новым именем «Reviews.html». Добавьте следующие HTML-элементы сразу после после того, как «обертка» и GT; линия.

 & lt; h1 & gt; отзывы продукта & lt; / h1 & gt;
& lt; div id = "Отзывы" & gt; 

18. Общее представление

Предыдущий код будет держать отзывы. Пользователь должен будет отправить свой речевой вход, поэтому добавьте кнопку «Отправить» сразу после «Clear Text», которая будет около 28 строки в вашем коде. Затем вы можете перейти к JavaScript для следующего шага.

 & lt; Кнопка ID = «Отправить кнопку класса =» и GT; отправить отзыв & lt; / button & gt; 

19. Новые элементы интерфейса

В верхней части вашего JavaScript добавьте новые переменные, чтобы удерживать ссылки на новые элементы интерфейса, которые только что были добавлены. Они предоставит вам возможность отправить и отображать результаты на экране в разделе «Отзывы» страницы.

 var aptled = document.getelementbyId («Отправить»);
VAR Review = Document.getelementById («Отзывы»); 

20. Подать заявку

Теперь код здесь будет обрабатывать, когда пользователь нажимает кнопку «Отправить», поместите это прямо перед «Очистить» код кнопки, который должен быть около строки 88 в вашем коде. Во-первых, создается тег абзаца, и впоследствии добавляется речевой вход. Затем это будет добавлено в раздел «Обзор».

 adit.addeventListener ('click', Функция () {
Пусть p = document.createelement ('p');
var textnode = document.createTextnode
(Transcription.Value);
P.appendChild (Textnode);
Review.appendChild (P);
Пусть сегодня = новая дата ();
Пусть s = document.createelement («маленький»); 

21. Окончательное представление

Дата добавляется так, чтобы обзор временен в документ. Наконец, добавляется горизонтальное правило для отображения, где каждый обзор заканчивается, то текст очищается готовым к новым входу. Сохраните страницу и проверьте это. Вы увидите, что теперь вы можете отправить свою речь на страницу в качестве отзывов. Для постоянства вам нужно будет использовать базу данных для хранения этих результатов.

 TextNode = Document.createTextnode (сегодня);
S.AppendChild (Textnode);
Review.appendChild (ы);
Пусть hr = document.createidelement ('hr');
Review.appendChild (HR);
Transcription.textcontent = '';
}); 

Эта статья была первоначально опубликована в номере 286 журнала Creative Web Design Веб-дизайнер Отказ Купить проблему 286 здесь или же Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

• 14 лучших apis javascript
• Построить чатбот AI
• 5 Выполняющиеся тенденции UX в 2019 году