Feature #4596 the user can giving a filename to the audio record
Juan Carlos Raña
13 years ago
parent
f90e534f7e
commit
92588a53bb
@ -0,0 +1,349 @@ |
||||
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() { |
||||
}; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue