CodeProject: Speech Tic-Tac-Toe. Free source code and programming help

Report Article

Discuss

Send to a friend

13 votes for this Article.

Popularity: 3.75 Rating: 3.37 out of 5

Download source - 242 Kb

Click here to play the demo (User need to install Microsoft Internet Explorer Speech Add-in 1.0 to play the demo).

Introduction

This demonstration program enables you to use the Microsoft Speech Application SDK to create a voice recognition-enabled web application. I used a tic-tac-toe game (modified from a JavaScript version). This game can be played by using speech controls and a mike, without keyboard and mouse input. This is a very simple program, but it will give you an idea on how to let your web applications interact with speech controls.

How to play:

User plays the X's and the computer plays the O's.
User selects a square by saying the number-name of the square into the mike.

How it works:

This is a multimodal application (a web application that uses speech in conjunction with a graphical interface to interact with the user). In the program, I use three kinds of Speech objects. They are grammar, prompt and listen:

Speech Objects	Object names
`Grammar` objects	`toplevel` `position`
`Prompt` objects	`welcomePrompt` `tiedPrompt` `losePrompt` `winPrompt`
`Listen` objects	`askPostionListen`

Speech associations:

When the program opens, welcomePrompt plays the instructions, using the text-to-speech engine. (The prompt object is associated with the TTS engine.)
When the text reading is complete, askPositionListen turns on the speech recording function. (The listenprompt object is associated with the speech recognition engine.)
When a word is recorded and it matches a rule of the grammar, the program will call a function yourChoice() such as OnClientReco=yourChoice(), and displays an "X" into the selected square. (In the original JavaScript version of tic-tac-toe, the function yourChoice() is an onClick function such as onClick = yourChoice().)

The following picture shows how an object prompt is associated with the speech recognition engine:

Using the code

Included in the program files are: Microsoft.Speech.Web.dll and source JavaScript file Function.js. All the functions that are needed to play the game are in the files. The following namespace and schemas will be added to the program automatically if you are using Microsoft SASDK.

<%@ Register TagPrefix="speech" Namespace="Microsoft.Speech.Web.UI" 
        Assembly="Microsoft.Speech.Web, Version=1.0.3200.0, Culture=neutral, 
        PublicKeyToken=31bf3856ad364e35" %>

<body onload="OnLoad()" xmlns:speech="http://schemas.microsoft.com/speech/WebControls"
        MS_POSITIONING="GridLayout">

First, let's create the rules of the grammar.

Rule 1 - toplevel:

Add a RuleRef and name it Position as seen above and set its script tag. Use the example image below.

Rule 2 - position

Add a list and some phrases and name them. The following chart shows the tic-tac-toe script tags. The one...nine represents the name of the squares. Also, select the Constant and type the name in the "Enter value" text box for each Script tag.

The code will be automatically generated, and will look like the box below.

We can find the rules for toplevel and Position in the code.

The toplevel rule uses the ruleref element to reference the Position rule.
The <item> represents a phrase. Each phrase can only have one word in this grammar.
The script expression, $._value= "xx", contained in the tag element, is executed when the speech recognizer follows a path through the grammar and finds the words or phrases that the tag element follows.
The <one-of> represents a word list, or dictionary. When a user speaks one of the words in the list, the recognition engine recognizes that word.

    <rule id="toplevel" scope="public">
        <ruleref uri="#Position" type="application/srgs+xml"/>
        <tag>$.Position = $$</tag>
    </rule>
    <rule id="Position" scope="public">
        <one-of>
            <item>
                <item>one</item>
                <tag>$._value = "one"</tag>
            </item>
            <item>
                <item>two</item>
                <tag>$._value = "two"</tag>
            </item>
            .
            .
            .        
        </one-of>
    </rule>

The second step is to add a listen element and set its properties like this:

The code will be generated as in the box below.

The listen element specifies possible speech inputs and controls the speech recognition processes and results. Grammar is one of the main elements of the listen object. In the following, OnClientReco= "yourChoice" means that if the speech is successfully recorded, the function yourChoice will be called. The function is the same as onClick="yourChoice" in the original JavaScript program. If no recording, or silence, or random speech is detected, the listen will start again. The codes are: OnClientSilence= "ListenStart", OnClientNoReco= "ListenStart" or OnClientSpeechDetected= "ListenStart".

<speech:listen id= "AskPositionListen" runat="server" OnClientSilence=  
      "ListenStart" OnClientNoReco= "ListenStart" 
      OnClientSpeechDetected= "ListenStart" 
      OnClientReco= "yourChoice" MaxTimeout="15000" 
      EndSilence=  "1000" InitialTimeout= "2000">
    <Grammars> 
        <speech:Grammar Src="Grammars/SpeechTicTacToe.grxml#toplevel" 
            ID= "AskPositionListen_Grammar1">  
        </speech:Grammar> 
    </Grammars>
    <Bindings>
        <speech:Bind></speech:Bind>
    </Bindings>
</speech:listen>

For example, once the user speaks a word and it activates the speech recognition engine, yourChoice will be called. The code: event.srcElement.recoResult.selectSingleNode("Position"); will return the value of the word.

