First test of PhoneGap Plugins

This post is more than 2 years old.

Much like the Adobe AIR framework, PhoneGap supports native extensions that enhance what you can do with the platform. In the PhoneGap world these are called plugins and a good number of them, for Android, iOS, Blackberry, and Palm, already exist. You can find all of the currently supported plugins at their Github repo: I played with plugins this morning and here is what I found.

Installing plugins, at least for Android, is relatively simple.

  1. First you copy a JavaScript file to project. This is your interface to the lower level code.
  2. Then you copy a Java class. Remember to refresh your project. My code wasn't working at first and a refresh fixed it up right away.
  3. You edit one XML file to have the project recognize the plugin.

And that's it. Of course, you have to include the JavaScript wrapper and actually make use of the plugin. For my first experiment, I tried the TTS (Text To Speech) plugin, which worked great. Check out the code here.

<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=320; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>TTS</title> <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script> <script type="text/javascript" charset="utf-8" src="tts.js"></script> <script>

function readySpeak(){ window.plugins.tts.startup(doSpeak, errHandler); }

function doSpeak() { window.plugins.tts.speak("The TTS service is ready", {} , errHandler); }

function errHandler(result){ alert('Error: ' + result); }

function init(){ document.addEventListener("deviceready", readySpeak, false); } </script> </head>

<body onload="init();"> </body> </html>

As you can see I have a few things I need to do before using the plugin. I listen for the deviceready event (that's a PhoneGap event), then start up the TTS service. Once it is ready it is trivial then to actually make the device speak. The TTS plugin has a few interesting options and for the most part it should be easy to figure out.

Once I got this working, I decided to go a bit crazy. If I can do text to speech, I bet I can do speech to text. Turns out there is also a plugin for speech recognition. The API was a bit hard to grok (and the docs were minimal), but check out the result.

The full source is below. This is a big hack and won't scroll properly if you run it too long, but... it was fun as hell to build!

<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=320; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>TTS</title> <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script> <script type="text/javascript" charset="utf-8" src="tts.js"></script> <script type="text/javascript" charset="utf-8" src="SpeechRecognizer.js"></script> <script src="jquery.js"></script> <script src="elizabot.js"></script> <script src="elizadata.js"></script>

<script> var eliza = new ElizaBot();

//Start up stuff... should be chained... function readySpeakService(){ window.plugins.tts.startup(doLanguage, errHandler); }

//See if we can British, cuz Brits sound smart. function doLanguage(result) { if (result == TTS.STARTED) { window.plugins.tts.isLanguageAvailable("en_GB", makeBritish, errHandler); } }

//Make me a brit. Cheerio! function makeBritish(){ window.plugins.tts.setLanguage("en_GB", startRecog, errHandler); }

//Done with all TTS, switch to recog function startRecog() { window.plugins.speechrecognizer.init(speechInitOk, errHandler) }

function speechInitOk(){



function startEliza(){ var initial = eliza.getInitial(); window.plugins.tts.speak(initial, {} , errHandler); addChat("Eliza: "+initial); }

function addChat(str){ $("#chatBox").append(str+"<br/>"); }

function listen(){ var requestCode = 1234; var maxMatches = 5; var promptString = "Please say something..."; window.plugins.speechrecognizer.startRecognize(speechOk, errHandler, requestCode, maxMatches, promptString);


function speechOk(result) { var match, respObj, requestCode; if (result) { respObj = JSON.parse(result); if (respObj) { // This is the code that was sent with the original request requestCode = respObj.speechMatches.requestCode; //assume one... var response = respObj.speechMatches.speechMatch[0]; addChat("You said: "+response); var reply = eliza.transform(response); window.plugins.tts.speak(reply, {} , errHandler); addChat("Eliza: " + reply);



function errHandler(err){ alert('Error: ' + err); }

function init(){ document.addEventListener("deviceready", readySpeakService, false); $("#speakButton").click(function() { listen(); }); window.onerror = errHandler; }

</script> <style> #chatBox { width: 100%; padding-left: 5px; padding-right: 5px; padding-top:5px; height: 80%; }

#speakButton {
	width: 100%;
	height: 20%;

</style> </head>

<body onload="init();">

&lt;div id="chatBox"&gt;&lt;/div&gt;	
&lt;button id="speakButton"&gt;Speak&lt;/button&gt;

</body> </html>

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Scott Stroz posted on 10/12/2011 at 8:10 PM

That is badass.

Comment 2 by Dave Ferguson posted on 10/12/2011 at 9:01 PM

Holy crap this is cool.

Comment 3 by Mikel posted on 10/12/2011 at 9:52 PM

Wow, so cool!

Comment 4 by Bob Chesley posted on 10/13/2011 at 3:57 AM

Buying PhoneGap was a smart move Adobe. Glad to see it.

Comment 5 by Bart Buijze posted on 10/13/2011 at 10:56 AM

Cool - and funny

Comment 6 by Patrick Whittingham posted on 11/3/2011 at 10:48 PM


Here did you find the following JavaScript files?


Comment 7 by Raymond Camden posted on 11/3/2011 at 10:56 PM

From the file:

elizabot.js v.1.1 - ELIZA JS library (N.Landsteiner 2005)
Eliza is a mock Rogerian psychotherapist.
Original program by Joseph Weizenbaum in MAD-SLIP for "Project MAC" at MIT.
cf: Weizenbaum, Joseph "ELIZA - A Computer Program For the Study of Natural Language
Communication Between Man and Machine"
in: Communications of the ACM; Volume 9 , Issue 1 (January 1966): p 36-45.
JavaScript implementation by Norbert Landsteiner 2005; <>

Comment 8 by Patrick Whittingham posted on 6/11/2012 at 9:29 PM


I'm looking to implement this code and the "readySpeakService()" function doesn't start. I have the two java files and I created 1 phonegap.constructor and the 'alert' message doesn't start.
Any ideas?



PhoneGap.addConstructor(function() { alert("add constructor");
PhoneGap.addPlugin("tts", new TTS());
PhoneGap.addPlugin("speechrecognizer", new SpeechRecognizer());
// @deprecated: No longer needed in PhoneGap 1.0. Uncomment the addService code for earlier
// PhoneGap releases.
// PluginManager.addService("TTS", "com.phonegap.plugins.speech.TTS");


<plugin name="TTS" value="com.phonegap.plugins.speech.TTS"/>
<plugin name="SpeechRecognizer" value="com.urbtek.phonegap.SpeechRecognizer"/>

Comment 9 by Raymond Camden posted on 6/11/2012 at 10:48 PM

Sorry, no. I haven't used this plugin in a while.

Comment 10 by Ravi Shanker Yadav posted on 12/9/2013 at 3:12 PM

I have failed to find plugin for TTS and speech recognizer
Please send me these plugin at my email:
Thank you.

Comment 11 by Raymond Camden posted on 12/9/2013 at 4:33 PM