Как стать автором
Обновить

В поисковой строке Рамблера можно не только писать — но и говорить

Время на прочтение 2 мин
Количество просмотров 19K
Привет %USERNAME%!

Google Chrome начиная с 11 версии получил возможность распознавания речи в тегах input;
Раз уж возможность есть, грех ее не использовать :)

Теперь в поисковой строке рамблера можно не только писать — но и говорить.




Любому <input type='text' /&gt можно задать атрибут x-webkit-speech и у инпута появится иконка с микрофоном. По нажатию на микрофон откроется окошко которое предложит вам произнести слово или фразу и после распознанный текст появится в инпуте.

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

Иконка микрофона — это псевдо-элемент ::-webkit-input-speech-button;
По умолчанию он имеет следующие стили:

input::-webkit-input-speech-button {
    -webkit-appearance: -webkit-input-speech-button;
    display: inline-block;
} 


Чтобы изменить внешний вид кнопки можно использовать следующий CSS:

input::-webkit-input-speech-button {
    -webkit-appearance: button;
    background: url('voice_icon.png') no-repeat 0px 2px;
    float: right;
    width: 15px;
    height: 16px
}


Кроме возможности изменения внешнего вида микрофона браузер предоставляет доступ к DOM-событию onwebkitspeechchange которое срабатывает сразу после того как пользователь воспользовался распознаванием речи.

Пример отсылки формы сразу после изменения значения поля:

document.getElementById('search_query').onwebkitspeechchange = function(evt){
    document.getElementById('search_form').submit();
};

В параметре передаваемому функции обработчику onwebkitspeechchange приходит event объект самая интересная часть которого поле results с массивом предлагаемых вариантов распознавания.

Распознавание речи ведется исходя из языка браузера — но есть если у тега html указать атрибут lang=«de_DE» — то распознается немецкая речь.

Тоже самое произойдет если в документе указать

<meta http-equiv='Content-Language' content='de_DE' />

Вроде все. Да пребудет с вами сила :)

Иван Полуянов
Разработчик
Теги:
Хабы:
+45
Комментарии 56
Комментарии Комментарии 56

Публикации

Информация

Сайт
rambler.ru
Дата регистрации
Дата основания
Численность
501–1 000 человек
Местоположение
Россия

Истории