Побудуйте голосовий контроль UI

Ми бачили багато нових API, доданих до Інтернету за останні кілька років, які дійсно дозволили веб-контенту, щоб мати такий же функціональність, оскільки багато додатків мали деякий час. Порівняно новий API - це API розпізнавання мови, яка, як ви, можливо, здогадуюсь, дозволяє використовувати ваш текст як вхід на сторінку. Він вимагає запуску, щоб запустити службу та знову зупинити.

Великий випадок для цього може бути в дозволі серед користувачів, надаючи голосовий вхід як альтернативу натискання. Якщо ваша аналітика показує, що у вас є багато мобільного перегляду, то подумайте, скільки простіше було б говорити у ваш телефон, ніж за допомогою клавіатури.

Там були передбачення, які інтерфейси на базі екрана можуть починати зникнути протягом десяти років. Спочатку це звучить як наукова фантастика, але, оскільки користувачі отримують все більш комфортно з мовою, як вхід через подібні Alexa та Siri, то він стоїть на причину, що це стане поширеним як метод введення. Підручник тут приведе вас до швидкості введення мовлення, а потім використовувати це, щоб залишити відгуки про продукт на Електронна комерція .

Завантажте файли Для цього підручника.

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

01. Запустіть проект

З папки файлів проекту відкрийте папку "Початок" у вашому коді IDE та відкрийте файл "Speech.html" для редагування. Всі CSS для проекту написано як це не фокус API мовлення, тому додайте посилання, показане тут, щоб отримати Serif Seriface Serif і пов'язати файл CSS.

 & lt; link href = "https://fonts.googleap.com/css?family=noto+serif" Rel = "stylesheet" & gt;
& lt; link rel = "stylesheet" href = "css / style.css" & gt; 

02. Додайте вміст

Перші елементи цього буде мати обгортку, в якому для утримання всіх наших екранних зміст. Перший елемент тут буде прихованим повідомленням, яке говорить користувачеві, якщо мовний API підтримується у браузері. Це буде видно тільки, якщо це не так. Тоді заголовок говорить користувачеві, що для їх повідомлення будуть використані елементи форми.

 & lt; div id = "обгортка" & gt;
& lt; SPAN ID = "Непідтримуваний" Class = "Підтримка прихованого" & gt; мовний API не підтримується & lt; / span & gt;
& lt; h2 & gt; ваше повідомлення: & lt; / h2 & gt; 

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

При використанні мовного API є два способи відображення вмісту. В одному, текстові відображаються, коли користувач перестав говорити, а кнопка "прослуховування" натискається. Інші показують слова на екрані, як говориться. Ця перша перемикачка дозволяє відображати остаточний результат мови.

 & lt; div id = "typeofinput" & gt;
& lt; span & gt; результати: & lt; / span & gt;
& lt; label & gt;
& lt; Вхідний тип = Назва радіо = Значення типу розпізнавання = Final & GT; Остаточна мова & lt; / label & gt; 

04. Радіо два

Друга перемикача додана тут, і це дозволяє користувачеві вибрати текст, який буде відображатися, як вони говорять. Ці перемикачі будуть підібрані JavaScript пізніше і використовуються для керування входом мовлення, але зараз це дозволяє користувачеві мати інтерфейс для керування цим.

 & lt; label & gt;
& lt; тип введення = радіозйомка = значення типу розпізнавання = тимчасові перевірки & gt; Як ви говорите & lt; / label & gt;
& lt; / div & gt; 

05. Відобразити текст

Текст, який користувач говорить на сторінку, потрібно буде відображатися на екрані. Тут додано текстову область, яка має ідентифікатор "транскрипції" - це буде орієнтована так, щоб виступ споживача закінчиться тут. Також є чітка кнопка, щоб видалити текст.

 & lt; textarea id = "транскрипція" readonly & gt;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; кнопка id = "clear-all" class = "кнопка" & gt, clear text & lt; / button & gt; 

06. Останній інтерфейс

