Мовний input у формах HTML5

2

Від автора: Спосіб нашої взаємодії з комп’ютерами за минуле десятиліття сильно змінився. Пристрої з сенсорними екранами і лептопи породили більш інтуїтивний вид взаємодії, що досягається за допомогою традиційної миші. Ці зміни не обмежилися одним апаратним забезпеченням. Жести, інтелектуальне введення тексту і розпізнавання мови – ось приклади програмних інновацій, усовершенствовавших спосіб нашої взаємодії з пристроями.

Розпізнавання мови десятиліттями вислизало від інноваторів. Багато організації намагалися (з різним ступенем успішності) створити надійні технології розпізнавання мови. Однак, схоже, лише одна компанія впоралася з цією проблемою – Google.

З цього поста ви дізнаєтеся, як скористатися перевагами технологій розпізнавання мовлення google’а для поліпшення своїх веб-форм. Побачите, як дати можливість користувачам chrome для а заповнювати текстові поля форм за допомогою мови, і як визначити наявність підтримки цієї здатності в браузерах.

Включаємо мовленнєвої input

Включити підтримку мовного input-a так само просто, як додати атрибут елементів input. Атрибут x-webkit-speech позначить браузеру, що користувачеві потрібно надати опцію заповнення цього поля форми за допомогою мовного input.

При включеному мовному input-е елемента праворуч від input -а з’явиться маленька іконка-мікрофон. Клацання по цій іконці запустить маленьку підказку-тултип, показує, що ваш голос в даний момент записується. Також можна почати мовленнєвої введення за допомогою фокусування на елементі і натиснення Ctrl +Shift + . у Windows) або Command + Shift + . Mac.

Мовний input у формах HTML5

ДИВИТИСЯ ДЕМО-ПРИКЛАД | ДИВИТИСЯ НА CODEPEN

З допомогою JavaScript’а можна протестувати, включений мовленнєвої введення елемента, перевіривши його властивість webkitSpeech. Воно логічне і, отже, буде встановлено на true або false. Для включення або відключення мовного елемента вводу це властивість можна анулювати.

// Включити
element.webkitSpeech = true;
// Відключити
element.webkitSpeech = false;

ЗАСТЕРЕЖЕННЯ З ПРИВОДУ ТИПІВ ВВОДУ

Мовний input доступний не для всіх типів input HTML5. При тестуванні я виявив, що типи text, number і tel підтримують мовний enter, тоді як типи e-mail, url, date і month – ні.

Якщо застосувати атрибут x-webkit-speech до елемента input за допомогою підтримуваного типу введення, властивість webkitSpeech цього елементу все ще виявиться встановленим на true. Тому не можна покладатися на цю властивість, якщо потрібно дізнатися, чи відображає браузер елементи управління мовним введенням, а можна лише подивитися, підтримує взагалі цей браузер мовленнєвої input.

Виявлення браузерної підтримки

Простий спосіб перевірити, чи підтримує браузер користувача мовленнєвої input – поглянути на властивість webkitSpeech елемента input. Нижче наведено приклад того, як це зробити.

if (document.createElement(‘input’).webkitSpeech === undefined) {
// Не підтримується
} else {
// Підтримується!
}

Єдиний браузер в даний час, підтримує мовний input – це Google Chrome. Причини цього ми розглянемо у наступному розділі.

Як працює розпізнавання мови

Мовний input у формах HTML5

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

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

Браузер Chrome при забезпеченні функціональності покладається на власну технологію розпізнавання мови google’а крім x-webkit-speech. Команда Google довго працювала над розпізнаванням мови і обробкою текстів на природній мові. Саме вона несе відповідальність за розробку складних систем, необхідних для забезпечення надійного сервісу перекладу мови в текст, для таких продуктів, як Google Translate і Voice Search.

Примітка: якщо вам цікаво дізнатися більше про те, як працює переклад промови в текст, прочитайте опубліковані інженерами Google дані досліджень.

Вдосконалення сервісів перекладу мови в текст неймовірно важко і потребує значної кількості інвестицій. Ймовірно, це основна причина того, чому ні один браузерний вендор більше не впровадив розпізнавання мови. Однак тепер, коли Apple обзавівся Siri, мені цікаво бачити, чи з’явиться коли-небудь розпізнавання мови в Safari.

Резюме

З цього поста ви дізналися про атрибут x-webkit-speech і те, як можна застосовувати його для додавання в свої веб-форми можливості розпізнавання голосу. Тут не описується більш просунутий Web Speech API. Цей програмний інтерфейс програми дає можливість розробникам додавати функціональність розпізнавання більшу кількість аспектів своїх додатків, і навіть синтезувати мову з тексту.

Комп’ютер це на вашому столі або телефон в кишені, інновації програмного забезпечення на зразок Google Voice Search і Siri прокладають дорогу до революційного стрибка нашої взаємодії з комп’ютерами. Ласкаво просимо в майбутнє, друзі мої, тепер лише б хто-небудь нарешті зміг освоїти телепортацію.

Матеріали для читання і посилання

Демо-приклад мовного вводу

Веб-додатки, керовані голосом: введення в Web Speech API