用 XHTML+Voice 开发多模式网站并用 Firefox+Tadpole 进行语音浏览（2）
|
- UID
- 1066743
|
用 XHTML+Voice 开发多模式网站并用 Firefox+Tadpole 进行语音浏览（2）
开发具有语音界面的多模式网站XHTML+Voice (X+V)为了给网站开发者提供一种给网页提供语音互动能力的框架，IBM，Opera 和 Motorola 三家公司在 2001 年向 W3C 提交了 XHTML+Voice 标记语言规范草稿。就像它的名字一样，这个规范是建立在 W3C 已有的 XHTML 和 VoiceXML 规范之上的，它向 XHTML 注入了 VoiceXML 的标签库子集，提供了综合运用现成的 XHTML、XML Events 和 VoiceXML 技术来开发多模式网站的技术指导。不同于广泛应用于各种呼叫中心电话应用开发的 VoiceXML 规范，X+V 不再设计为供专用的互动式语音应答设备 (IVR) 解读，而是可以被任意提供多模式网页浏览的浏览器所解读，包括手持设备的嵌入式浏览器。另外它还具有可以与 XHTML 标签互相调用，在语音对话标签中向 DOM 元素赋值等特点。而在标签语法和运行模式等方面 X+V 中的语音标签库与 VoiceXML 并没有太大的不同。
XHTML+Voice 规范包含了 XHTML Basic 模块 (module)，如基本的 XHTML 表单和表格等，并在其基础上添加了以下标准模块：
- XHTML Scripting 模块。
- XML Event 模块。提供为 VoiceXML 定制的事件类型和处理机制，使开发者能为 XHTML 定义语音互动行为。
- 一部分 VoiceXML 模块，给 XHTML 提供语音扩展。其顶级标签是 <form>。
- XHTML+Voice Extension 模块，提供视觉模块和语音模块之间的通讯和互操作。
XHTML+Voice 通过下面所示的名字空间声明来引入 VoiceXML，XML Events 和 XHTML+Voice Extension 的标签和属性。
清单 1. XHTML+Voice 的名字空间声明1
2
3
4
| <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:vxml="http://www.w3.org/2001/vxml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xv="http://www.voicexml.org/2002/xhtml+voice">
|
这几个模块之间的相互关系如下图所示。普通 XHTML 元素和 VoiceXML 元素之间通过 Event 来进行通讯和跳转。VoiceXML 还可以通过 Javascript 代码改变 XHTML 元素的状态，如填充文本框，按下某个单选按钮等。另外 VoiceXML 的作用范围只在浏览器之内，它并不参与浏览器与服务器之间的交互。向服务器发出的请求和从其得到的响应仍与普通网页一样。
图 2. XHTML+Voice 模块的结构和交互 多模式网站的开发开发多模式网站一般可以遵循以下几个步骤：
- 对网站内容、平台和用户使用情况进行分析，判断是否有必要提供语音模式。
- 遵循 XHTML 规范按照一般网站开发方式完成网页的可视部分。
- 为需要进行语音输入的表单或需要语音播放的文字编写对应的 VoiceXML 内容。
- 对应于表单中的动态内容，将 VoiceXML 中的语法规则（Grammar）和 TTS 文字由静态内容改为从数据库实时生成。
下面我们将用一个酒店预定查询网页的开发作为例子说明如何编写多模式网页，并用 Tadpole 对其语音模式进行验证。
下面是酒店预定查询的 XHTML 表单代码。其中有五种 input 标签，包括一个文本输入框，一组单选按钮，一组多选按钮，一个提交按钮和一个重置按钮。
图 3. 酒店预订查询网页可视表单 清单 2. 酒店预定查询网页的 XHTML 表单1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <form id="hotel_query" method="post" action="resChk.jsp">
<b>Please enter city</b>
<input id="inputCity" name="inputCity" type="text"/><br/><br/>
<b>Hotel Rating:</b><br/>
<input type="radio" name="hotelRating" id="ratingThreeStar"/>
Three-Star
<input type="radio" name="hotelRating" id="ratingFourStar"/>
Four-Star
<input type="radio" name="hotelRating" id="ratingFiveStar"/>
Five-Star
<br/><br/>
<b>Room Type:</b><br/>
<input type="checkbox" name="roomType" id="typeStandard"/>
Standard
<input type="checkbox" name="roomType" id="typeDeluxe"/>
Deluxe
<input type="checkbox" name="roomType" id="typeSuite"/>
Suite
<br/><br/><br/><br/>
<input type="submit" id="submitButton" value="Submit"/>
<input type="reset" id="resetButton" value="Reset"/>
</form>
|
下面我们为这个普通 XHTML 表单创建一个语音模式的表单。在 head 节点里添加下面的代码。注意在 X+V 中所有从 VoiceXML 中继承的元素标签其名称前要加上“vxml:”前缀。
清单 3. 语音模式表单的顶级元素1
| <vxml:form id="reservation_query_form"></vxml:form>
|
为了在页面加载后让浏览器马上执行这个语音表单，我们将 <body> 标签改为以下代码。
清单 4. 用隐藏的 input 让浏览器在页面加载后执行语音表单1
2
3
| <body onload="document.getElementById('dummy').focus()">
<input type="text" style="position:absolute; top:-1000px; left:-1000px" id="dummy"
ev:event="focus" ev:handler="#reservation_query_form"/>
|
这里用到了一个隐藏 input 元素，它获得焦点后，将向 DOM 树上层抛出 focus 事件，而这个事件的指定处理器就是 reservation_query_form。我们之所以不在 body 标签里直接定义 load 事件的处理器是因为 Firefox 本身的 bug 使得 body 的 load 事件不能被正确处理。 |
|
|
|
|
|
