As I mentioned previously over on our Voxeo Talks blog, I’m going to walk through here in this blog several of the demonstrations that I did at the O’Reilly Open Source Convention (OSCON) back in July. The slide deck is embedded in the previous post, and I’m going to jump right to slide 48 where I began Demo #1: Is Twitter Down?
This was just a short little demo that was designed to show how VoiceXML can be used with embedded JavaScript/ECMAScript. It performs three basic steps:
- Connects to www.istwitterdown.com
- Uses JavaScript to parse the result
- Relays result to caller using Text-To-Speech
If you’d like to hear it, you can actually call it – but do note the Big Caveat noted farther down in the article – at either of these numbers:
WALKING THE CODE
So let’s take a walk through the code. The first part is simply the initial VoiceXML starting statements, a declaration of a variable called “MyData” and the start of a form called “F1″:
<?xml version="1.0" encoding="UTF-8"?>
<vxml version = "2.1">
<var name="MyData"/>
<form id="F1">
The next part is a JavaScript function that uses the JavaScript “getElementsByTagName” function to walk the HTML of the page that is loaded in:
<script>
<![CDATA[
function GetData(d,t,n) {
return (d.getElementsByTagName(t).item(n).firstChild.data);
}
]]>
</script>
Now I can’t claim credit for this code – I really just modified the example provided in the VoiceXML documentation for the <data> element. The way to think about it is this – the system loads the entire document requested by the <data> element into memory as an XML tree (even though it is in fact HTML). The ‘getElementsByTagName’ function then walks the XML tree to find the tag requested.
Let’s look at how I called the function to see how this makes sense:
<block>
<data name="MyData" src="http://www.istwitterdown.com/"/>
<assign name="status" expr="GetData(MyData,'a',0)"/>
Now the first line uses the <data> command in VoiceXML to retrieve the contents of the web page at www.istwitterdown.com and assign that to a variable called “MyData”.
The second line calls the JavaScript function above with the “MyData” variable and says that I am interested in all the <a> tags and specifically the first <a> tag (numbered “0″). Now to figure out what tag I wanted, I didn’t honestly do anything overly brilliant. I just went to www.istwitterdown.com, did a “View Page Source” in my browser and then looked for where the word “No” appeared in the body text. Now this site happens to have a very simple page structure and so finding the node to use was trivial:
<body>
<h1><a href="link removed">No</a></h1>
So the site had the content I wanted (“No” or “Yes”) right in the very first <a> tag. Filling in the contents of the getElementsByTagName call with the variables sent to the JavaScript function, it looked like this:
d.getElementsByTagName('a').item(0).firstChild.data
Which translates to wanting the “data” of the first <a> tag in the document. In this case, “No” or “Yes”.
This data is then assigned to the VoiceXML variable “status”.
The rest of the VoiceXML app is then simply branching on what the “status” variable is. If it is “No”, then Twitter is up. (A bit of a double negative kind of thing going on.) If it is anything else, the site is down:
<if cond="status=='No'">
<prompt>Twitter is currently up. Yea!</prompt>
<else/>
<prompt>Twitter is currently down. </prompt>
</if>
</block>
</form>
</vxml>
I then close off the block, the form and the VXML file. Note that I could have checked to see if status=='Yes' but I just made the assumption that if it was not “No” then there was a problem with Twitter.
THE BIG CAVEAT
Which does bring me to the big caveat of this application – because I was relying on some other web site (istwitterdown.com in this case) I made a big assumption that the external site would work!
It didn’t.
When I was out at OSCON, I was delighted by the fact that at one point Twitter was actually down! However, throughout all the time that Twitter was down and despite multiple browser hard refreshes, the www.istwitterdown.com site always said “No”, meaning Twitter was up.
Oops.
Now, the site did work in the past. I know because I used it successfully when Twitter was going up and down earlier this year. However, sometime along the way whatever logic the folks at the site were using to detect that Twitter was down seemed to stop working. Or, at least it stopped working on the day that I was testing it. Maybe it’s working now… I don’t know… the good news is that Twitter hasn’t been down much at all in recent weeks.
Anyway, it’s a good lesson that if you rely on external sites, you do need to ensure that the external site is in fact giving you the correct data that you want.
WRAPPING UP
I hope this little example gave you a useful glimpse into how VoiceXML’s <data> tag can be used to pull in web pages and how JavaScript can be used to parse those web pages. More information can be found on the VoiceXML documentation page for the data element. I would encourage you to read both the main documentation page as well as the comments to that page.
In my next blog posts walking through my subsequent OSCON 2008 demos, I’ll explore what else can be done with the data element and other tools. Stay tuned…
THE WHOLE CODE
For those of you who want to do a straight copy-and-paste to play with the code, here it is in its entirety:
<?xml version="1.0" encoding="UTF-8"?>
<vxml version = "2.1">
<var name="MyData"/>
<form id="F1">
<script>
<![CDATA[
function GetData(d,t,n) {
return (d.getElementsByTagName(t).item(n).firstChild.data);
}
]]>
</script>
<block>
<data name="MyData" src="http://www.istwitterdown.com/"/>
<assign name="status" expr="GetData(MyData,'a',0)"/>
<if cond="status=='No'">
<prompt>Twitter is currently up. Yea!</prompt>
<else/>
<prompt>Twitter is currently down. </prompt>
</if>
</block>
</form>
</vxml>
Technorati Tags:
voicexml, voxeo, javascript, ecmascript, oscon, oscon2008
If you found this post interesting or helpful, please consider either
subscribing via RSS, becoming
a fan on Facebook, or
following us on Twitter.
Did you miss our free webinar last week about how you can build a “multi-channel” application that interacts with customers across voice, SMS, IM, mobile web and Twitter?
Well, out at 
So what’s going on here? At a high level, you called into our servers where an XML document outlined a series of prompts, collected some information and then sent the result over to a Twitter account for posting. (If you aren’t familiar with Twitter, 
Before I start walking through the code, let’s talk about the version of XML I am using. Here at Voxeo we support three different kinds of XML for developing voice applications (as outlined 
RSS Feed
