用 XHTML+Voice 开发多模式网站并用 Firefox+Tadpole 进行语音浏览（3）

look_w

我们要在 reservation_query_form 这个语音表单里为可视表单中的几组输入控件分别创建对应的语音输入域（field）。一个语音输入域里一般包括输入语法规范（grammar），语音提示（prompt），获正确输入后行为（filled）和输入异常处理（catch）等成员元素。
下面是我们为填写城市名称的文本输入框编写的语音输入域。其语法规范是用户应说出一组城市名称中的一个。在浏览器执行这个语音输入域时，首先会用语音合成引擎读出 <vxml:prompt> 元素的内容，然后等待用户的语音输入。之后语音识别引擎会对输入语音进行识别处理，如果用户输入的是一段静音、输入的语音无法识别、识别的结果与语法规范不匹配或者用户说了“help”这个词，浏览器都会跳转执行 <vxml:catch> 元素的内容，即用语音合成播放“For example, say Chicago.”示例用户如何正确输入。而如果语音识别引擎断定用户的输入符合语法规范，则将识别结果保存在与这个语音输入域的名字同名的字符串变量中，然后浏览器会执行 <vxml:filled> 元素中的内容，即 <vxml:assign> 元素，将识别出的城市名称填写到对应的 XHTML 文字输入框里。
清单 5. 选择城市的语音输入域

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<vxml:field name="voice_field_city" modal="true"> <vxml:grammar> <![CDATA[ #JSGF V1.0; grammar query_city; public <city> = Chicago | New York | Los Angles | Las Vegas; ]]> </vxml:grammar> <vxml:prompt>Please choose a city</vxml:prompt> <vxml:catch event="help nomatch noinput">      For example, say Chicago.</vxml:catch> <vxml:filled> <vxml:assign name="document.getElementById('inputCity').value" expr="voice_field_city"/> </vxml:filled> </vxml:field>

酒店档次选择单选按钮对应的语音输入域 voice_field_rating 与 voice_field_city 类似。所不同的是我们在 <vxml:filled> 元素里用 <vxml:if>、<vxml:elseif> 和 <vxml:else> 对输入进行判断，根据结果分别标记选中不同的单选按钮。
清单 6. 选择酒店档次的语音输入域

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<vxml:field name="voice_field_rating" modal="true"> <vxml:grammar> <![CDATA[ #JSGF V1.0; grammar query_rating; public <rating> = three star | four star | five star ; ]]> </vxml:grammar> <vxml:prompt>Please choose the rating of the hotel. </vxml:prompt> <vxml:catch event="help nomatch noinput">Say three star, four star or five star. </vxml:catch> <vxml:filled> <vxml:if cond="voice_field_rating == 'three star'"> <vxml:assign name="document.getElementById('ratingThreeStar').checked" expr="true"/> <vxml:elseif cond="voice_field_rating == 'four star'"/> <vxml:assign name="document.getElementById('ratingFourStar').checked" expr="true"/> <vxml:else/> <vxml:assign name="document.getElementById('ratingFiveStar').checked" expr="true"/> </vxml:if> </vxml:filled> </vxml:field>

酒店房间类型选择是一组复选按钮，它们对应了 voice_field_type 语音输入域。其语法规范比之前的多选一的语法规范稍微复杂一点。第一层 <type> 表示多种房间类型种的一种，第二层 <types> 表示用户可以连着说多种房间类型，中间用停顿或者说“and”来分隔。在 <vxml:filled> 内 <vxml:if> 标签的条件判断表达式中用到了 Javascript 字符串类型的 search 方法，判断用户的整句输入中是否出现了各种房间类型，并对出现的房间类型对应的复选框进行选中标记。
清单 7. 选择房间类型的语音输入域

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<vxml:field name="voice_field_type" modal="true"> <vxml:grammar> <![CDATA[ #JSGF V1.0; grammar query_type; <type> = standard | deluxe | suite; public <types> = (<type> [and]) + ; ]]> </vxml:grammar> <vxml:prompt>      Please select the room types you would like to query. </vxml:prompt> <vxml:catch event="help nomatch noinput">For example, say standard and deluxe. </vxml:catch> <vxml:filled> <vxml:if cond="voice_field_type.search(/standard/i) != -1"> <vxml:assign name="document.getElementById('typeStandard').checked" expr="true"/> </vxml:if> <vxml:if cond="voice_field_type.search(/deluxe/i) != -1"> <vxml:assign name="document.getElementById('typeDeluxe').checked" expr="true"/> </vxml:if> <vxml:if cond="voice_field_type.search(/suite/i) != -1"> <vxml:assign name="document.getElementById('typeSuite').checked" expr="true"/> </vxml:if> </vxml:filled> </vxml:field>

最后是提交 / 重置按钮对应的语音输入域。对这个语音输入域我们将其属性设置为单选（“boolean”），表示其使用 VoiceXML 内置的是非判断语法规范，用户可以说“yes”、“true”或“no”、“false”作为输入。浏览器先复述一遍用户的输入内容，然后识别并判断用户输入的结果，如果用户确认输入，则用 <vxml:value> 执行提交按钮的 click 方法，并用 <vxml:return/> 从本输入域返回到上一层表单，从而结束整个语音表单。如果用户取消输入，则在执行重置按钮 click 方法之后还会用 <vxml:clear> 对语音表单里所有输入域同名变量即所有识别结果进行清空，然后用 <vxml:reprompt/> 指示浏览器从头执行这个语音表单。用户则需要根据提示重新用语音生成查询表单。
清单 8. 提交 / 重置语音输入域

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<vxml:field name="confirm_query" type="boolean" modal="true" > <vxml:prompt> Do you want to query for the reservation status of <vxml:value expr="voice_field_type"/> room typesof <vxml:value expr="voice_field_rating"/> hotels in <vxml:value expr="voice_field_city"/> ?</vxml:prompt> <vxml:filled> <vxml:if cond="confirm_query == true"> Now the query is going to be submitted. <vxml:value expr="document.getElementById('submitButton').click()"/> <vxml:return/> <vxml:else/> <vxml:value expr="document.getElementById('resetButton').click()"/> <vxml:clear namelist="voice_field_city voice_field_rating voice_field_type confirm_query"/> <vxml:reprompt/> </vxml:if> </vxml:filled> </vxml:field>

到这里，我们就完成了一个完整的多模式表单网页。为了改进用户体验，我们还可以对其中的语音提示和语法规范进行改进，也可以改进语音问答流程或者提供更丰富的语音控制的跳转。而为了网页维护方便，我们可以将语法规范从静态脚本改为在服务器端动态生成。
读者可以参考本文中的例子和 X+V 规范编写自己的多模式网页应用。在此有两个需要注意的地方：一是 Firefox+Tadpole 只能正确解析以 xhtml 为后缀名的 X+V 多模式网页，请不要用 jsp 或 html 等 URL 映射您的网页；二是目前 Tadpole 的版本还比较初级，X+V 中的一些内容如 xv:src 和 xv:cancel 等并没有完全实现，其语言选项也暂时只有美国英语一种。