Speech Tic-Tac-Toe






3.42/5 (14 votes)
May 6, 2004
4 min read

122358

2945
A speech recognition demonstration program.
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 |
|
Prompt objects |
|
Listen objects |
|
Speech associations:
- When the program opens,
welcomePrompt
plays the instructions, using the text-to-speech engine. (Theprompt
object is associated with the TTS engine.) - When the text reading is complete,
askPositionListen
turns on the speech recording function. (Thelistenprompt
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 asOnClientReco=yourChoice()
, and displays an "X" into the selected square. (In the original JavaScript version of tic-tac-toe, the functionyourChoice()
is anonClick
function such asonClick = 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 theruleref
element to reference thePosition
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.