<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//W3C/DTD XHTML+Voice 1.2 /EN' 'http://www.voicexml.org/specs/multimodal/x+v/12/dtd/xhtml+voice12.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:ev='http://www.w3.org/2001/xml-events'>
<head>
<link rel='stylesheet' href='http://pabi3.com/modules/items/voice.css' type='text/css' media='all' />
<form xmlns='http://www.w3.org/2001/vxml' id='title'>
<block>
The article Voice implementation via XHTML+Voice is written by PaBi3
</block>
</form>
<form xmlns='http://www.w3.org/2001/vxml' id='body'>
<block>

If you have a browser supporting the voice feature you can create a spoken webpage.
Voice browser is a webbrowser that can generate voice output and interpret
voice input. The only one voice browser in the world is
Opera.
</block>
</form>
<form xmlns='http://www.w3.org/2001/vxml' id='full'>
<block>

I'm writing this article in english because I need to show you a sample of a spoken
webpage. Opera doesn't support slovak language well yet. Therefore, if you try to
write something in slovak Opera will be gabbling.
To see (and hear) how the spoken webpage works follow  
this link.



Spoken webpage that starts speaking after loading:

&lt;!DOCTYPE html PUBLIC '-//W3C/DTD XHTML+Voice 1.2/EN' 'http://www.voicexml.org/specs/multimodal/x+v/12/dtd/xhtml+voice12.dtd'&gt;
&lt;html xmlns='http://www.w3.org/1999/xhtml' xmlns:ev='http://www.w3.org/2001/xml-events'&gt;
&lt;head&gt;
  &lt;form xmlns='http://www.w3.org/2001/vxml' id='welcome'&gt;
    &lt;block&gt;
      Welcome to my site!
    &lt;/block&gt;
  &lt;/form&gt;
&lt;/head&gt;
&lt;body ev:event='load' ev:handler='#welcome'&gt;
&lt;h1&gt;Welcome to my site!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;


Spoken webpage that starts speaking after clicking the button:

&lt;!DOCTYPE html PUBLIC '-//W3C/DTD XHTML+Voice 1.2/EN' 'http://www.voicexml.org/specs/multimodal/x+v/12/dtd/xhtml+voice12.dtd'&gt;
&lt;html xmlns='http://www.w3.org/1999/xhtml' xmlns:ev='http://www.w3.org/2001/xml-events'&gt;
&lt;head&gt;
  &lt;style type='text/css'&gt;
  * {
    margin:0;
    padding:0;
  }
  ul {
    list-style-type:none;
  }
  ul li {
    cursor:pointer;
    float:left;
    display:block;
    padding:0.5em 1em 0.5em 1em;
    border:0.25em solid #ffffcc;
    text-align:center;
    font-weight:bold;
    color:#ffffff;
    background:#003366;
  }
  ul li:hover {
    border:0.25em solid #003366;
    color:#003366;
    background:#ffffcc;
  }
  &lt;/style&gt;
  &lt;form xmlns='http://www.w3.org/2001/vxml' id='txt1'&gt;
    &lt;block&gt;
      This is a 1st button.
    &lt;/block&gt;
  &lt;/form&gt;
  &lt;form xmlns='http://www.w3.org/2001/vxml' id='txt2'&gt;
    &lt;block&gt;
      This is a 2nd button.
    &lt;/block&gt;
  &lt;/form&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul&gt;
  &lt;li ev:event='click' ev:handler='#txt1'&gt;Part 1&lt;/li&gt;
  &lt;li ev:event='click' ev:handler='#txt2'&gt;Part 2&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;


From now on you can hear every article on PaBi3.com in it's spoken version.
Just click the  button
placed between the article and comments.  


References and further information

XHTML+Voice Profile 1.2
Adding Voice to XHTML
VoiceXMLReview
</block>
</form>
<base href='http://pabi3.com/' />
<title>Voice implementation via XHTML+Voice</title>
</head>
<body ev:event='load' ev:handler='#title'>
<a href='http://pabi3.com/blog/voice-implementation-via-xhtml-voice/' title='Návrat'>Návrat</a>
<h1 style='padding:0.5em;'>Voice implementation via XHTML+Voice</h1>
<ul>
<li ev:event='click' ev:handler='#body'>Speak introduction</li>
<li ev:event='click' ev:handler='#full'>Speak full</li>
</ul>
</body>
</html>
