Check out how to enable speech-recognition for the DevExpress 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:
<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 Blog
And 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):
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv='Content-Language' content='en-US' />
<title>DevExpress - Fun with Chrome</title>
2. Override the ASPxClientComboBox's client-side Init event:
<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>
Please note that s.filterStrategy.FilterStartTimer and aspxETextChanged functions are not documented. Sorry.
3. Point the ASPxComboBox to the OnComboBoxInit event:
<dx:ASPxComboBox ID="ASPxComboBox1" runat="server" IncrementalFilteringMode="Contains" DropDownStyle="DropDown"
DataSourceID="AccessDataSource1" TextField="Country" ValueField="Country">
<ClientSideEvents Init="OnComboBoxInit" />
</dx:ASPxComboBox>
The ASPxComboBox in this code above uses the same functionality as the one in this 'Callback mode' demo.
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.
Summary
The how-to code above shows you a simple way to enable speech recognition for the ASPxComboBox in Chrome version 11 and above. Try it and then drop me a line below with your thoughts. Thanks.
DXperience? What's That?
DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/
