Permalink
Browse files

Fixes

commited fixes from kehers branch to master
  • Loading branch information...
remusnegrota committed Oct 15, 2015
1 parent a92b2f4 commit b1ef96afeb568e3d554582208aeafb6fc379bed6
Showing with 373 additions and 258 deletions.
  1. +0 −9 README.md
  2. +2 −121 css/style.css
  3. +79 −45 index.html
  4. +4 −0 js/jquery-1.11.0.min.js
  5. +1 −1 js/libmp3lame.min.js
  6. +33 −33 js/mp3Worker.js
  7. +35 −49 js/recorderWorker.js
  8. +219 −0 recordmp3.js
View
@@ -4,15 +4,6 @@ Recordmp3js
Record MP3 files directly from the browser using JS and HTML
Install
=======
```bash
$ bower install recordmp3js --save
```
License
=======
View
@@ -1,121 +1,2 @@
.RecordMP3js-recorder [class^="recorder-icon-"], [class*=" recorder-icon-"] {
font-family: 'FontAwesome';
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);
}
}
@import '//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css';
@import '//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css';
View
@@ -2,23 +2,20 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Live input record and playback</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Live input record and playback</title>
<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; }
#recordingslist audio { display: block; margin-bottom: 10px; }
</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>
<body>
<h1>Record to MP3 Test</h1>
<div class="RecordMP3js-recorder" data-format="mp3" data-callback="uploadAudio"></div>
<div class="RecordMP3js-recorder" data-format="wav" data-callback="logToConsole"></div>
<button onclick="startRecording(this);">record</button>
<button onclick="stopRecording(this);" disabled>stop</button>
<h2>Recordings</h2>
<ul id="recordingslist"></ul>
@@ -27,52 +24,89 @@ <h2>Log</h2>
<pre id="log"></pre>
<script>
function uploadAudio(recorder, mp3Data){
var reader = new FileReader();
reader.onload = function(event){
var fd = new FormData();
var mp3Name = 'audio_recording_' + new Date().getTime() + '.mp3';
var xhr = new XMLHttpRequest();
var url = event.target.result
// Add audio element and download URL to page.
function __log(e, data) {
log.innerHTML += "\n" + e + " " + (data || '');
}
var audio_context;
var recorder;
function startUserMedia(stream) {
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 au = document.createElement('audio');
var hf = document.createElement('a');
au.controls = true;
au.src = url;
hf.href = url;
hf.download = mp3Name;
hf.innerHTML = mp3Name;
hf.download = new Date().toISOString() + '.wav';
hf.innerHTML = hf.download;
li.appendChild(au);
li.appendChild(hf);
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);
recordingslist.appendChild(li);*/
});
}
function logToConsole(recorder, data) {
console.log(data);
recorder.clear();
}
</script>
<script>
window.exports = window;
window.exports.workerPath = "";
window.onload = function init() {
try {
// webkit shim
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
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 src="js/recordmp3.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="recordmp3.js"></script>
</body>
</html>
</html>
View

Large diffs are not rendered by default.

Oops, something went wrong.
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -3,39 +3,39 @@ importScripts('libmp3lame.min.js');
var mp3codec;
self.onmessage = function(e) {
switch (e.data.cmd) {
case 'init':
if (!e.data.config) {
e.data.config = { };
}
mp3codec = Lame.init();
switch (e.data.cmd) {
case 'init':
if (!e.data.config) {
e.data.config = { };
}
mp3codec = Lame.init();
Lame.set_mode(mp3codec, e.data.config.mode || Lame.JOINT_STEREO);
Lame.set_num_channels(mp3codec, e.data.config.channels || 2);
Lame.set_num_samples(mp3codec, e.data.config.samples || -1);
Lame.set_in_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_mode(mp3codec, e.data.config.mode || Lame.JOINT_STEREO);
Lame.set_num_channels(mp3codec, e.data.config.channels || 2);
Lame.set_num_samples(mp3codec, e.data.config.samples || -1);
Lame.set_in_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.init_params(mp3codec);
console.log('Version :', Lame.get_version() + ' / ',
'Mode: '+Lame.get_mode(mp3codec) + ' / ',
'Samples: '+Lame.get_num_samples(mp3codec) + ' / ',
'Channels: '+Lame.get_num_channels(mp3codec) + ' / ',
'Input Samplate: '+ Lame.get_in_samplerate(mp3codec) + ' / ',
'Output Samplate: '+ Lame.get_in_samplerate(mp3codec) + ' / ',
'Bitlate :' +Lame.get_bitrate(mp3codec) + ' / ',
'VBR :' + Lame.get_VBR(mp3codec));
break;
case 'encode':
var mp3data = Lame.encode_buffer_ieee_float(mp3codec, e.data.buf, e.data.buf);
self.postMessage({cmd: 'data', buf: mp3data.data});
break;
case 'finish':
var mp3data = Lame.encode_flush(mp3codec);
self.postMessage({cmd: 'end', buf: mp3data.data});
Lame.close(mp3codec);
mp3codec = null;
break;
}
Lame.init_params(mp3codec);
console.log('Version :', Lame.get_version() + ' / ',
'Mode: '+Lame.get_mode(mp3codec) + ' / ',
'Samples: '+Lame.get_num_samples(mp3codec) + ' / ',
'Channels: '+Lame.get_num_channels(mp3codec) + ' / ',
'Input Samplate: '+ Lame.get_in_samplerate(mp3codec) + ' / ',
'Output Samplate: '+ Lame.get_in_samplerate(mp3codec) + ' / ',
'Bitlate :' +Lame.get_bitrate(mp3codec) + ' / ',
'VBR :' + Lame.get_VBR(mp3codec));
break;
case 'encode':
var mp3data = Lame.encode_buffer_ieee_float(mp3codec, e.data.buf, e.data.buf);
self.postMessage({cmd: 'data', buf: mp3data.data});
break;
case 'finish':
var mp3data = Lame.encode_flush(mp3codec);
self.postMessage({cmd: 'end', buf: mp3data.data});
Lame.close(mp3codec);
mp3codec = null;
break;
}
};
Oops, something went wrong.

0 comments on commit b1ef96a

Please sign in to comment.