Click here to Skip to main content
15,867,488 members
Articles / Web Development / ASP.NET
Article

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

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
12 Jul 2013CPOL2 min read 8.5K   3  
Talk to your computer with Chrome and DevExpress ASP.NET Combo Box

This article is for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers

Introduction

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):

XML
<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:

JavaScript
<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:

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
.Net, C#, SQL, Delphi

Comments and Discussions

 
-- There are no messages in this forum --