gui.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. var Wami = window.Wami || {};
  2. // Upon a creation of a new Wami.GUI(options), we assume that a WAMI recorder
  3. // has been initialized.
  4. Wami.GUI = function(options) {
  5. var RECORD_BUTTON = 1;
  6. var PLAY_BUTTON = 2;
  7. setOptions(options);
  8. setupDOM();
  9. var recordButton, playButton;
  10. var recordInterval, playInterval;
  11. function createDiv(id, style) {
  12. var div = document.createElement("div");
  13. if (id) {
  14. div.setAttribute('id', id);
  15. }
  16. if (style) {
  17. div.style.cssText = style;
  18. }
  19. return div;
  20. }
  21. function setOptions(options) {
  22. if (!options.buttonUrl) {
  23. options.buttonUrl = "buttons.png";
  24. }
  25. if (typeof options.listen == 'undefined' || options.listen) {
  26. listen();
  27. }
  28. }
  29. function setupDOM() {
  30. var guidiv = createDiv(
  31. null,
  32. 'position:absolute;width:214px;height:144px;padding-left:79px;padding-top:45px;left:50%;margin-left: -107px'
  33. );
  34. document.getElementById(options.id).appendChild(guidiv);
  35. var rid = Wami.createID();
  36. var recordDiv = createDiv(rid, '');
  37. guidiv.appendChild(recordDiv);
  38. recordButton = new Button(rid, RECORD_BUTTON, options.buttonUrl);
  39. recordButton.onstart = startRecording;
  40. recordButton.onstop = stopRecording;
  41. recordButton.setEnabled(true);
  42. //Chamilo hack single button
  43. var pid = Wami.createID();
  44. var playDiv = createDiv(pid, '');
  45. guidiv.appendChild(playDiv);
  46. if (!options.singleButton) {
  47. playButton = new Button(pid, PLAY_BUTTON, options.buttonUrl);
  48. } else {
  49. playButton = new Button(pid, PLAY_BUTTON, options.buttonNoUrl);
  50. }
  51. playButton.onstart = startPlaying;
  52. playButton.onstop = stopPlaying;
  53. }
  54. //end hack single button
  55. /**
  56. * These methods are called on clicks from the GUI.
  57. */
  58. function startRecording() {
  59. if (!options.recordUrl) {
  60. alert("No record Url specified!");
  61. }
  62. recordButton.setActivity(0);
  63. playButton.setEnabled(false);
  64. Wami.startRecording(options.recordUrl,
  65. Wami.nameCallback(onRecordStart), Wami
  66. .nameCallback(onRecordFinish), Wami
  67. .nameCallback(onError));
  68. }
  69. function stopRecording() {
  70. Wami.stopRecording();
  71. clearInterval(recordInterval);
  72. recordButton.setEnabled(true);
  73. }
  74. function startPlaying() {
  75. if (!options.playUrl) {
  76. alert('No play URL specified!');
  77. }
  78. playButton.setActivity(0);
  79. recordButton.setEnabled(false);
  80. Wami.startPlaying(options.playUrl, Wami.nameCallback(onPlayStart), Wami
  81. .nameCallback(onPlayFinish), Wami.nameCallback(onError));
  82. }
  83. function stopPlaying() {
  84. Wami.stopPlaying();
  85. }
  86. this.setPlayUrl = function(url) {
  87. options.playUrl = url;
  88. }
  89. this.setRecordUrl = function(url) {
  90. options.recordUrl = url;
  91. }
  92. this.setPlayEnabled = function(val) {
  93. playButton.setEnabled(val);
  94. }
  95. this.setRecordEnabled = function(val) {
  96. recordButton.setEnabled(val);
  97. }
  98. /**
  99. * Callbacks from the flash indicating certain events
  100. */
  101. function onError(e) {
  102. alert(e);
  103. }
  104. function onRecordStart() {
  105. recordInterval = setInterval(function() {
  106. if (recordButton.isActive()) {
  107. var level = Wami.getRecordingLevel();
  108. recordButton.setActivity(level);
  109. }
  110. }, 200);
  111. if (options.onRecordStart) {
  112. options.onRecordStart();
  113. }
  114. }
  115. function onRecordFinish() {
  116. playButton.setEnabled(true);
  117. if (options.onRecordFinish) {
  118. options.onRecordFinish();
  119. }
  120. }
  121. function onPlayStart() {
  122. playInterval = setInterval(function() {
  123. if (playButton.isActive()) {
  124. var level = Wami.getPlayingLevel();
  125. playButton.setActivity(level);
  126. }
  127. }, 200);
  128. if (options.onPlayStart) {
  129. options.onPlayStart();
  130. }
  131. }
  132. function onPlayFinish() {
  133. clearInterval(playInterval);
  134. recordButton.setEnabled(true);
  135. playButton.setEnabled(true);
  136. if (options.onPlayFinish) {
  137. options.onPlayFinish();
  138. }
  139. }
  140. function listen() {
  141. Wami.startListening();
  142. // Continually listening when the window is in focus allows us to
  143. // buffer a little audio before the users clicks, since sometimes
  144. // people talk too soon. Without "listening", the audio would record
  145. // exactly when startRecording() is called.
  146. window.onfocus = function() {
  147. Wami.startListening();
  148. };
  149. // Note that the use of onfocus and onblur should probably be replaced
  150. // with a more robust solution (e.g. jQuery's $(window).focus(...)
  151. window.onblur = function() {
  152. Wami.stopListening();
  153. };
  154. }
  155. function Button(buttonid, type, url) {
  156. var self = this;
  157. self.active = false;
  158. self.type = type;
  159. init();
  160. // Get the background button image position
  161. // Index: 1) normal 2) pressed 3) mouse-over
  162. function background(index) {
  163. if (index == 1)
  164. return "-56px 0px";
  165. if (index == 2)
  166. return "0px 0px";
  167. if (index == 3)
  168. return "-112px 0";
  169. alert("Background not found: " + index);
  170. }
  171. // Get the type of meter and its state
  172. // Index: 1) enabled 2) meter 3) disabled
  173. function meter(index, offset) {
  174. var top = 5;
  175. if (offset)
  176. top += offset;
  177. if (self.type == RECORD_BUTTON) {
  178. if (index == 1)
  179. return "-169px " + top + "px";
  180. if (index == 2)
  181. return "-189px " + top + "px";
  182. if (index == 3)
  183. return "-249px " + top + "px";
  184. } else {
  185. if (index == 1)
  186. return "-269px " + top + "px";
  187. if (index == 2)
  188. return "-298px " + top + "px";
  189. if (index == 3)
  190. return "-327px " + top + "px";
  191. }
  192. alert("Meter not found: " + self.type + " " + index);
  193. }
  194. function silhouetteWidth() {
  195. if (self.type == RECORD_BUTTON) {
  196. return "20px";
  197. } else {
  198. return "29px";
  199. }
  200. }
  201. function mouseHandler(e) {
  202. var rightclick;
  203. if (!e)
  204. var e = window.event;
  205. if (e.which)
  206. rightclick = (e.which == 3);
  207. else if (e.button)
  208. rightclick = (e.button == 2);
  209. if (!rightclick) {
  210. if (self.active && self.onstop) {
  211. self.active = false;
  212. self.onstop();
  213. } else if (!self.active && self.onstart) {
  214. self.active = true;
  215. self.onstart();
  216. }
  217. }
  218. }
  219. function init() {
  220. var div = document.createElement("div");
  221. var elem = document.getElementById(buttonid);
  222. if (elem) {
  223. elem.appendChild(div);
  224. } else {
  225. alert('Could not find element on page named ' + buttonid);
  226. }
  227. self.guidiv = document.createElement("div");
  228. self.guidiv.style.width = '56px';
  229. self.guidiv.style.height = '63px';
  230. self.guidiv.style.cursor = 'pointer';
  231. self.guidiv.style.background = "url(" + url + ") no-repeat";
  232. self.guidiv.style.backgroundPosition = background(1);
  233. div.appendChild(self.guidiv);
  234. // margin auto doesn't work in IE quirks mode
  235. // http://stackoverflow.com/questions/816343/why-will-this-div-img-not-center-in-ie8
  236. // text-align is a hack to force it to work even if you forget the
  237. // doctype.
  238. self.guidiv.style.textAlign = 'center';
  239. self.meterDiv = document.createElement("div");
  240. self.meterDiv.style.width = silhouetteWidth();
  241. self.meterDiv.style.height = '63px';
  242. self.meterDiv.style.margin = 'auto';
  243. self.meterDiv.style.cursor = 'pointer';
  244. self.meterDiv.style.position = 'relative';
  245. self.meterDiv.style.background = "url(" + url + ") no-repeat";
  246. self.meterDiv.style.backgroundPosition = meter(2);
  247. self.guidiv.appendChild(self.meterDiv);
  248. self.coverDiv = document.createElement("div");
  249. self.coverDiv.style.width = silhouetteWidth();
  250. self.coverDiv.style.height = '63px';
  251. self.coverDiv.style.margin = 'auto';
  252. self.coverDiv.style.cursor = 'pointer';
  253. self.coverDiv.style.position = 'relative';
  254. self.coverDiv.style.background = "url(" + url + ") no-repeat";
  255. self.coverDiv.style.backgroundPosition = meter(1);
  256. self.meterDiv.appendChild(self.coverDiv);
  257. self.active = false;
  258. self.guidiv.onmousedown = mouseHandler;
  259. }
  260. self.isActive = function() {
  261. return self.active;
  262. }
  263. self.setActivity = function(level) {
  264. self.guidiv.onmouseout = function() {
  265. };
  266. self.guidiv.onmouseover = function() {
  267. };
  268. self.guidiv.style.backgroundPosition = background(2);
  269. self.coverDiv.style.backgroundPosition = meter(1, 5);
  270. self.meterDiv.style.backgroundPosition = meter(2, 5);
  271. var totalHeight = 31;
  272. var maxHeight = 9;
  273. // When volume goes up, the black image loses height,
  274. // creating the perception of the colored one increasing.
  275. var height = (maxHeight + totalHeight - Math.floor(level / 100
  276. * totalHeight));
  277. self.coverDiv.style.height = height + "px";
  278. }
  279. self.setEnabled = function(enable) {
  280. var guidiv = self.guidiv;
  281. self.active = false;
  282. if (enable) {
  283. self.coverDiv.style.backgroundPosition = meter(1);
  284. self.meterDiv.style.backgroundPosition = meter(1);
  285. guidiv.style.backgroundPosition = background(1);
  286. guidiv.onmousedown = mouseHandler;
  287. guidiv.onmouseover = function() {
  288. guidiv.style.backgroundPosition = background(3);
  289. };
  290. guidiv.onmouseout = function() {
  291. guidiv.style.backgroundPosition = background(1);
  292. };
  293. } else {
  294. self.coverDiv.style.backgroundPosition = meter(3);
  295. self.meterDiv.style.backgroundPosition = meter(3);
  296. guidiv.style.backgroundPosition = background(1);
  297. guidiv.onmousedown = null;
  298. guidiv.onmouseout = function() {
  299. };
  300. guidiv.onmouseover = function() {
  301. };
  302. }
  303. }
  304. }
  305. }