Привет %USERNAME%!
Google Chrome начиная с 11 версии получил возможность распознавания речи в тегах input;
Раз уж возможность есть, грех ее не использовать :)
Теперь в поисковой строке рамблера можно не только писать — но и говорить.
![](https://habrastorage.org/r/w1560/storage1/4568a507/d6800bac/837a46c4/0272de5b.png)
Любому <input type='text' /> можно задать атрибут x-webkit-speech и у инпута появится иконка с микрофоном. По нажатию на микрофон откроется окошко которое предложит вам произнести слово или фразу и после распознанный текст появится в инпуте.
К сожалению браузер накладывает некоторые ограничения в стилизации кнопки микрофона, но некоторые вещи с ним можно сделать.
Иконка микрофона — это псевдо-элемент ::-webkit-input-speech-button;
По умолчанию он имеет следующие стили:
Чтобы изменить внешний вид кнопки можно использовать следующий CSS:
Кроме возможности изменения внешнего вида микрофона браузер предоставляет доступ к DOM-событию onwebkitspeechchange которое срабатывает сразу после того как пользователь воспользовался распознаванием речи.
Пример отсылки формы сразу после изменения значения поля:
В параметре передаваемому функции обработчику onwebkitspeechchange приходит event объект самая интересная часть которого поле results с массивом предлагаемых вариантов распознавания.
Распознавание речи ведется исходя из языка браузера — но есть если у тега html указать атрибут lang=«de_DE» — то распознается немецкая речь.
Тоже самое произойдет если в документе указать
Вроде все. Да пребудет с вами сила :)
Иван Полуянов
Разработчик
Google Chrome начиная с 11 версии получил возможность распознавания речи в тегах input;
Раз уж возможность есть, грех ее не использовать :)
Теперь в поисковой строке рамблера можно не только писать — но и говорить.
![](https://habrastorage.org/storage1/4568a507/d6800bac/837a46c4/0272de5b.png)
Любому <input type='text' /> можно задать атрибут 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' />
Вроде все. Да пребудет с вами сила :)
Иван Полуянов
Разработчик