Голосовой ввод. Иконка микрофона в input

Пока работает только в Google Chrome начиная с 11

Поле ввода:

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

По умолчанию он имеет следующие стили:

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' />

Пример, работы голосового ввода с textarea

<script>
    var mike = document.getElementById('mike');
    mike.onfocus = mike.blur;
    mike.onwebkitspeechchange = function(e) {
        document.getElementById('txt').value = mike.value;
    };
</script>
<style>
    #mike {
        font-size: 25px;
        width: 25px;
        height: 25px;
        cursor:pointer;
        border: none;
        position: absolute;
        margin-left: 5px;
        outline: none;
        background: transparent;
    }
    #txt {
        height: 150px;
        width: 300px;
    }
</style>
<textarea id="txt"></textarea>
<input x-webkit-speech id="mike"/>

Читать по теме:

• wicg.github.io

.
Прокомментировать/Отблагодарить