Skip to content

Commit

Permalink
Fixes
Browse files Browse the repository at this point in the history 
commited fixes from kehers branch to master
  • Loading branch information
@remusnegrota
remusnegrota committed Oct 15, 2015
1 parent a92b2f4 commit b1ef96a
Show file tree
Hide file tree
Showing 8 changed files with 373 additions and 258 deletions.
9 changes: 0 additions & 9 deletions README.md
View file
Expand Up @@ -4,15 +4,6 @@ Recordmp3js
Record MP3 files directly from the browser using JS and HTML Record MP3 files directly from the browser using JS and HTML




Install
=======


```bash
$ bower install recordmp3js --save
```


License License
======= =======


Expand Down
123 changes: 2 additions & 121 deletions css/style.css
View file
@@ -1,121 +1,2 @@
.RecordMP3js-recorder [class^="recorder-icon-"], [class*=" recorder-icon-"] { @import '//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css';
font-family: 'FontAwesome'; @import '//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.RecordMP3js-recorder .recorder-icon-upload:before {
content: "\f01b";
}
.RecordMP3js-recorder .recorder-icon-play:before {
content: "\f01d";
}
.RecordMP3js-recorder .recorder-icon-pause:before {
content: "\f04c";
}
.RecordMP3js-recorder .recorder-icon-record:before {
content: "\f111";
}
.RecordMP3js-recorder .recorder-icon-stop:before {
content: "\f04d";
}

.RecordMP3js-recorder {
width:200px;
height:24px;
display:inline-block;
margin:5px 10px;
}
.RecordMP3js-recorder button {
color:#666;
margin:0;
width:25%;
height:24px;
background:none #eee;
border:1px solid #999;
border-left-width:0;
position:relative;
}
.RecordMP3js-recorder button > span {
line-height:1.5em;
}
.RecordMP3js-recorder button:first-child {
border-left-width:1px;
border-radius:5px 0 0 5px;
}
.RecordMP3js-recorder button:last-child {
border-radius:0 5px 5px 0;
}
.RecordMP3js-recorder button:disabled {
color:#999;
background-color:#ddd;
}

/* Record button + VU Meter */
.RecordMP3js-recorder button.btn-record {
color:#D00;
}
.RecordMP3js-recorder button.btn-record:disabled {
color:#D66;
}
.RecordMP3js-recorder.recording button.btn-record {
color:#B00;
}
.RecordMP3js-recorder.recording button.btn-record .vumeter {
position:absolute;
display:block;
top:0;
left:0;
height:100%;
background-color:#5BC539;
transition:width 0.08s linear;
}
.RecordMP3js-recorder.recording button.btn-record .recorder-icon-record {
opacity:0.99;
}

/* Loading spinner for "Processing" state */
.RecordMP3js-recorder.processing button.btn-save span:before {
visibility:hidden;
}
.RecordMP3js-recorder.processing button.btn-save:before {
display:block;
content:"";
position:absolute;
width:16px;
height:16px;
top:3px;
left:17px;
border-radius:50%;
border:3px solid #ccc;
border-top-color:#999;
-webkit-animation:RecordMP3js-spinner 1s infinite linear;
animation:RecordMP3js-spinner 1s infinite linear;
}
@-webkit-keyframes RecordMP3js-spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes RecordMP3js-spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
124 changes: 79 additions & 45 deletions index.html
View file
Expand Up @@ -2,23 +2,20 @@


<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Live input record and playback</title> <title>Live input record and playback</title>
<style type='text/css'> <style type='text/css'>
@import 'bower_components/bootstrap/dist/css/bootstrap.min.css';
@import 'bower_components/bootstrap/dist/css/bootstrap-theme.min.css';
ul { list-style: none; } ul { list-style: none; }
#recordingslist audio { display: block; margin-bottom: 10px; } #recordingslist audio { display: block; margin-bottom: 10px; }
</style> </style>
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" /> <link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>


<h1>Record to MP3 Test</h1> <h1>Record to MP3 Test</h1>


<div class="RecordMP3js-recorder" data-format="mp3" data-callback="uploadAudio"></div> <button onclick="startRecording(this);">record</button>
<div class="RecordMP3js-recorder" data-format="wav" data-callback="logToConsole"></div> <button onclick="stopRecording(this);" disabled>stop</button>


<h2>Recordings</h2> <h2>Recordings</h2>
<ul id="recordingslist"></ul> <ul id="recordingslist"></ul>
Expand All @@ -27,52 +24,89 @@ <h2>Log</h2>
<pre id="log"></pre> <pre id="log"></pre>


