|
@@ -1,349 +0,0 @@
|
|
|
-var Wami = window.Wami || {};
|
|
|
-
|
|
|
-// Upon a creation of a new Wami.GUI(options), we assume that a WAMI recorder
|
|
|
-// has been initialized.
|
|
|
-Wami.GUI = function(options) {
|
|
|
- var RECORD_BUTTON = 1;
|
|
|
- //var PLAY_BUTTON = 0;// Chamilo deactivate play record when recording on documents
|
|
|
-
|
|
|
- setOptions(options);
|
|
|
- setupDOM();
|
|
|
-
|
|
|
- var recordButton, playButton;
|
|
|
- var recordInterval, playInterval;
|
|
|
-
|
|
|
- function createDiv(id, style) {
|
|
|
- var div = document.createElement("div");
|
|
|
- if (id) {
|
|
|
- div.setAttribute('id', id);
|
|
|
- }
|
|
|
- if (style) {
|
|
|
- div.style.cssText = style;
|
|
|
- }
|
|
|
- return div;
|
|
|
- }
|
|
|
-
|
|
|
- function setOptions(options) {
|
|
|
- if (!options.buttonUrl) {
|
|
|
- options.buttonUrl = "buttons.png";
|
|
|
- }
|
|
|
-
|
|
|
- if (typeof options.listen == 'undefined' || options.listen) {
|
|
|
- listen();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function setupDOM() {
|
|
|
- var guidiv = createDiv(null,
|
|
|
- "position: absolute; width: 214px; height: 137px;");
|
|
|
- document.getElementById(options.id).appendChild(guidiv);
|
|
|
-
|
|
|
- var rid = Wami.createID();
|
|
|
- var recordDiv = createDiv(rid,
|
|
|
- "position: absolute; left: 40px; top: 25px");
|
|
|
- guidiv.appendChild(recordDiv);
|
|
|
-
|
|
|
- recordButton = new Button(rid, RECORD_BUTTON, options.buttonUrl);
|
|
|
- recordButton.onstart = startRecording;
|
|
|
- recordButton.onstop = stopRecording;
|
|
|
-
|
|
|
- recordButton.setEnabled(true);
|
|
|
-
|
|
|
- if (!options.singleButton) {
|
|
|
- var pid = Wami.createID();
|
|
|
- var playDiv = createDiv(pid,
|
|
|
- "position: absolute; right: 40px; top: 25px");
|
|
|
- guidiv.appendChild(playDiv);
|
|
|
-
|
|
|
- playButton = new Button(pid, PLAY_BUTTON, options.buttonUrl);
|
|
|
- playButton.onstart = startPlaying;
|
|
|
- playButton.onstop = stopPlaying;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * These methods are called on clicks from the GUI.
|
|
|
- */
|
|
|
- function startRecording() {
|
|
|
- if (!options.recordUrl) {
|
|
|
- alert("No record Url specified!");
|
|
|
- }
|
|
|
- recordButton.setActivity(0);
|
|
|
- playButton.setEnabled(false);
|
|
|
- Wami.startRecording(options.recordUrl,
|
|
|
- Wami.nameCallback(onRecordStart), Wami
|
|
|
- .nameCallback(onRecordFinish), Wami
|
|
|
- .nameCallback(onError));
|
|
|
- }
|
|
|
-
|
|
|
- function stopRecording() {
|
|
|
- Wami.stopRecording();
|
|
|
- clearInterval(recordInterval);
|
|
|
- recordButton.setEnabled(true);
|
|
|
- }
|
|
|
-
|
|
|
- function startPlaying() {
|
|
|
- if (!options.playUrl) {
|
|
|
- alert('No play URL specified!');
|
|
|
- }
|
|
|
-
|
|
|
- playButton.setActivity(0);
|
|
|
- recordButton.setEnabled(false);
|
|
|
-
|
|
|
- Wami.startPlaying(options.playUrl, Wami.nameCallback(onPlayStart), Wami
|
|
|
- .nameCallback(onPlayFinish), Wami.nameCallback(onError));
|
|
|
- }
|
|
|
-
|
|
|
- function stopPlaying() {
|
|
|
- Wami.stopPlaying();
|
|
|
- }
|
|
|
-
|
|
|
- this.setPlayUrl = function(url) {
|
|
|
- options.playUrl = url;
|
|
|
- }
|
|
|
-
|
|
|
- this.setRecordUrl = function(url) {
|
|
|
- options.recordUrl = url;
|
|
|
- }
|
|
|
-
|
|
|
- this.setPlayEnabled = function(val) {
|
|
|
- playButton.setEnabled(val);
|
|
|
- }
|
|
|
-
|
|
|
- this.setRecordEnabled = function(val) {
|
|
|
- recordButton.setEnabled(val);
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * Callbacks from the flash indicating certain events
|
|
|
- */
|
|
|
-
|
|
|
- function onError(e) {
|
|
|
- alert(e);
|
|
|
- }
|
|
|
-
|
|
|
- function onRecordStart() {
|
|
|
- recordInterval = setInterval(function() {
|
|
|
- if (recordButton.isActive()) {
|
|
|
- var level = Wami.getRecordingLevel();
|
|
|
- recordButton.setActivity(level);
|
|
|
- }
|
|
|
- }, 200);
|
|
|
- if (options.onRecordStart) {
|
|
|
- options.onRecordStart();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function onRecordFinish() {
|
|
|
- playButton.setEnabled(true);
|
|
|
- if (options.onRecordFinish) {
|
|
|
- options.onRecordFinish();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function onPlayStart() {
|
|
|
- playInterval = setInterval(function() {
|
|
|
- if (playButton.isActive()) {
|
|
|
- var level = Wami.getPlayingLevel();
|
|
|
- playButton.setActivity(level);
|
|
|
- }
|
|
|
- }, 200);
|
|
|
- if (options.onPlayStart) {
|
|
|
- options.onPlayStart();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function onPlayFinish() {
|
|
|
- clearInterval(playInterval);
|
|
|
- recordButton.setEnabled(true);
|
|
|
- playButton.setEnabled(true);
|
|
|
- if (options.onPlayFinish) {
|
|
|
- options.onPlayFinish();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function listen() {
|
|
|
- Wami.startListening();
|
|
|
- // Continually listening when the window is in focus allows us to
|
|
|
- // buffer a little audio before the users clicks, since sometimes
|
|
|
- // people talk too soon. Without "listening", the audio would record
|
|
|
- // exactly when startRecording() is called.
|
|
|
- window.onfocus = function() {
|
|
|
- Wami.startListening();
|
|
|
- };
|
|
|
-
|
|
|
- // Note that the use of onfocus and onblur should probably be replaced
|
|
|
- // with a more robust solution (e.g. jQuery's $(window).focus(...)
|
|
|
- window.onblur = function() {
|
|
|
- Wami.stopListening();
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- function Button(buttonid, type, url) {
|
|
|
- var self = this;
|
|
|
- self.active = false;
|
|
|
- self.type = type;
|
|
|
-
|
|
|
- init();
|
|
|
-
|
|
|
- // Get the background button image position
|
|
|
- // Index: 1) normal 2) pressed 3) mouse-over
|
|
|
- function background(index) {
|
|
|
- if (index == 1)
|
|
|
- return "-56px 0px";
|
|
|
- if (index == 2)
|
|
|
- return "0px 0px";
|
|
|
- if (index == 3)
|
|
|
- return "-112px 0";
|
|
|
- alert("Background not found: " + index);
|
|
|
- }
|
|
|
-
|
|
|
- // Get the type of meter and its state
|
|
|
- // Index: 1) enabled 2) meter 3) disabled
|
|
|
- function meter(index, offset) {
|
|
|
- var top = 5;
|
|
|
- if (offset)
|
|
|
- top += offset;
|
|
|
- if (self.type == RECORD_BUTTON) {
|
|
|
- if (index == 1)
|
|
|
- return "-169px " + top + "px";
|
|
|
- if (index == 2)
|
|
|
- return "-189px " + top + "px";
|
|
|
- if (index == 3)
|
|
|
- return "-249px " + top + "px";
|
|
|
- } else {
|
|
|
- if (index == 1)
|
|
|
- return "-269px " + top + "px";
|
|
|
- if (index == 2)
|
|
|
- return "-298px " + top + "px";
|
|
|
- if (index == 3)
|
|
|
- return "-327px " + top + "px";
|
|
|
- }
|
|
|
- alert("Meter not found: " + self.type + " " + index);
|
|
|
- }
|
|
|
-
|
|
|
- function silhouetteWidth() {
|
|
|
- if (self.type == RECORD_BUTTON) {
|
|
|
- return "20px";
|
|
|
- } else {
|
|
|
- return "29px";
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function mouseHandler(e) {
|
|
|
- var rightclick;
|
|
|
- if (!e)
|
|
|
- var e = window.event;
|
|
|
- if (e.which)
|
|
|
- rightclick = (e.which == 3);
|
|
|
- else if (e.button)
|
|
|
- rightclick = (e.button == 2);
|
|
|
-
|
|
|
- if (!rightclick) {
|
|
|
- if (self.active && self.onstop) {
|
|
|
- self.active = false;
|
|
|
- self.onstop();
|
|
|
- } else if (!self.active && self.onstart) {
|
|
|
- self.active = true;
|
|
|
- self.onstart();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function init() {
|
|
|
- var div = document.createElement("div");
|
|
|
- var elem = document.getElementById(buttonid);
|
|
|
- if (elem) {
|
|
|
- elem.appendChild(div);
|
|
|
- } else {
|
|
|
- alert('Could not find element on page named ' + buttonid);
|
|
|
- }
|
|
|
-
|
|
|
- self.guidiv = document.createElement("div");
|
|
|
- self.guidiv.style.width = '56px';
|
|
|
- self.guidiv.style.height = '63px';
|
|
|
- self.guidiv.style.cursor = 'pointer';
|
|
|
- self.guidiv.style.background = "url(" + url + ") no-repeat";
|
|
|
- self.guidiv.style.backgroundPosition = background(1);
|
|
|
- div.appendChild(self.guidiv);
|
|
|
-
|
|
|
- // margin auto doesn't work in IE quirks mode
|
|
|
- // http://stackoverflow.com/questions/816343/why-will-this-div-img-not-center-in-ie8
|
|
|
- // text-align is a hack to force it to work even if you forget the
|
|
|
- // doctype.
|
|
|
- self.guidiv.style.textAlign = 'center';
|
|
|
-
|
|
|
- self.meterDiv = document.createElement("div");
|
|
|
- self.meterDiv.style.width = silhouetteWidth();
|
|
|
- self.meterDiv.style.height = '63px';
|
|
|
- self.meterDiv.style.margin = 'auto';
|
|
|
- self.meterDiv.style.cursor = 'pointer';
|
|
|
- self.meterDiv.style.position = 'relative';
|
|
|
- self.meterDiv.style.background = "url(" + url + ") no-repeat";
|
|
|
- self.meterDiv.style.backgroundPosition = meter(2);
|
|
|
- self.guidiv.appendChild(self.meterDiv);
|
|
|
-
|
|
|
- self.coverDiv = document.createElement("div");
|
|
|
- self.coverDiv.style.width = silhouetteWidth();
|
|
|
- self.coverDiv.style.height = '63px';
|
|
|
- self.coverDiv.style.margin = 'auto';
|
|
|
- self.coverDiv.style.cursor = 'pointer';
|
|
|
- self.coverDiv.style.position = 'relative';
|
|
|
- self.coverDiv.style.background = "url(" + url + ") no-repeat";
|
|
|
- self.coverDiv.style.backgroundPosition = meter(1);
|
|
|
- self.meterDiv.appendChild(self.coverDiv);
|
|
|
-
|
|
|
- self.active = false;
|
|
|
- self.guidiv.onmousedown = mouseHandler;
|
|
|
- }
|
|
|
-
|
|
|
- self.isActive = function() {
|
|
|
- return self.active;
|
|
|
- }
|
|
|
-
|
|
|
- self.setActivity = function(level) {
|
|
|
- self.guidiv.onmouseout = function() {
|
|
|
- };
|
|
|
- self.guidiv.onmouseover = function() {
|
|
|
- };
|
|
|
- self.guidiv.style.backgroundPosition = background(2);
|
|
|
- self.coverDiv.style.backgroundPosition = meter(1, 5);
|
|
|
- self.meterDiv.style.backgroundPosition = meter(2, 5);
|
|
|
-
|
|
|
- var totalHeight = 31;
|
|
|
- var maxHeight = 9;
|
|
|
-
|
|
|
- // When volume goes up, the black image loses height,
|
|
|
- // creating the perception of the colored one increasing.
|
|
|
- var height = (maxHeight + totalHeight - Math.floor(level / 100
|
|
|
- * totalHeight));
|
|
|
- self.coverDiv.style.height = height + "px";
|
|
|
- }
|
|
|
-
|
|
|
- self.setEnabled = function(enable) {
|
|
|
- var guidiv = self.guidiv;
|
|
|
- self.active = false;
|
|
|
- if (enable) {
|
|
|
- self.coverDiv.style.backgroundPosition = meter(1);
|
|
|
- self.meterDiv.style.backgroundPosition = meter(1);
|
|
|
- guidiv.style.backgroundPosition = background(1);
|
|
|
- guidiv.onmousedown = mouseHandler;
|
|
|
- guidiv.onmouseover = function() {
|
|
|
- guidiv.style.backgroundPosition = background(3);
|
|
|
- };
|
|
|
- guidiv.onmouseout = function() {
|
|
|
- guidiv.style.backgroundPosition = background(1);
|
|
|
- };
|
|
|
- } else {
|
|
|
- self.coverDiv.style.backgroundPosition = meter(3);
|
|
|
- self.meterDiv.style.backgroundPosition = meter(3);
|
|
|
- guidiv.style.backgroundPosition = background(1);
|
|
|
- guidiv.onmousedown = null;
|
|
|
- guidiv.onmouseout = function() {
|
|
|
- };
|
|
|
- guidiv.onmouseover = function() {
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|