input x-webkit-speech

speech

by secretgspot

HTML

<input id="queryField" type="text" x-webkit-speech>

CSS

input[type="text"] {
    width: 400px;
    padding: 10px 15px;
    font-size: 2em;
    line-height: 40px;
    border-radius: 10px;
    border: 1px solid orange;
    outline: none;
}

JavaScript

var field = document.querySelector('#queryField');

field.onwebkitspeechchange = function(e) {
    var q = field.value;
    // do stuff
    console.log(e); // SpeechInputEvent
    console.log(q);
};