You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
353 lines
8.9 KiB
353 lines
8.9 KiB
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: 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);
|
|
|
|
//Chamilo hack single button
|
|
var pid = Wami.createID();
|
|
var playDiv = createDiv(pid,
|
|
"position: absolute; right: 40px; top: 25px");
|
|
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() {
|
|
};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|