Talk to your computer with Chrome and ASP.NET Combo Box |
Check out how to enable speech-recognition for the ASP.NET Combo Box control and let your end-users talk to your website!
Watch this short 1 minute screencast to see how the voice-to-text integration works with the ASPxComboBox:
First, the disclaimer:
1. Insert a meta-tag to set the language (in case the site language differs from the speech recognition language):
2. Override the ASPxClientComboBox's client-side Init event:
Please note that s.filterStrategy.FilterStartTimer and aspxETextChanged functions are not documented. Sorry.
3. Point the ASPxComboBox to the OnComboBoxInit event:
The ASPxComboBox in this code above uses the same functionality as the one in this 'Callback mode' demo.
ASPxComboBox - How to enable speech recognition in Google Chrome web browser
You can also download the full source code and project right from code central.
Watch this short 1 minute screencast to see how the voice-to-text integration works with the ASPxComboBox:
Chrome Speech Recognition and ASP.NET Combo Box
<disclaimer>
1. This feature will only work with Google's Chrome Web browser version 11 and above. I explain why below.
2. Two undocumented DevExpress client-side functions are used for this code. However, this sample is still simple to implement.
This how-to is 99.9% for fun and I cannot guarantee that Google Chrome may change this feature in the future which could break the code I'm about to show you.
You've been warned. Now let's have some fun…
</disclaimer>
Chrome Speech Recognition
Google's Chrome Browser introduced support for speech recognition with version 11 (back in April 2011):Fresh from the work that we’ve been doing with the HTML Speech Incubator Group, we’ve added support for the HTML speech input API. With this API, developers can give web apps the ability to transcribe your voice to text. When a web page uses this feature, you simply click on an icon and then speak into your computer’s microphone. The recorded audio is sent to speech servers for transcription, after which the text is typed out for you. -Chrome BlogAnd this feature still works in the current version 13 of Chrome which I used for the screencast above.
How-To Enable Speech Recognition
To enable speech recognition in the ASPxComboBox follow these 3 steps:1. Insert a meta-tag to set the language (in case the site language differs from the speech recognition language):
1
2
3
4
| <head runat="server"> <meta http-equiv='Content-Language' content='en-US' /> <title>DevExpress - Fun with Chrome</title> |
1
2
3
4
5
6
7
8
9
10
11
12
| <script type="text/javascript"> function OnComboBoxInit(s) { var input = s.GetInputElement(); input.setAttribute("x-webkit-speech", "x-webkit-speech"); input.onwebkitspeechchange = function (evt) { if(s.filterStrategy && s.filterStrategy.FilterStartTimer) s.filterStrategy.FilterStartTimer(); else aspxETextChanged(s.name); }; }</script> |
3. Point the ASPxComboBox to the OnComboBoxInit event:
1
2
3
4
| <dx:ASPxComboBox ID="ASPxComboBox1" runat="server" IncrementalFilteringMode="Contains" DropDownStyle="DropDown" DataSourceID="AccessDataSource1" TextField="Country" ValueField="Country"> <ClientSideEvents Init="OnComboBoxInit" /></dx:ASPxComboBox> |
What about Internet Explorer?
Currently, Internet Explorer doesn't support speech recognition. There is a possibility that IE may get the speech recognition feature in the future.Download Code
There is a code central demo for this feature which you can try online now:ASPxComboBox - How to enable speech recognition in Google Chrome web browser
You can also download the full source code and project right from code central.
what about this extension
ReplyDeletehttps://chrome.google.com/webstore/detail/aomjekmpappghadlogpigifkghlmebjk/related?hl=en-US