upgrade
This commit is contained in:
353
main/inc/lib/wami-recorder/gui.js
Normal file
353
main/inc/lib/wami-recorder/gui.js
Normal file
@@ -0,0 +1,353 @@
|
||||
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 = 2;
|
||||
|
||||
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:144px;padding-left:79px;padding-top:45px;left:50%;margin-left: -107px'
|
||||
);
|
||||
document.getElementById(options.id).appendChild(guidiv);
|
||||
|
||||
var rid = Wami.createID();
|
||||
var recordDiv = createDiv(rid, '');
|
||||
guidiv.appendChild(recordDiv);
|
||||
|
||||
recordButton = new Button(rid, RECORD_BUTTON, options.buttonUrl);
|
||||
recordButton.onstart = startRecording;
|
||||
recordButton.onstop = stopRecording;
|
||||
|
||||
recordButton.setEnabled(true);
|
||||
|
||||
//Chamilo hack single button
|
||||
var pid = Wami.createID();
|
||||
var playDiv = createDiv(pid, '');
|
||||
guidiv.appendChild(playDiv);
|
||||
if (!options.singleButton) {
|
||||
playButton = new Button(pid, PLAY_BUTTON, options.buttonUrl);
|
||||
} else {
|
||||
playButton = new Button(pid, PLAY_BUTTON, options.buttonNoUrl);
|
||||
}
|
||||
|
||||
playButton.onstart = startPlaying;
|
||||
playButton.onstop = stopPlaying;
|
||||
}
|
||||
//end hack single button
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user