<script> <script>
function uploadAudio(recorder, mp3Data){ function __log(e, data) {
var reader = new FileReader(); log.innerHTML += "\n" + e + " " + (data || '');
reader.onload = function(event){ }
var fd = new FormData();
var mp3Name = 'audio_recording_' + new Date().getTime() + '.mp3'; var audio_context;
var xhr = new XMLHttpRequest(); var recorder;
var url = event.target.result

function startUserMedia(stream) {
// Add audio element and download URL to page. var input = audio_context.createMediaStreamSource(stream);
__log('Media stream created.' );
__log("input sample rate " +input.context.sampleRate);

// Feedback!
//input.connect(audio_context.destination);
__log('Input connected to audio context destination.');

recorder = new Recorder(input, {
numChannels: 1
});
__log('Recorder initialised.');
}

function startRecording(button) {
recorder && recorder.record();
button.disabled = true;
button.nextElementSibling.disabled = false;
__log('Recording...');
}

function stopRecording(button) {
recorder && recorder.stop();
button.disabled = true;
button.previousElementSibling.disabled = false;
__log('Stopped recording.');

// create WAV download link using audio data blob
createDownloadLink();

recorder.clear();
}

function createDownloadLink() {
recorder && recorder.exportWAV(function(blob) {
/*var url = URL.createObjectURL(blob);
var li = document.createElement('li'); var li = document.createElement('li');
var au = document.createElement('audio'); var au = document.createElement('audio');
var hf = document.createElement('a'); var hf = document.createElement('a');
au.controls = true; au.controls = true;
au.src = url; au.src = url;
hf.href = url; hf.href = url;
hf.download = mp3Name; hf.download = new Date().toISOString() + '.wav';
hf.innerHTML = mp3Name; hf.innerHTML = hf.download;
li.appendChild(au); li.appendChild(au);
li.appendChild(hf); li.appendChild(hf);
recordingslist.appendChild(li); recordingslist.appendChild(li);*/

});
log.innerHTML += "\nmp3name = " + mp3Name;
fd.append('fname', encodeURIComponent(mp3Name));
fd.append('data', url);
xhr.open('POST', 'upload.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
log.innerHTML += "\nMP3 uploaded.";
recorder.clear();
}
};
xhr.send(fd);
};
reader.readAsDataURL(mp3Data);

} }
function logToConsole(recorder, data) {
console.log(data); window.onload = function init() {
recorder.clear(); try {
} // webkit shim
</script> window.AudioContext = window.AudioContext || window.webkitAudioContext;
<script> navigator.getUserMedia = ( navigator.getUserMedia ||
window.exports = window; navigator.webkitGetUserMedia ||
window.exports.workerPath = ""; navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
window.URL = window.URL || window.webkitURL;

audio_context = new AudioContext;
__log('Audio context set up.');
__log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
} catch (e) {
alert('No web audio support in this browser!');
}

navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
__log('No live audio input: ' + e);
});
};
</script> </script>
<script src="js/recordmp3.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="recordmp3.js"></script>
</body> </body>
</html> </html>
4 changes: 4 additions & 0 deletions js/jquery-1.11.0.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/libmp3lame.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

66 changes: 33 additions & 33 deletions js/mp3Worker.js
View file
Expand Up @@ -3,39 +3,39 @@ importScripts('libmp3lame.min.js');
var mp3codec; var mp3codec;


self.onmessage = function(e) { self.onmessage = function(e) {
switch (e.data.cmd) { switch (e.data.cmd) {
case 'init': case 'init':
if (!e.data.config) { if (!e.data.config) {
e.data.config = { }; e.data.config = { };
} }
mp3codec = Lame.init(); mp3codec = Lame.init();


Lame.set_mode(mp3codec, e.data.config.mode || Lame.JOINT_STEREO); Lame.set_mode(mp3codec, e.data.config.mode || Lame.JOINT_STEREO);
Lame.set_num_channels(mp3codec, e.data.config.channels || 2); Lame.set_num_channels(mp3codec, e.data.config.channels || 2);
Lame.set_num_samples(mp3codec, e.data.config.samples || -1); Lame.set_num_samples(mp3codec, e.data.config.samples || -1);
Lame.set_in_samplerate(mp3codec, e.data.config.samplerate || 44100); Lame.set_in_samplerate(mp3codec, e.data.config.samplerate || 44100);
Lame.set_out_samplerate(mp3codec, e.data.config.samplerate || 44100); Lame.set_out_samplerate(mp3codec, e.data.config.samplerate || 44100);
Lame.set_bitrate(mp3codec, e.data.config.bitrate || 128); Lame.set_bitrate(mp3codec, e.data.config.bitrate || 128);


Lame.init_params(mp3codec); Lame.init_params(mp3codec);
console.log('Version :', Lame.get_version() + ' / ', console.log('Version :', Lame.get_version() + ' / ',
'Mode: '+Lame.get_mode(mp3codec) + ' / ', 'Mode: '+Lame.get_mode(mp3codec) + ' / ',
'Samples: '+Lame.get_num_samples(mp3codec) + ' / ', 'Samples: '+Lame.get_num_samples(mp3codec) + ' / ',
'Channels: '+Lame.get_num_channels(mp3codec) + ' / ', 'Channels: '+Lame.get_num_channels(mp3codec) + ' / ',
'Input Samplate: '+ Lame.get_in_samplerate(mp3codec) + ' / ', 'Input Samplate: '+ Lame.get_in_samplerate(mp3codec) + ' / ',
'Output Samplate: '+ Lame.get_in_samplerate(mp3codec) + ' / ', 'Output Samplate: '+ Lame.get_in_samplerate(mp3codec) + ' / ',
'Bitlate :' +Lame.get_bitrate(mp3codec) + ' / ', 'Bitlate :' +Lame.get_bitrate(mp3codec) + ' / ',
'VBR :' + Lame.get_VBR(mp3codec)); 'VBR :' + Lame.get_VBR(mp3codec));
break; break;
case 'encode': case 'encode':
var mp3data = Lame.encode_buffer_ieee_float(mp3codec, e.data.buf, e.data.buf); var mp3data = Lame.encode_buffer_ieee_float(mp3codec, e.data.buf, e.data.buf);
self.postMessage({cmd: 'data', buf: mp3data.data}); self.postMessage({cmd: 'data', buf: mp3data.data});
break; break;
case 'finish': case 'finish':
var mp3data = Lame.encode_flush(mp3codec); var mp3data = Lame.encode_flush(mp3codec);
self.postMessage({cmd: 'end', buf: mp3data.data}); self.postMessage({cmd: 'end', buf: mp3data.data});
Lame.close(mp3codec); Lame.close(mp3codec);
mp3codec = null; mp3codec = null;
break; break;
} }
}; };

0 comments on commit b1ef96a

Please sign in to comment.