XHTML+Voice in Action

By Jonny Axelsson

July 27th 2011: Please note that Voice only works in Opera on Windows 2000/XP, and we no longer officially support it.

This article builds upon topics in the XHTML+Voice by Example article. Some knowledge of JavaScript and DOM is also assumed.

Make the browser say what you want

X+V isn't limited to canned phrases like "Hello World". It also uses JavaScript variables that can contain any text, including text picked up from the document itself (DOM).

This example not only will speak any text, it will do so on user interaction. "Hello World" in the previous example was spoken as soon as the document loaded, here the browser will stay mum until the user clicks on the button.

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML+Voice 1.0/EN" "xhtml+voice.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
  <title>Example 2: Make it talk</title>
  <form xmlns="http://www.w3.org/2001/vxml" id="talker">
    <block>
     I always believed that 
        <value expr="document.getElementById('phrase').value"/>
    </block> [1]
  </form>
</head>

<body>
  <h1>Make Opera say what you want</h1>
  <p>
    <label>
      Text: <input type="text" id="phrase" 
         value="you are the greatest." size="30"/>
    </label> [2]
    <button ev:event="click" 
               ev:handler="#talker">Say it now!</button> [3]
  </p>
</body>
</html>

Try it in action.

[1] This code will make the browser say "I always believed that" followed by whatever is currently the value of the element with the "phrase" id .
[2] The "phrase" input element contains the phrase to be spoken. Here you can type in any text you want. By default it is "you are the greatest.".
[3] When the button is clicked, the "talker" handler (the voice form) is activated.

Spoken colors

The example above didn't do much with the information it got from the user. This example will let the user control the color used on the page by a voice command.

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML+Voice 1.0/EN" "xhtml+voice.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
  <title>Example 4: Colorpicker</title>
  <style type="text/css">
     #colorSample {border: thick solid; 
                   background: #EEC; 
                   font-size: 1.27em; 
                   padding: 0.1em}
  </style>
  <form xmlns="http://www.w3.org/2001/vxml" id="sayHello"> [1]
    <block>Hello. Voice is installed.</block>
  </form>
  <form xmlns="http://www.w3.org/2001/vxml" id="chooseColor"> [2]
    <field name="favColor">
      <prompt>What is your favourite color?</prompt>
      <grammar><![CDATA[
      #JSGF V1.0;
      grammar color;
        public <color> = Red | Pink | Purple | 
                         Blue | Green |  Maroon | Orange | 
                         Black | Gray | Seagreen; ]]>
      </grammar> 
      
     <nomatch>I didn't quite catch that. </nomatch> [3]
    </field>
    <filled> <!-- Give aural and visual feedback -->
        I've been told your favorite color is <value expr="favColor"/>.
       <assign name="document.getElementById('textbox').value"
               expr="'Color: '+ favColor"/> [4]
       <assign name="document.getElementById('colorSample').style.color" 
               expr="favColor"/> [5]
   </filled>
  </form>
</head>
 
<body ev:event="load" ev:handler="#sayHello"> [1]
  <h1>What is your favorite color?</h1>
  <p id="colorSample">Is this the one? You can choose between the all these 
     pretty colors: Red | Pink | Purple | Blue | Green | 
               Maroon | Orange | Black | Gray | Seagreen. </p>
  <p><button ev:event="click" ev:handler="#chooseColor">
     Change color now
  </button> [2]
  <input ev:event="focus" ev:handler="#chooseColor" id="textbox"/> [2]
  </p>
</body>
</html>

[1] An introductory message, "Hello. Voice is installed.", is uttered on page load.
[2]Clicking on the button or entering the textbox will trigger the color picker voice form.
[3] This is an example of built-in voice event handling. Here it is used to specify a different error message than the default when the browser couldn't find any matching option from the grammar.
[4] Give feedback on what color was chosen.
[6] Turn the 'colorSample' element into the chosen color.

Try it in action

A browser that is going places

One of the most common tasks is to go to a new page when you are done with this one. You can do this in the HTML part of the document by submitting a form or following a link, but you can also trigger a link directly in the voice forms by a little JavaScript. Starting with the browser selection example, adding <assign name="window.location" expr="'URL-to-next-page'"/> to the 'filled' element is all it takes.

<field name="browser">
  <prompt>What is the name of the best browser?</prompt>
  <option>Opera</option>
  <nomatch>Try again.</nomatch>
  <filled>
    Yes, that's a fact. Opera is the best browser, full of wonderful features. 
        <assign name="window.location" expr="'http://www.opera.com/features/'"/>
  </filled>
</field>

Try it in action

You can take advantage of that already in the grammer, both with 'option' and with 'grammar'. With option it would look like this:

<field name="browser">
  <option value="URL-to-next-page">Opera</option>
  <filled>
    <assign name="window.location" expr="browser"/>
  </filled>
</field>

With grammar it could look like this:

<field name="browser">
  <grammar><![CDATA[
    #JSGF V1.0;
    grammar link;
    public <link> = Opera{URL-to-next-page}
  ]]></grammar> 
  <filled>
    <assign name="window.location" expr="browser"/>
  </filled>
</field>

Implementation notes

The XHTML+Voice profile is experimental, with limited support. VoiceXML and the other specifications used here are W3C standards, but it is not certain a future multimodal specification will be like this. Furthermore the browser support is severely limited. Only some versions of the Netfront and Opera browsers support X+V. It is instructive to note that DOM programming will work for X+V just like any other XML language.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

XHTML+Voice in Action

Make the browser say what you want

Spoken colors

A browser that is going places

Implementation notes

Comments