function yourChoice()
{
    //the theNode catches the result of the speech

    var theNode = event.srcElement.recoResult.selectSingleNode("Position");

    //the chName catches the result of the speech 

    //in a string format. The string should be 

    //one of the square's name.

    var chName;
    chName = theNode.text;

    //display the X image in the chName square.

    document.images[chName].src = "x.jpg";
    .
    .
    .

Now, add the prompt and set its properties:

<speech:Prompt id="welcomePrompt" runat= "server">
    <InlineContent>
      Welcome to Speech  Tic-Tac-Toe! You play as theX's and the computer is the O's. 
      Select the square you want to put your X into by saying them.Good Luck!
    </InlineContent> 
</speech:Prompt>

The following shows how to use the prompt and listen objects in JavaScript.

function OnLoad(){
    //text-to-speech engine start the welcome prompt

    welcomePrompt.Start();

    //called the listen function

    ListenStart();
}

function ListenStart(){
    //speech recognization engine start to listen speech

    askPositionListen.Start();
}

User requirement

Users need to install Microsoft Internet Explorer Speech Add-in 1.0 in their computer in order to play the game.

Developers need to install Microsoft Speech Application SDK v1.0 Beta 3 in order to use the speech objects.

History

5/6/2004 - first post.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Kwong-Leung kong

Occupation:	Web Developer
Location:	United States

Other popular Applications & Tools articles:

ToDoList 5.6.3 - A simple but effective way to keep on top of your tasks
A hierarchical task manager with native XML support for custom reporting.
Visual Leak Detector - Enhanced Memory Leak Detection for Visual C++
A memory leak detector for Visual C++ packaged in an easy to use library!
KeePass Password Safe
KeePass is a free, open-source, light-weight and easy-to-use password safe.
VC++7 to VC++6 project converter
This tool automatically converts Visual C++ 7.0 projects back to Visual C++ 6.0 projects.
Super ImageList and ToolBar generator
A drag & drop ImageList and ToolBar generator . Simplifies creation of large image lists and supports effects .

Article Top

You must Sign In to use this message board.

Msgs 1 to 12 of 12 (Total in Forum: 12) (Refresh)

FirstPrevNext

Subject

Author

Date

javascript

ffw_me

9:37 26 Oct '06

Can you point me to the javascript code you based this project on? Your link does not direct me there. Great learning article.
Sign In·View Thread·PermaLink

Getting error on Tic-Tac-Toe

venkatttttttttttt

20:12 22 Aug '06

While working with this application im getting an error like

Prompt error(-1) : Geeneric Error Class not registerd.

i was followed all the all steps what you mentioned like

I installed Microsoft speech server on my system
And Add-INs for internet explorer as mentioned.

But im getting an error on attached Debugger

Prompt Error(-1) : Generic Error : Class not registered

I included all namespaces as you mentioned in this article.

Im really frustrated with this application.

can you suggest me why im getting this error.

any suggestion can be appreciable.

Regards,

Venkat.K

trtyrt trhrt r rtrtytrr t

Error regarding TicTacToe

venkatttttttttttt

2:47 22 Aug '06

Hi im venkat, when im try to implement this application getting an error like SpeechConsole Info: I was successfully installed Microsoft speech server im really frustrated with this problem.why im getting this. i included the xml namespaces and microsoft.speech.web.dll controls are displaying properly. pls anybody can send me the suggestions regards Venkat trtyrt trhrt r rtrtytrr t
Sign In·View Thread·PermaLink

Program Works, but....

OlfYgg

18:50 10 Nov '05

It does the speech recognition, but none of the prompts are heard... And they do not appear to run in that monitoring window.
Sign In·View Thread·PermaLink

Re: Program Works, but....

OlfYgg

19:12 10 Nov '05

Boy I'm a putz.... Or Am I. The Speech console that pops up - every time I start an application - sets it up to not play prompts. How useless is that?
Sign In·View Thread·PermaLink

About recognition

sinmorn

17:55 24 May '04

hi: Sir,I am using the Speech recognition engine of the Microsoft Speech SDK5.1,and I want the computer can recognize my voice and display the words onto a richEdit box,but I don't know how to realize that ,could you help me?I'm in hurry! Thank you very much.My email:sus396@sohu.com Best wishes to you!
Sign In·View Thread·PermaLink

Your Demo

Albert Pascual

13:18 7 May '04

YOur demo does not work
Sign In·View Thread·PermaLink

Re: Your Demo leppie 14:41 7 May '04

and for some strange reason , the scrollbar has disappeared too, I think Chris needs to have a look at that! ^{top secret AdvancedTextBox}
Sign In·View Thread·PermaLink

Re: Your Demo

Albert Pascual

14:48 7 May '04

How does it work anyway if is on a browser? My broswer does not work with a microphone without an Active X!!!??
Sign In·View Thread·PermaLink

Re: Your Demo

Kwong-Leung kong

18:43 7 May '04

Hi, Albert Pascual, Thanks for rating. To have the demo work, you need to install Microsoft Internet Explorer Speech Add-in 1.0 to your computer.
Sign In·View Thread·PermaLink

Re: Mine works

curryme

19:05 7 May '04

It works pretty good on my computer. But I have to say, it is a pain to install all the stuff. Maybe we can find something better. Anyway, voice recognition is hot. Imagine you can sell cookies/pizza online?
Sign In·View Thread·PermaLink

Re: Your Demo

syemhusa

4:59 23 Dec '06

Any body encountered "Interface not registered" : Error ... plz plz plz help.. i m tearing my hairs now... I get this error when the first QA awaiting command is played Regards, Murtaza Rizvi
Sign In·View Thread·PermaLink

Last Visit: Wednesday, August 20, 2008 8:03 AM Last Update:Wednesday, August 20, 2008 8:03 AM

General News Question Answer Joke Rant Admin