- Включаємо мовної input
- ЗАСТЕРЕЖЕННЯ ЩОДО ТИПІВ ВВЕДЕННЯ
- Виявлення браузерної підтримки
- Як працює розпізнавання мови
- резюме
- Матеріали для читання і посилання
Від автора: Спосіб нашої взаємодії з комп'ютерами за минуле десятиліття разюче змінився. Пристрої з сенсорними екранами і лептопи породили більш інтуїтивний вид взаємодії, ніж досягається за допомогою традиційної миші. Ці зміни не обмежилися одним апаратним забезпеченням. Жести, інтелектуальне введення тексту і розпізнавання мови - ось приклади програмних інновацій, удосконалили спосіб нашої взаємодії з пристроями.
Розпізнавання мови десятиліттями випадало від інноваторів. Багато організацій намагалися (з різним ступенем успішності) створити надійні технології розпізнавання мови. Однак, схоже, лише одна компанія впоралася з цією проблемою - Google.
Включаємо мовної input
Включити підтримку мовного input-a так само просто, як додати атрибут в елементи input. Атрибут x-webkit-speech позначить браузеру, що користувачеві потрібно надати опцію заповнення цього поля форми за допомогою мовного input.
Практичний курс по верстці адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
дізнатись детальніше<Input type = "text" x - webkit - speech>
При включеному мовному input-е у елемента праворуч від input -а відобразиться маленька іконка-мікрофон. Клацання по цій іконці запустить маленьку підказку-зринаючі підказки, яка ніколи, що ваш голос в даний момент записується. Також можна почати мовне введення за допомогою фокусування на елементі і натискання Ctrl + Shift +. в Windows або Command + Shift +. в Mac.
ДИВИТИСЯ ДЕМО-ПРИКЛАД | ДИВИТИСЯ НА CODEPEN
За допомогою JavaScript'а можна протестувати, чи включений мовне введення елемента, перевіривши його властивість webkitSpeech. Воно булево і, отже, буде встановлено на true або false. Для включення або відключення мовного введення елемента це властивість можна анулювати.
// Увімкнути
element. webkitSpeech = true;
// Відключити
element. webkitSpeech = false;
ЗАСТЕРЕЖЕННЯ ЩОДО ТИПІВ ВВЕДЕННЯ
Мовний input доступний не для всіх типів input HTML5. при тестуванні я виявив, що типи text, number і tel підтримують мовне введення, тоді як типи email, url, date і month - немає.
Якщо застосувати атрибут x-webkit-speech до елементу input за допомогою непідтримуваного типу введення, властивість webkitSpeech цього елемента все ще виявиться встановленим на true. Тому не можна покладатися на це властивість, якщо потрібно дізнатися, відображає чи браузер елементи управління мовним введенням, а можна лише подивитися, чи підтримує взагалі цей браузер мовної input.
Виявлення браузерної підтримки
Простий спосіб перевірити, чи підтримує браузер користувача мовної input - поглянути на властивість webkitSpeech елемента input. Нижче наведено приклад того, як це зробити.
Практичний курс по верстці адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
дізнатись детальнішеif (document. createElement ( 'input'). webkitSpeech === undefined) {
// Не підтримується
} Else {
// Підтримується!
}
Єдиний браузер в даний час, що підтримує мовної input - це Google Chrome. Причини цього ми розглянемо в наступному розділі.
Як працює розпізнавання мови
Для виконання перетворення мови в текст браузер покладається на зовнішній сервіс. Запис вашого голосу посилається на цей сервіс, який згодом аналізує звук і конструює його текстову версію. Потім текст посилається назад браузеру і той заповнює елемент input для завершення процесу. Багато сервісів перекладу мови в текст об'єднують алгоритми машинного самонавчання, що дозволяють згодом ставати все більш точними.
Примітка: побічним ефектом застосування зовнішніх сервісів для виконання перекладу мови в текст є те, що для роботи мовного введення вам буде потрібно Інтернет-з'єднання. Пам'ятайте про це, якщо плануєте змусити своє веб-додаток працювати офлайн.
Браузер Chrome при забезпеченні функціональності покладається на власну технологію розпізнавання мови Google'а крім x-webkit-speech. Команда Google довго працювала над розпізнаванням мови і обробкою текстів на природній мові. Саме вона несе відповідальність за розробку складних систем, необхідних для забезпечення надійного сервісу перекладу мови в текст, для таких продуктів, як Google Translate і Voice Search.
Примітка: якщо вам цікаво дізнатися більше про те, як працює переклад мови в текст, прочитайте опубліковані інженерами Google дані досліджень .
Удосконалення сервісів перекладу мови в текст неймовірно важко і вимагає значної кількості інвестицій. Ймовірно, це основна причина того, чому жоден браузерні вендор більше не впровадив розпізнавання мови. Однак тепер, коли Apple обзавівся Siri, мені цікаво бачити, чи з'явиться коли-небудь розпізнавання мови в Safari.
резюме
З цього поста ви дізналися про атрибут x-webkit-speech і тому, як можна застосовувати його для додавання в свої веб-форми можливості мовного введення. Тут не описується більш просунутий Web Speech API . Цей програмний інтерфейс програми дає можливість розробникам додавати функціональність розпізнавання мови в більшу кількість аспектів своїх додатків, і навіть синтезувати мову з тексту.
Комп'ютер це на вашому столі або телефон в кишені, інновації програмного забезпечення на зразок Google Voice Search і Siri прокладають дорогу до революційного стрибка нашої взаємодії з комп'ютерами. Ласкаво просимо в майбутнє, друзі мої, тепер аби хтось зміг нарешті освоїти телепортацію.
Матеріали для читання і посилання
Автор: Matt West
джерело: http://blog.teamtreehouse.com/
Редакція: Команда webformyself
Практичний курс по верстці адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
дізнатись детальніше
