Adding MP3 Support

index.html

@@ -65,6 +65,10 @@
 		<canvas id="wavedisplay" width="1024" height="500"></canvas>
 	</div>
 	<div id="controls">
+		<select id="encodingSelect" onchange="encoding = this.value;">
+			<option value="mp3" selected>MP3</option>
+			<option value="wav">WAV</option>
+		</select>
 		<img id="record" src="img/mic128.png" onclick="toggleRecording(this);">
 		<a id="save" href="#"><img src="img/save.svg"></a>
 	</div>

js/main.js

@@ -24,31 +24,35 @@ var rafID = null;
 var analyserContext = null;
 var canvasWidth, canvasHeight;
 var recIndex = 0;
+var encoding = 'mp3';
 
 /* TODO:
 
 - offer mono option
 - "Monitor input" switch
 */
 
-function saveAudio() {
-    audioRecorder.exportWAV( doneEncoding );
-    // could get mono instead by saying
-    // audioRecorder.exportMonoWAV( doneEncoding );
-}
-
 function gotBuffers( buffers ) {
     var canvas = document.getElementById( "wavedisplay" );
 
     drawBuffer( canvas.width, canvas.height, canvas.getContext('2d'), buffers[0] );
 
     // the ONLY time gotBuffers is called is right after a new recording is completed - 
     // so here's where we should set up the download.
-    audioRecorder.exportWAV( doneEncoding );
+    if(encoding === 'mp3') {
+      audioRecorder.exportMP3( doneEncoding );
+    } else {
+      audioRecorder.exportWAV( doneEncoding );
+    }
 }
 
 function doneEncoding( blob ) {
+  if(encoding === 'mp3') {
+    Recorder.setupDownload( blob, "myRecording" + ((recIndex<10)?"0":"") + recIndex + ".mp3" );
+  } else {
     Recorder.setupDownload( blob, "myRecording" + ((recIndex<10)?"0":"") + recIndex + ".wav" );
+  }
+
     recIndex++;
 }
 

js/recorderjs/recorder.js

@@ -87,6 +87,16 @@ DEALINGS IN THE SOFTWARE.
       });
     }
 
+    this.exportMP3 = function(cb, type) {
+      currCallback = cb || config.callback;
+      type = type || config.type || 'audio/mpeg';
+      if (!currCallback) throw new Error('Callback not set');
+      worker.postMessage({
+        command: 'exportMP3',
+        type: type
+      });
+    }
+
     this.exportMonoWAV = function(cb, type){
       currCallback = cb || config.callback;
       type = type || config.type || 'audio/wav';

js/recorderjs/recorderWorker.js

@@ -17,6 +17,8 @@ CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFT
 DEALINGS IN THE SOFTWARE.
 */
 
+importScripts("Mp3LameEncoder.min.js");
+
 var recLength = 0,
   recBuffersL = [],
   recBuffersR = [],
@@ -33,6 +35,9 @@ this.onmessage = function(e){
     case 'exportWAV':
       exportWAV(e.data.type);
       break;
+    case 'exportMP3':
+      exportMP3(e.data.type);
+      break;
     case 'exportMonoWAV':
       exportMonoWAV(e.data.type);
       break;
@@ -65,6 +70,16 @@ function exportWAV(type){
   this.postMessage(audioBlob);
 }
 
+function exportMP3(type){
+  var bufferL = mergeBuffers(recBuffersL, recLength);
+  var bufferR = mergeBuffers(recBuffersR, recLength);
+
+  var dataview = encodeMP3(bufferL, bufferR);
+  var audioBlob = new Blob([dataview], { type: type });
+
+  this.postMessage(audioBlob);
+}
+
 function exportMonoWAV(type){
   var bufferL = mergeBuffers(recBuffersL, recLength);
   var dataview = encodeWAV(bufferL, true);
@@ -159,3 +174,15 @@ function encodeWAV(samples, mono){
 
   return view;
 }
+
+function encodeMP3(left, right){
+  var buffer = new ArrayBuffer(left.length * 2);
+  var view = new DataView(buffer);
+
+  encoder = new Mp3LameEncoder(sampleRate, 160);
+  encoder.encode([left, right]);
+
+  blob = encoder.finish("audio/mpeg");
+
+  return blob;
+}