Merge pull request #16 from FieldDB/master

Updates to use via bower and/or npm
Audior · Oct 15, 2015 · a92b2f4 · a92b2f4
2 parents 5579303 + 939b089
commit a92b2f4
Show file tree

Hide file tree

Showing 11 changed files with 660 additions and 334 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/README.md b/README.md
@@ -4,6 +4,15 @@ Recordmp3js
 Record MP3 files directly from the browser using JS and HTML
 
 
+Install
+=======
+
+
+```bash
+$ bower install recordmp3js --save
+```
+
+
 License
 =======
 

diff --git a/bower.json b/bower.json
@@ -0,0 +1,27 @@
+{
+  "name": "recordmp3js",
+  "version": "0.5.0",
+  "homepage": "https://github.com/nusofthq/Recordmp3js",
+  "authors": [
+    "nusofthq <contact@nusofthq.com>",
+    "Paul Nicholls <paul.nicholls@canterbury.ac.nz>"
+  ],
+  "description": "Record MP3 files directly from the browser using JS and HTML",
+  "main": "js/recordmp3.js",
+  "keywords": [
+    "audio"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "upload.php"
+  ],
+  "dependencies": {
+    "bootstrap": "~3.3.1",
+    "fontawesome": "~4.2.0"
+  }
+}
diff --git a/css/style.css b/css/style.css
@@ -1,2 +1,121 @@
-@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';
+.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);
+  }
+}
diff --git a/index.html b/index.html
@@ -2,108 +2,77 @@
 
 <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 href="css/style.css" rel="stylesheet" type="text/css" />
+  <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
+  <link href="css/style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 
   <h1>Record to MP3 Test</h1>
 
-  <button onclick="startRecording(this);">record</button>
-  <button onclick="stopRecording(this);" disabled>stop</button>
-  
+  <div class="RecordMP3js-recorder" data-format="mp3" data-callback="uploadAudio"></div>
+  <div class="RecordMP3js-recorder" data-format="wav" data-callback="logToConsole"></div>
+
   <h2>Recordings</h2>
   <ul id="recordingslist"></ul>
-  
+
   <h2>Log</h2>
   <pre id="log"></pre>
 
   <script>
-  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);
-
-    input.connect(audio_context.destination);
-    __log('Input connected to audio context destination.');
-
-    recorder = new Recorder(input);
-    __log('Recorder initialised.');
-  }
-
-  function startRecording(button) {
-    recorder && recorder.record();
-    button.disabled = true;
-    button.nextElementSibling.disabled = false;
-    __log('Recording...');
-  }
+  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
 
-  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);
+      // Add audio element and download URL to page.
       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 = new Date().toISOString() + '.wav';
-      hf.innerHTML = hf.download;
+      hf.download = mp3Name;
+      hf.innerHTML = mp3Name;
       li.appendChild(au);
       li.appendChild(hf);
-      recordingslist.appendChild(li);*/
-    });
-  }
+      recordingslist.appendChild(li);
 
-  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);
-    });
-  };
+      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);
+    recorder.clear();
+  }
+  </script>
+  <script>
+    window.exports = window;
+    window.exports.workerPath = "";
   </script>
-
-   <script src="js/jquery-1.11.0.min.js"></script>	
-  <script src="recordmp3.js"></script>
+  <script src="js/recordmp3.js"></script>
 </body>
-</html>
+</html>
diff --git a/js/jquery-1.11.0.min.js b/js/jquery-1.11.0.min.js