Остаточні елементи інтерфейсу додаються до екрана зараз. Кнопка мови дозволяє та вимикає мову, тому він повинен бути натиснувши перед тим, як говорити. Натискання знову зупиняється. Оскільки це відносно нова взаємодія, журнал під ним розповість користувачам, що робити.

& lt; div class = "button-wrapper" & gt;
    & lt; div id = "speedbutton" class = "запустити" & gt; & lt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "журнал" & gt, натисніть, щоб почати говорити & lt; / div & gt;
& lt; / div & gt; 

07. Додайте JavaScript

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

 & lt; сценарій & gt;
var transcript = document.getleementByid ('transcription');
var log = document.getelementByid ('log');
& lt; / script & gt; 

08. Результати змінних

Використовуючи наступні кілька змінних, до них кешовані елементи інтерфейсу. Кнопка мовлення стане перемиканням, дозволяючи користувачам перемикати мову та вимкнути., Контролюється за допомогою булевої, True / False Variable. Кнопка Clear-All буде видаляти незадовільні результати мовлення.

 Var Start = Document.GetElementById ("SpeechButton");
var clear = document.getleementByid ('clear-all');
var speaking = false; 

09. Чи підтримується це?

Перше, що буде робити, наш код буде робити, якщо ця функція мови підтримується браузером користувача. Якщо цей результат повертається як NULL, то, якщо заява викидає приховане повідомлення, одночасно одночасно знімаючи кнопку запуску від інтерфейсу, щоб зупинити вигляд мовлення.

 Window.SpeechRecognition = Window.SpeechПопізнавання ||
