Flash 10 or higher must be installed in order to record.
'));
- return;
- }
-
// Build recorder.
element.recorder = $('');
element.recorder.controls = $('');
@@ -268,21 +260,8 @@
// Initiate Wami.
Wami.setup({
id: 'wami-' + $(element).attr('id'),
- swfUrl: options.swfURL
+ swfUrl: options.swfurl
});
-
- // Test that html5 audio tags can play wav files (not possible in IE9-).
- if (!wavCheck && browser.msie) {
- var audio = element.find('.media-recorder-audio');
- var url = '';
- if (audio.children('audio').length) {
- url = audio.children('audio').attr('src');
- } else if (audio.children('embed').length) {
- url = audio.children('embed').attr('src');
- }
- audio.css('position', 'static');
- audio.detach().insertBefore(element);
- }
},
// ********************************************************************
@@ -290,7 +269,7 @@
// ********************************************************************
flashRecord: function(element, options) {
Wami.startRecording(
- options.recordingPath + '/' + options.drupalFileName,
+ options.recordingPath + '/' + options.fileName,
Wami.nameCallback(function() {
mediaRecorder.prototype.flashRecordStart(element, options);
}),
@@ -351,16 +330,9 @@
flashRecordFinish: function(element, options) {
// Clear all progress intervals.
clearInterval(element.recorder.progressInterval);
- // Update audio player.
- updateAudio(element, options);
// Set audio and file input values.
- var elementName = fieldFormatter(element, options, 'filepath');
- $('input[name="' + elementName + '"]').val(options.drupalFilePath + '/' + options.drupalFileName);
- $(element).find('.media-recorder-status').html('00:00 / 05:00');
- $(element).find('.media-recorder-record').removeClass('record-on').addClass('record-off')
- .unbind('click').click(function() {
- mediaRecorder.prototype.flashRecord(element, options);
- });
+ $(element).parent().children('input.media-recorder-filepath').val(options.filePath + '/' + options.fileName);
+ $(element).parent().children('input.media-recorder-refresh').trigger('mousedown');
},
// ********************************************************************
@@ -390,22 +362,81 @@
// ********************************************************************
function startUserMedia(element, options, stream) {
if (webAudioCheck) {
+
+ // Audio analyzer variables.
+ var analyserNode = null;
+ var analyserContext = null;
+ var canvas = $("canvas.media-recorder-analyser");
+ var canvasWidth = canvas[0].width;
+ var canvasHeight = canvas[0].height;
+
+ // Create an audio context.
element.recorder.audioContext = new AudioContext();
- inputPoint = element.recorder.audioContext.createGainNode();
- realAudioInput = element.recorder.audioContext.createMediaStreamSource(stream);
- audioInput = realAudioInput;
- audioInput.connect(inputPoint);
- inputPoint.gain.value = 0.8;
+
+ // Create a source node.
+ mediaStreamSourceNode = element.recorder.audioContext.createMediaStreamSource(stream);
+
+ // Create a default gain node.
+ gainNode = element.recorder.audioContext.createGain();
+ gainNode.gain.value = 0.8;
+
+ // Send media stream through gain node.
+ mediaStreamSourceNode.connect(gainNode);
+
+ // Create analyser node.
analyserNode = element.recorder.audioContext.createAnalyser();
analyserNode.fftSize = 2048;
- inputPoint.connect(analyserNode);
- element.recorder.HTML5Recorder = new Recorder(inputPoint, {workerPath:Drupal.settings.basePath + 'sites/all/libraries/Recorderjs/recorderWorker.js'});
- zeroGain = element.recorder.audioContext.createGainNode();
- zeroGain.gain.value = 0.0;
- inputPoint.connect(zeroGain);
- zeroGain.connect(element.recorder.audioContext.destination);
+
+ // Send gain node data to analyser node.
+ gainNode.connect(analyserNode);
+
+ // Create a recorder using the gain node.
+ element.recorder.HTML5Recorder = new Recorder(gainNode, {workerPath:Drupal.settings.basePath + 'sites/all/libraries/Recorderjs/recorderWorker.js'});
+
+ // Create a muted gain node.
+ zeroGainNode = element.recorder.audioContext.createGain();
+ zeroGainNode.gain.value = 0.0;
+
+ // Send gain node data through zero gain node.
+ gainNode.connect(zeroGainNode);
+
+ // Send zero gain data to audio context destination.
+ zeroGainNode.connect(element.recorder.audioContext.destination);
+
+ // Update audio canvas.
updateAudioCanvas(element, options);
}
+
+ // ********************************************************************
+ // * Update Audio Canvas.
+ // ********************************************************************
+ function updateAudioCanvas() {
+ if (!analyserContext) {
+ analyserContext = canvas[0].getContext('2d');
+ }
+ var spacing = 1;
+ var barWidth = 1;
+ var numBars = Math.round(canvasWidth / spacing);
+ var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);
+ analyserNode.getByteFrequencyData(freqByteData);
+ analyserContext.clearRect(0, 0, canvasWidth, canvasHeight);
+ analyserContext.fillStyle = '#F6D565';
+ analyserContext.lineCap = 'round';
+ var multiplier = analyserNode.frequencyBinCount / numBars;
+ // Draw rectangle for each frequency bin.
+ for (var i = 0; i < numBars; ++i) {
+ var magnitude = 0;
+ var offset = Math.floor(i * multiplier);
+ for (var j = 0; j < multiplier; j++) {
+ magnitude += freqByteData[offset + j];
+ }
+ magnitude = magnitude / multiplier;
+ var magnitude2 = freqByteData[i * multiplier];
+ analyserContext.fillStyle = "hsl( " + Math.round((i * 360) / numBars) + ", 100%, 50%)";
+ analyserContext.fillRect(i * spacing, canvasHeight, barWidth, -magnitude);
+ }
+ rafID = window.requestAnimationFrame(updateAudioCanvas);
+ }
}
// ********************************************************************
@@ -421,7 +452,7 @@
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);
- req.open("POST", options.recordingPath + '/' + options.drupalFileName, true);
+ req.open("POST", options.recordingPath + '/' + options.fileName, true);
req.send(formData);
function updateProgress(evt) {
@@ -430,7 +461,8 @@
$(element).find('.progressbar').progressbar({
value: percentComplete
});
- } else {
+ }
+ else {
$(element).find('.progressbar').progressbar({
value: 100
});
@@ -439,11 +471,9 @@
function transferComplete(evt) {
var file = JSON.parse(req.response);
- var fidInput = fieldFormatter(element, options, 'fid');
- var filepathInput = fieldFormatter(element, options, 'filepath');
- $('input[name="' + fidInput + '"]').val(file.fid);
- $('input[name="' + filepathInput + '"]').val(options.drupalFilePath + '/' + options.drupalFileName);
- $(element).find('.media-recorder-status').html('00:00 / 05:00');
+ $(element).parent().children('input.media-recorder-filepath').val(options.filePath + '/' + options.fileName);
+ $(element).parent().children('input.media-recorder-fid').val(file.fid);
+ $(element).parent().children('input.media-recorder-refresh').trigger('mousedown');
}
function transferFailed(evt) {
@@ -456,63 +486,8 @@
}
// ********************************************************************
- // * Update Audio Canvas.
+ // * Convert milliseconds to time.
// ********************************************************************
- function updateAudioCanvas(element, options) {
- if (!analyserContext) {
- canvasWidth = element.recorder.canvas[0].width;
- canvasHeight = element.recorder.canvas[0].height;
- analyserContext = element.recorder.canvas[0].getContext('2d');
- }
- var SPACING = 1;
- var BAR_WIDTH = 1;
- var numBars = Math.round(canvasWidth / SPACING);
- var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);
- analyserNode.getByteFrequencyData(freqByteData);
- analyserContext.clearRect(0, 0, canvasWidth, canvasHeight);
- analyserContext.fillStyle = '#F6D565';
- analyserContext.lineCap = 'round';
- var multiplier = analyserNode.frequencyBinCount / numBars;
- // Draw rectangle for each frequency bin.
- for (var i = 0; i < numBars; ++i) {
- var magnitude = 0;
- var offset = Math.floor(i * multiplier);
- for (var j = 0; j < multiplier; j++) {
- magnitude += freqByteData[offset + j];
- }
- magnitude = magnitude / multiplier;
- var magnitude2 = freqByteData[i * multiplier];
- analyserContext.fillStyle = "hsl( " + Math.round((i * 360) / numBars) + ", 100%, 50%)";
- analyserContext.fillRect(i * SPACING, canvasHeight, BAR_WIDTH, -magnitude);
- }
- rafID = window.webkitRequestAnimationFrame(updateAudioCanvas);
- }
-
- // ********************************************************************
- // * Update Audio Element.
- // ********************************************************************
- function updateAudio(element, options) {
- // Adds time to audio url to disable caching.
- var time = new Date().getTime();
- var url = options.drupalURL + '/' + options.drupalFileName;
- // Using hack to support IE9 and below browsers.
- if (wavCheck) {
- $(element).find('.media-recorder-audio audio').attr('src', url + '?' + time);
- } else {
- var embed = '';
- $(element).parent().find('.media-recorder-audio').html(embed);
- }
- }
-
- // ********************************************************************
- // * Format Input Field Helper.
- // ********************************************************************
- function fieldFormatter(element, options, name) {
- var language = options.drupalLanguage ? '[' + options.drupalLanguage + ']' : '';
- var delta = (options.drupalDelta !== null) ? '[' + options.drupalDelta + ']' : '';
- return options.drupalFieldName + language + delta + '[' + name + ']';
- }
-
function millisecondsToTime(milliSeconds) {
// Format Current Time
var milliSecondsDate = new Date(milliSeconds);
diff --git a/js/media-recorder-youtube.js b/js/media-recorder-youtube.js
new file mode 100755
index 0000000000000000000000000000000000000000..5610ddd47ae86cb8e869b12004b2fb4d73d2b825
--- /dev/null
+++ b/js/media-recorder-youtube.js
@@ -0,0 +1,39 @@
+/**
+ * @file
+ * Adds an interface between the Youtube upload widget and the Drupal media recorder module.
+ */
+
+(function($) {
+ Drupal.behaviors.mediaRecorderYoutube = {
+ attach: function(context, settings) {
+
+ var widget;
+ var element = $('#youtube-upload-widget');
+ var input = element.parent().children('input.media-recorder-youtube');
+
+ // Hide specific file related elements.
+ element.parent().children('span.file, span.file-size, input.media-recorder-upload, input.media-recorder-upload-button').hide();
+
+ // Attaches upload widget to upload div.
+ function onYouTubeIframeAPIReady() {
+ widget = new YT.UploadWidget('youtube-upload', {
+ width: 500,
+ events: {
+ 'onUploadSuccess': onUploadSuccess,
+ }
+ });
+ }
+
+ // Callback fired when video is successfully uploaded.
+ function onUploadSuccess(event) {
+ // Set input value.
+ input.val(event.data.videoId);
+ // Refresh the media recorder form.
+ element.parent().children('input.media-recorder-refresh').trigger('mousedown');
+ }
+
+ // Create widget.
+ onYouTubeIframeAPIReady();
+ }
+ };
+})(jQuery);
diff --git a/js/media-recorder.browser.js b/js/media-recorder.browser.js
new file mode 100644
index 0000000000000000000000000000000000000000..66abeac5b9ad54a14a356bee5dfb662e11789da6
--- /dev/null
+++ b/js/media-recorder.browser.js
@@ -0,0 +1,34 @@
+/**
+ * @file
+ * Media browser JS integration for the Media Recorder module.
+ */
+
+(function($) {
+ Drupal.behaviors.mediaRecorderBrowser = {
+ attach: function (context, settings) {
+
+ // Bind click handler to media recorder submit input.
+ $('#media-tab-media_recorder input[type="submit"]').bind('click', function (event) {
+
+ // Prevent regular form submit.
+ event.preventDefault();
+
+ // Get the fid value.
+ var fid = $('#media-tab-media_recorder .media-recorder-fid').val();
+
+ // Build file object.
+ var file = {};
+ file.fid = fid;
+ file.preview = $('#media-tab-media_recorder .media-recorder-preview .content').html();
+
+ // Add to selected media.
+ var files = new Array();
+ files.push(file);
+ Drupal.media.browser.selectMedia(files);
+
+ // Submit media browser form.
+ Drupal.media.browser.submit();
+ });
+ }
+ }
+})(jQuery);
diff --git a/js/media-recorder.js b/js/media-recorder.js
new file mode 100755
index 0000000000000000000000000000000000000000..1e12e15092d6dd454889eb22293ffc1109814769
--- /dev/null
+++ b/js/media-recorder.js
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Adds an interface between the media recorder jQuery plugin and the drupal media module.
+ */
+
+(function($) {
+ Drupal.behaviors.mediaRecorder = {
+ attach: function(context, settings) {
+ $('.media-recorder-wrapper').mediaRecorder({
+ 'recordingPath': Drupal.settings.mediaRecorder.recordingPath,
+ 'filePath': Drupal.settings.mediaRecorder.filePath,
+ 'fileName': Drupal.settings.mediaRecorder.fileName,
+ 'timeLimit': Drupal.settings.mediaRecorder.timeLimit,
+ 'width': Drupal.settings.mediaRecorder.width,
+ 'height': Drupal.settings.mediaRecorder.height,
+ 'swfurl': Drupal.settings.basePath + 'sites/all/libraries/wami/Wami.swf',
+ });
+ }
+ };
+})(jQuery);
diff --git a/js/media_recorder.js b/js/media_recorder.js
deleted file mode 100755
index 760c6f2a2944a2697defc5ec7514400da5214b36..0000000000000000000000000000000000000000
--- a/js/media_recorder.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * @file
- * Adds an interface between the media recorder jQuery plugin and the drupal media module.
- */
-
-(function($) {
- // Add setup to drupal behaviors.
- Drupal.behaviors.mediaRecorder = {
- attach: function(context, settings) {
-
- // Iterate over each media recorder field widget.
- $('.media-recorder-wrapper').each(function(){
-
- // Validation.
- if ($(this).hasClass('media-recorder-processed')) {
- return;
- }
-
- // Hide original field.
- $(this).parent().children('.form-managed-file input').hide();
- $(this).parent().children('.description').hide();
-
- var mediaRecorderWrapper = $(this);
-
- // Add processed class.
- $(this).addClass('media-recorder-processed');
-
- // Instantiate media recorder.
- $(this).mediaRecorder({
- 'timeLimit': Drupal.settings.mediaRecorder.timeLimit,
- 'recordingPath': Drupal.settings.mediaRecorder.recordingPath,
- 'swfURL': Drupal.settings.basePath + 'sites/all/libraries/wami/Wami.swf',
- 'drupalURL': Drupal.settings.mediaRecorder.url,
- 'drupalFilePath': Drupal.settings.mediaRecorder.filePath,
- 'drupalFileName': Drupal.settings.mediaRecorder.fileName,
- 'drupalFieldName': Drupal.settings.mediaRecorder.fieldName,
- 'drupalLanguage': Drupal.settings.mediaRecorder.language,
- 'drupalDelta': Drupal.settings.mediaRecorder.delta,
- });
- });
-
- }
- };
-})(jQuery);
diff --git a/js/media_recorder_youtube.js b/js/media_recorder_youtube.js
deleted file mode 100755
index db64139374510c49956e7778a89efb96ebdb429c..0000000000000000000000000000000000000000
--- a/js/media_recorder_youtube.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * @file
- * Adds an interface between the Youtube upload widget and the Drupal media recorder module.
- */
-
-(function($) {
- // Add setup to drupal behaviors.
- Drupal.behaviors.mediaRecorderYoutube = {
- attach: function(context, settings) {
-
- var widget;
- var player;
- var youtubeInput = fieldFormatter('youtube');
- var currentId = $('input[name="' + youtubeInput + '"]').val();
-
- // Format input field helper.
- function fieldFormatter(name) {
- var fieldName = Drupal.settings.mediaRecorder.fieldName;
- var language = '[' + Drupal.settings.mediaRecorder.language + ']';
- var delta = '[' + Drupal.settings.mediaRecorder.delta + ']';
- return fieldName + language + delta + '[' + name + ']';
- }
-
- // Attaches upload widget to upload div.
- function onYouTubeIframeAPIReady() {
- widget = new YT.UploadWidget('youtube-upload', {
- width: 500,
- events: {
- 'onUploadSuccess': onUploadSuccess,
- 'onProcessingComplete': onProcessingComplete
- }
- });
- }
-
- // Callback fired when video is successfully uploaded.
- function onUploadSuccess(event) {
- $('input[name="' + youtubeInput + '"]').val(event.data.videoId);
- $('#youtube-upload-wrapper').hide();
- $('#youtube-player-wrapper').prepend('
Video is currently processing and will not display properly until processing is finished. However, you may save this content at any time without loss of video.