Sunday, April 11, 2010

How to build voice-enabled web applications that run on all browsers

I am planning to expand this article by re-writing with more details and will also include one or two samples, but for now, in the interest of time, it just has minimal information. In addition, the plugin itself is still in its infancy. It does what I need it to do for the Voice-enabled Weather and Traffic Report application that I built, but I am also planning and hopefully others would join me to further improve it.

When I say "all browsers", yes, I mean that this also includes IE6. For IE8, IE7 and IE6, somehow, you would have to instruct your users that they would need to install the QuickTime plugin for a seamless user experience. If you figure out to make it work seamlessly with Media Player, please let me know. For Opera, the end users would have to configure their browsers by going to "Settings->Preferences->Network" and uncheck the box labeled "Send Referer information". Out of the box, it seems to work best with FireFox, Safari and Chrome.

First, grab the jQuery Text-to-Speech and jPlayer plugins:

http://code.google.com/p/jqtts/source/checkout
http://www.happyworm.com/jquery/jplayer/download.htm

Then in the <head> tag, add the following lines:

Somewhere inside the <body> tag (I put mine right after the opening of the <body> tag), add a couple of divs:

In your JavaScript code, initialize and then call the play() method.:

That's it. This should be enough for anyone to start now. As I mentioned, I am planning to expand this article in the next few days.

7 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. how can i call the play function from my html page?
    reply fast please....thanks in advance........

    ReplyDelete
  3. "In your JavaScript code, initialize and then call the play() method.: " ...
    please someone help me out with this.Can anyone help me with reading the contents of a div tag. Please please anyone please help me out ... a working example would be a god sent(a page with a simple button that helps read out the test in the div )....please !

    ReplyDelete
  4. When I have text longer than 100 characters, I split the text. I then play the first string and in the onComplete function try to play the second string. It produces weird results like when I later try to play a 3rd string, it plays the second string again. Is there a better way to play two strings in succession?

    ReplyDelete
  5. Never mind. I see that you can pass an array of strings. That's perfect. Your plugin is great.

    ReplyDelete
  6. hello, can i have a example an archive zip because i don't understand when i do call play() method

    Thank you for your attention

    Jérémy

    ReplyDelete
  7. Hello Everyone,
    I know nothing about javascript and jquery,but I want to create a voice enabled web browser.Can someone please tell me what steps should I follow from the beginning.
    I am a core java developer and ready to learn any programming language if needed.you may think I should not go for this..But please, I really want to do this

    ReplyDelete