In the search line of the Rambler, you can not only write - but also speak

Hi% USERNAME%!



Google Chrome since version 11 has been able to recognize speech in input tags;

Since there is an opportunity, it is a sin not to use it :)



Now in the search line of the Rambler, you can not only write - but also speak.

')







Any <input type = 'text' /> can be assigned an x-webkit-speech attribute and an input with a microphone icon will appear. By clicking on the microphone, a window opens that prompts you to pronounce a word or phrase and after the recognized text appears in the input path.



Unfortunately, the browser imposes some restrictions on the styling of the microphone button, but some things can be done with it.



Microphone icon is a pseudo-element :: - webkit-input-speech-button;

By default it has the following styles:

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

To change the look of the button, you can use the following CSS:

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

In addition to the possibility of changing the appearance of the microphone, the browser provides access to the DOM-event onwebkitspeechchange which is triggered immediately after the user has used speech recognition.



Example of sending the form immediately after changing the field value:

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

In the parameter to the onwebkitspeechchange handler passed to the function, the event object comes in the most interesting part of which is the results field with an array of suggested recognition options.



Speech recognition is performed based on the browser language - but there is if the html tag specifies the attribute lang = "de_DE" - then German speech is recognized.



The same will happen if you specify in the document



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



Look like that's it. May the force be with you :)



Ivan Poluyanov

Developer