Browse DevX
Sign up for e-mail newsletters from DevX


Design and Implement a Voice-only Web Application in ASP.NET : Page 9

This whitepaper demonstrates how to use the Microsoft .NET Speech SDK to build a complete e-commerce starter application. Use these detailed techniques to build your own commerce system that will have your customers browsing, shopping, and making purchases using nothing but the sounds of their voices.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

In-Depth: Browse Feature
Next, we'll show how all of these common elements are used to build the Browse feature. In the CommerceVoice application the user can shop for products by browsing the product catalog. First, the user selects a category from the list of categories and then selects a product from the list of products in that category. Once the product is selected, users can find out more about that product and add it to their shopping cart. Figure 9 shows the interaction diagram.

Figure 9: The Browse interaction diagram shows how users shop for products by browsing the product catalog.
In the CommerceVoice application, there are seven categories and an average of six products per category. Keeping the list of categories and products relatively short seemed to help the usability of the application.

Page Setup
Like almost all pages in the CommerceVoice application, we began the Browse page by adding a new C# Web Form to our project. We then placed a GlobalSpeechElements user control onto the page that provides global commands and the stylesheet used for the speech controls. Grouping common elements like this into a user control accelerated development and provided consistency across the application. Nothing else was required to use the GlobalSpeechElements user control on the Browse page.

Semantic Items
A semantic map control is added next that contains the semantic items we use on the page. Semantic items are generally associated with a particular speech control and contain the user's answer to a question. Text extracted from the SML document returned by the grammar file is placed into the semantic item. For the Browse page, the following semantic items are used:

Semantic Item Name





Holds the category selected by the user.



Holds the product selected by the user.



Used to determine if user said 'Add to Cart'



Number of items of selected product to add to shopping cart

In addition, when the semantic map control is dragged onto the page, a reference to the speech controls is added to the HTML.

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

Dragging any speech control onto the Web form will add this important reference to the page.

Semantic Item States
Semantic items play an important role in controlling the flow of execution on a speech enabled Web form. Semantic items can have three states:

  • Empty: Value is not filled (this is the default state).
  • Needs Confirmation: Value is filled in but confidence is below threshold.
  • Confirmed: The value is filled in and is confirmed.
When the page executes, the RunSpeech engine controls the flow of execution for the controls on the page (i.e. it determines which control to execute next). If the state of all semantic items associated with a QA control is Empty, the RunSpeech engine will activate that QA control. Otherwise, that control will be skipped. In this way, programmatically setting the state of semantic items on a page allows us to customize the flow of execution.

Page Execution
When the Browse page first loads, the list of categories is retrieved from the database and loaded into the CategoryNav SelectableNavigator user control.

private void LoadCategories() { ProductsDB products = new ProductsDB(); SqlDataReader drCategories = products.GetProductCategories(); DataTable dt = new DataTable(); dt.Columns.Add("CategoryID", typeof(int)); dt.Columns.Add("CategoryName", typeof(string)); dt.Columns.Add("CategoryDescription", typeof(string)); dt.Columns.Add("Products", typeof(int)); while (drCategories.Read()) dt.Rows.Add(new object[4] { drCategories[0], drCategories[1], drCategories[2], drCategories[3] }); CategoryNav.Initialize( "CategoryID,CategoryDescription,Products", "CategoryName", dt, "ReturnToMainMenu", "SelectCategory", "CategoryNav_prompt", "CategoryNavInitialStatement_prompt"); }

The ProductsDB component that is being reused from the CommerceWeb application returns a DataReader, which the SelectableNavigator control does not support as a data source. As a result we insert the categories into a DataTable and assign that as the data source of the SelectableNavigator

Only one call to the SelectableNavigator is required to initialize it and load it with category data. Client-side functions specified for OnSelect, OnCancel, etc. are located in the Browse.js file.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date