Skip to content

Dev #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rderveloy merged 4 commits into from
Aug 10, 2015
Merged

Dev #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b7b7006
Added FireFox bug fix to local download method.
Aug 10, 2015
a577d5b
Create demo.html
Aug 10, 2015
b270ee0
Added basic information.
Aug 10, 2015
3db6ede
Merge pull request #2 from rderveloy/master
Aug 10, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
# JavaScript-Sound-Recorder
An easy-to-use sound recorder that's designed to record and save wav files.
#TODO: Finish Readme

#Requirements
Some functions included in this library require jQUery in order to run correctly. However, the demo page does not require jQuery.

Some browsers require this to be hosted from a server in order to run correctly.

#Compatability:
This is known to work correctly with the following browsers:
- Chrome
- Firefox
39 changes: 36 additions & 3 deletions SoundRecorder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,14 +96,47 @@ function WavFileBlob(desiredDataView)
};

this.downloadLocally = function()
{
var url = (window.URL || window.webkitURL).createObjectURL(this.dataBlob);
{
var url = (window.URL || window.webkitURL).createObjectURL(this.dataBlob);
var fileName = this.generateFileName();
console.log("WavFileBlob->downloadLocally(): The URL is: "+url);
console.log("WavFileBlob->downloadLocally(): The file name is: "+url);

var link = window.document.createElement('a');
link.href = url;
link.download = this.generateFileName();
link.download = fileName;
link.target = "_blank";
//link.click(); //This does not work in firefox.

//This doesn't work with firefox either:
/*
var click = document.createEvent("Event");
click.initEvent("click", true, true);
link.dispatchEvent(click);
*/

//Firefox is special:
//See: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent
var EVENT_TYPE = 'MouseEvents';
var EVENT_NAME = 'click';
var CAN_BUBBLE = true;
var CANCELABLE = true;
var VIEW = document.defaultView;
var DETAIL = 1;
var SCREEN_X = 0;
var SCREEN_Y = 0;
var CLIENT_X = 0;
var CLIENT_Y = 0;
var CTRL_KEY_PRESSED = false;
var ALT_KEY_PRESSED = false;
var SHIFT_KEY_PRESSED = false;
var META_KEY_PRESSED = false;
var MOUSE_BUTTON = 0;
var RELATED_EVENT_TARGET = null;

var event = document.createEvent(EVENT_TYPE);
event.initMouseEvent(EVENT_NAME, CAN_BUBBLE, CANCELABLE, VIEW, DETAIL, SCREEN_X, SCREEN_Y, CLIENT_X, CLIENT_Y, CTRL_KEY_PRESSED, ALT_KEY_PRESSED, SHIFT_KEY_PRESSED, META_KEY_PRESSED, MOUSE_BUTTON, RELATED_EVENT_TARGET);
link.dispatchEvent(event);
};

this.sendToURL = function(desiredURL, desiredSuccessCallback, desiredFailureCallback, desiredProgressBarValueSetterCallback)
Expand Down
194 changes: 194 additions & 0 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<html>
<head>
<title>JavaScript Sound Recorder Demo</title>
</head>
<body>
<div id="div_RecordingNotSupported" name="div_RecordingNotSupported" style="display:block;">
Sorry, it appears that your browser does not support getUserMedia audio recording. Please see the <a href="http://caniuse.com/#feat=stream">Can I Use website</a> for a list of capable browsers.
</div>
<form id="form_controls" name="form_controls">
<button id="button_startRecording" onclick="handleStartRecordingButtonClick();" type="button" style="display:none;">Start Recording</button>
<button id="button_stopRecording" onclick="handleStopRecordingButtonClick();" type="button" style="display:none;">Stop Recording</button>
</form>

<script src='SoundRecorder.js'></script>
<script>
// variables
var wavFileBlob = null;
var recorderObj = null;
var scriptProcessor = null;
var detectGetUserMedia = new BrowserGetUserMediaDetection();


//First, check to see if get user media is supported:
console.log("Get user media supported: " + detectGetUserMedia.getUserMediaSupported());

if(detectGetUserMedia.getUserMediaSupported())
{
console.log("Get user media is supported!");
console.log("Supported get user media method: " + detectGetUserMedia.getUserMediaMethod());

console.log("Assigning get user media method.");
navigator.getUserMedia = detectGetUserMedia.getUserMediaMethod();

console.log("Requesting microphone access from browser.");
navigator.getUserMedia({audio:true}, success, failure);

document.getElementById("div_RecordingNotSupported").style.display="none"; // hide recording not supported message
document.getElementById("button_startRecording").style.display="block"; // show start recording button

}
else
{
console.log("ERROR: getUserMedia not supported by browser.");

alert('Your browser does not appear to support audio recording.');
}


//Get user media failure callback function:
function failure(e)
{
console.log("getUserMedia->failure(): ERROR: Microphone access request failed!");

var errorMessageToDisplay;
var PERMISSION_DENIED_ERROR = "PermissionDeniedError";
var DEVICES_NOT_FOUND_ERROR = "DevicesNotFoundError";

console.log(e);
console.log(e.name);

switch(e.name)
{
case PERMISSION_DENIED_ERROR:
errorMessageToDisplay = 'ERROR: You must grant permission before audio recording can continue.';
break;
case DEVICES_NOT_FOUND_ERROR:
errorMessageToDisplay = 'ERROR: No microphones detected. Please connect and configure your microphone.';
break;
default:
errorMessageToDisplay = 'ERROR: The following unexpected error occured while attempting to connect to your microphone: '+e.name;
break;
}
console.log("getUserMedia->failure(): "+errorMessageToDisplay);
alert(errorMessageToDisplay);
}

//Get user media success callback function:
function success(e)
{
console.log("getUserMedia->success(): Microphone access request was successfu!");

var BUFFER_SIZE = 2048;
var RECORDING_MODE = PredefinedRecordingModes.MONO_44_KHZ;
var SAMPLE_RATE = RECORDING_MODE.getSampleRate();
var OUTPUT_CHANNEL_COUNT = RECORDING_MODE.getChannelCount();


console.log("getUserMedia->success(): Detecting window audio context.");
var detectWindowAudioContext = new BrowserWindowAudioContextDetection();

if(detectWindowAudioContext.windowAudioContextSupported())
{
console.log("getUserMedia->success(): Window audio context supported.");

var windowAudioContext = detectWindowAudioContext.getWindowAudioContextMethod();

console.log("getUserMedia->success(): Window audio context method: " + windowAudioContext);

console.log('getUserMedia->success(): Creating recorder object.');

recorderObj = new SoundRecorder(windowAudioContext, BUFFER_SIZE, SAMPLE_RATE, OUTPUT_CHANNEL_COUNT);

console.log('getUserMedia->success(): Initializing recorder object.');
recorderObj.init(e);

console.log('getUserMedia->success(): Assigning onaudioprocess event function.');

recorderObj.recorder.onaudioprocess = function(e)
{
//Do nothing if not recording:
if (!recorderObj.isRecording()) return;
// Copy the data from the input buffers;
var left = e.inputBuffer.getChannelData (0);
var right = e.inputBuffer.getChannelData (1);
recorderObj.cloneChannelData(left, right);
console.log('SoundRecorder.recorder.onaudioprocess: Saving audio data...');
};

console.log('getUserMedia->success(): Recorder object successfully created and initialized.');
console.log('getUserMedia->success(): Recorder object ready status: ' + recorderObj.isReady());

document.getElementById("button_startRecording").disabled = false;
document.getElementById("button_stopRecording").disabled = true;
}
else
{
var messageString = "Unable to detect window audio context, cannot continue.";
console.log("getUserMedia->success(): "+ messageString);
alert(messageString);
return;
}
}

/*
function startRecording()
{
console.log("Starting new recording...");
recorderObj.startRecordingNewWavFile();
}

function stopRecording()
{
console.log("Stopping recording.");
recorderObj.stopRecording();

}

function saveRecording()
{
console.log("Building wav file.");
wavFileBlob = recorderObj.buildWavFileBlob();

console.log("Downloading...");
wavFileBlob.downloadLocally();
}*/

function handleStartRecordingButtonClick()
{
//Update UI:
document.getElementById("button_startRecording").disabled = true;
document.getElementById("button_startRecording").style.display = "none";
document.getElementById("button_stopRecording").style.display = "block";
document.getElementById("button_stopRecording").disabled = false;

//Start the recording:
console.log("Starting new recording...");
recorderObj.startRecordingNewWavFile();

}

function handleStopRecordingButtonClick()
{
//Disable stop button to prevent clicking too many times:
document.getElementById("button_stopRecording").disabled = true;
document.getElementById("button_stopRecording").style.display = "none";

//Stop the recording:
console.log("Stopping recording.");
recorderObj.stopRecording();

//Save the recording by building the wav file blob and send it to the client:
console.log("Building wav file.");
wavFileBlob = recorderObj.buildWavFileBlob();

console.log("Downloading...");
wavFileBlob.downloadLocally();

//Re-enable the start button after saving:
document.getElementById("button_startRecording").disabled = false;
document.getElementById("button_startRecording").style.display = "block";
}
</script>
</body>
</html>