Posted in Mobile, Development, jQuery, JavaScript | Posted on 10-12-2011 | 3,672 views
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: https://github.com/phonegap/phonegap-plugins. I played with plugins this morning and here is what I found.
Installing plugins, at least for Android, is relatively simple.
- First you copy a JavaScript file to project. This is your interface to the lower level code.
- 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.
- 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.
2<html>
3<head>
4<meta name="viewport" content="width=320; user-scalable=no" />
5<meta http-equiv="Content-type" content="text/html; charset=utf-8">
6<title>TTS</title>
7<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
8<script type="text/javascript" charset="utf-8" src="tts.js"></script>
9<script>
10
11function readySpeak(){
12 window.plugins.tts.startup(doSpeak, errHandler);
13}
14
15function doSpeak() {
16 window.plugins.tts.speak("The TTS service is ready", {} , errHandler);
17}
18
19function errHandler(result){
20 alert('Error: ' + result);
21}
22
23function init(){
24 document.addEventListener("deviceready", readySpeak, false);
25}
26</script>
27</head>
28
29<body onload="init();">
30</body>
31</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!
2<html>
3<head>
4<meta name="viewport" content="width=320; user-scalable=no" />
5<meta http-equiv="Content-type" content="text/html; charset=utf-8">
6<title>TTS</title>
7<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
8<script type="text/javascript" charset="utf-8" src="tts.js"></script>
9<script type="text/javascript" charset="utf-8" src="SpeechRecognizer.js"></script>
10<script src="jquery.js"></script>
11<script src="elizabot.js"></script>
12<script src="elizadata.js"></script>
13
14<script>
15var eliza = new ElizaBot();
16
17//Start up stuff... should be chained...
18function readySpeakService(){
19 window.plugins.tts.startup(doLanguage, errHandler);
20}
21
22//See if we can British, cuz Brits sound smart.
23function doLanguage(result) {
24 if (result == TTS.STARTED) {
25 window.plugins.tts.isLanguageAvailable("en_GB", makeBritish, errHandler);
26 }
27}
28
29//Make me a brit. Cheerio!
30function makeBritish(){
31 window.plugins.tts.setLanguage("en_GB", startRecog, errHandler);
32}
33
34//Done with all TTS, switch to recog
35function startRecog() {
36 window.plugins.speechrecognizer.init(speechInitOk, errHandler)
37}
38
39function speechInitOk(){
40
41 startEliza();
42
43}
44
45function startEliza(){
46 var initial = eliza.getInitial();
47 window.plugins.tts.speak(initial, {} , errHandler);
48 addChat("Eliza: "+initial);
49}
50
51function addChat(str){
52 $("#chatBox").append(str+"<br/>");
53}
54
55function listen(){
56 var requestCode = 1234;
57 var maxMatches = 5;
58 var promptString = "Please say something...";
59 window.plugins.speechrecognizer.startRecognize(speechOk, errHandler, requestCode, maxMatches, promptString);
60
61}
62
63function speechOk(result) {
64 var match, respObj, requestCode;
65 if (result) {
66 respObj = JSON.parse(result);
67 if (respObj) {
68 // This is the code that was sent with the original request
69 requestCode = respObj.speechMatches.requestCode;
70 //assume one...
71 var response = respObj.speechMatches.speechMatch[0];
72 addChat("You said: "+response);
73 var reply = eliza.transform(response);
74 window.plugins.tts.speak(reply, {} , errHandler);
75 addChat("Eliza: " + reply);
76
77 }
78 }
79}
80
81function errHandler(err){
82 alert('Error: ' + err);
83}
84
85function init(){
86 document.addEventListener("deviceready", readySpeakService, false);
87 $("#speakButton").click(function() {
88 listen();
89 });
90 window.onerror = errHandler;
91}
92
93
94</script>
95<style>
96 #chatBox {
97 width: 100%;
98 padding-left: 5px;
99 padding-right: 5px;
100 padding-top:5px;
101 height: 80%;
102 }
103
104 #speakButton {
105 width: 100%;
106 height: 20%;
107 }
108</style>
109</head>
110
111<body onload="init();">
112
113 <div id="chatBox"></div>
114 <button id="speakButton">Speak</button>
115</body>
116</html>
Here did you find the following JavaScript files?
elizabot.js
elizadata.js
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; <http://www.masserk.at>;
[Add Comment] [Subscribe to Comments]