Talk to your computer with Chrome and DevExpress ASP.NET Combo Box

ASP.NET Team Blog
18 August 2011

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:

Chrome Speech Recognition and DevExpress ASP.NET Combo Box

First, the 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…


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="">
<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)

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

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.


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:

Follow MehulHarry on Twitter

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.