window.webkitspeachrepinition ||
нуль;
if (window.speechechion === null) {
document.getleementbyid ("Непідтримуваний"). Класний список.Ремов ("прихований");
start.classlist.add ('прихований');
} else {

10. Почніть визнання

Розпізнавання мови починається як "інша" для наявної розпізнавання мови. Початок безперервного введення, оскільки це за замовчуванням на перемикачах. Функція "OnResult" буде обробляти результати введення мовлення. Це буде додано в текстове поле транскрипції.

 Var Selewizer = Нове вікно.
Розпізнавання мови();
розпізнавальник. Continout = true;
priender.onresult = функція (подія) {
transcription.textcontent = '';
для (var i = event.resultindex; i & lt; подія.
Результати. i ++) {

11. Остаточний або тимчасовий?

Якщо заява тепер перевіряє, чи користувачеві хоче відображати текст, як вони говорять (тимчасові) або лише після того, як вони закінчують мову (фінал). Ви помітите, що якщо це тимчасове, кожне слово додано до тексту з "+ =", а фінал просто скидає весь текст там.

 if (event.Results [i] .sfinal) {
transcription.textcontent = event.Results [i] 
 .tranccript;
} else {
Transcription.TextContent + = Event.Results [i] 
 .transcript;
}
}
}; 

12. Обробка помилок

Як і у більшості API JavaScript існує обробник помилок, який дозволить вам вирішити, що робити з будь-якими проблемами, які можуть виникнути. Вони кидаються в "журнал" DIV, щоб дати зворотний зв'язок користувачеві, оскільки важливо, щоб вони знали про те, що може тривати з інтерфейсом.

 розпізнавач.onerror = функція (подія) {
log.innerhtml = 'Помилка розпізнавання:' +
event.Message + '& lt; br / & gt;' + log.innerhtml;
}; 

13. Почніть говорити!

Слухач події тут запускається, коли користувач натискає кнопку, щоб почати говорити. Якщо користувач не кажучи, то кнопка змінює колір для показу, що розмовляє, змінна для виступу встановлено значення true, а «проміжна» перемикача перевіряється, щоб побачити, чи є вибір користувача для введення.

 START.ADDEVENTLISTENER ("CLICK", функція () {
якщо (! Говорячи) {
кажучи = правда;
start.classlist.toggle ('stop');
Minderizer.interimResults = Документ.
QuerySelector ("Вхід [NAME =" VINITI
на типу "] [значення =" проміжок "] '). Перевірено; 

14. Візьміть вхід

Заява "Спроба і ловити" зараз починає розпізнавання мови та розповідає користувачеві, що вони повинні почати говорити, і що, коли вони зроблені, "натисніть ще раз, щоб зупинити". Улов підберуть помилку і кидати, що в "журналу", щоб користувач міг зрозуміти, що може бути неправильним.

 Спробуйте {
розпізнавач .Start ();
log.innerhtml = 'Початок говорити зараз
& lt; br / & gt; Натисніть, щоб зупинити ';
} Catch (ex) {
log.innerhtml = 'Помилка розпізнавання:
& lt; br / & gt; ' + ex.message;
} 

15. Натисніть, щоб зупинити

Тепер, коли користувач натискає, щоб перестати говорити, розпізнавання мови зупиняється. Кнопка змінюється назад до зеленого з червоного під час розмови. Інтерфейс користувача оновлюється, щоб користувач повідомив, що служба припинилася. Розмовна змінна встановлюється на False, готові дозволити користувачеві говорити знову.

} else {
розпізнавач.Поп ();
start.classlist.toggle ('stop');
log.innerhtml = 'визнання зупинилося
& lt; br / & gt; Натисніть, щоб говорити ";
Говорячи = False;
}
}); 

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

Остаточний код для цього розділу - це лише чітка кнопка, щоб видалити текст введення мовлення у випадку, якщо він неправильно інтерпретується. Збережіть файл та перевірте це у своєму браузері. Ви зможете натиснути кнопку, щоб розмовляти на комп'ютер і побачити результати.

 clear.addeventlistener ("Click", функція () {transcription.textcontent = '';
});
} 

17. Додайте мету

Тепер, коли у вас є робочий приклад, треба бути певною метою інтерфейсу, тому давайте зробимо це таким чином, щоб користувачі могли ввести відгуки. Збережіть сторінку, а потім виберіть "Зберегти як", з новою назвами "Відгуки.HTML". Додайте наступні HTML-елементи тільки після & lt; div id = "обгортка" & gt; лінія.

 & lt; h1 & gt; відгуки продукту & lt; / h1 & gt;
& lt; div id = "відгуки" & gt; & lt; / div & gt; 

18. Загальний подання

Попередній код буде мати відгуки. Користувач повинен подати свій мовний вхід, тому додайте кнопку "Надіслати" відразу після кнопки "Очистити текст", яка буде навколо лінії 28 у вашому коді. Тоді ви можете рухатися до JavaScript на наступний крок.

 & lt; Кнопка ID = "Надіслати" Class = "Кнопка" & gt, подати огляд & lt; / button & gt; 

19. Нові елементи інтерфейсу

У верхній частині вашого JavaScript додайте нові змінні, щоб утримувати посилання на нові елементи інтерфейсу, які були додані. Вони нададуть вам спосіб подання та відображення результатів на екрані в розділі "Відгуки" сторінки.

 var submit = document.getelementById ('submit');
var review = document.getelementByid ('Reviews'); 

20. Надіслати запис

Тепер код тут буде обробляти, коли користувач натискає кнопку "Надіслати", помістіть це прямо перед кнопкою "Очистити", який повинен бути навколо лінії 88 у вашому коді. По-перше, створюється тег абзацу, а вхід до мови додається до цього. Потім буде додано до розділу "Огляд".

 submit.addeventlistener (клацніть ", функція () {
Нехай p = документ. Createelement ('p');
var textnode = document.creatextnode
(transcription.value);
p.appendchild (textnode);
Review.appendchild (p);
Нехай сьогодні = нова дата ();
Let S = Document.Createlement ("маленький"); 

21. Остаточне подання

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

 textnode = document.creatextnode (сьогодні);
s.appendchild (textnode);
Review.Appendchild (и);
Нехай hr = document.createelement ('hr');
Review.appendchild (HR);
transcription.textcontent = '';
}); 

Ця стаття була опублікована у випуску 286 журналу Creative Web-дизайну Веб-дизайнер . Купити проблему 286 тут або Підписатися на веб-дизайнер тут .

Пов'язані статті:

• 14 кращих JavaScript Apis
• Створіть AI-Powered Chatbot
• 5 Виникаючі тенденції UX у 2019 році