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:

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

Follow MehulHarry on Twitter

7 comment(s)
Fırat Esmer
Fırat Esmer

This is so cool! :)

18 August, 2011
Alejandro Charbonnier
Alejandro Charbonnier

This is really cool Mehul! Great post! :)

Looking for an excuse to implement this :D

18 August, 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Thanks Firat and Alejandro! :)

18 August, 2011
Preetham Reddy
Preetham Reddy

It's awesome... It would be awesome if this feature is available in all the browsers...

Can't wait to use it...

20 August, 2011
Joey Daly
Joey Daly

Haha, great!

23 August, 2011
fabricio medrano
fabricio medrano

Very interesting, now I am applying for a AspxButtonEdit

writing numbers, ejm: 0285632147

but it looks like: 0 2 8 5 6 3 2 1 4 7

So how could I delete all the blanks?

1 September, 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Fabricio,

Not sure what you mean. Could you please contact our support team please?

www.devexpress.com/.../CreateIssue.aspx

Thanks.

1 September, 2011

Please login or register to post comments.