@lls/lls-audio 0.0.13 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
@@ -38,7 +38,7 @@
   },
   "scripts": {
     "start": "npm run storybook",
-    "storybook": "start-storybook -p 9009 -s public",
+    "storybook": "start-storybook -p 9009 -s dist/stories",
     "deploy-storybook": "storybook-to-ghpages",
     "build": "rm -rf dist && mkdir dist && babel -d dist src",
     "copy:package": "cp -R package.json dist/",

package/player/index.js

@@ -109,7 +109,7 @@ var Player = function (_Component) {
   }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(newProps) {
-      if (newProps.url !== this.props.url) {
+      if (newProps.src !== this.props.src) {
         this.initialize(newProps);
       }
     }
@@ -138,9 +138,9 @@ var Player = function (_Component) {
     value: function initialize(props) {
       var _this3 = this;
 
-      var url = props.url;
+      var src = props.src;
 
-      (0, _audio.getWaveform)(url).then(function (waveform) {
+      (0, _audio.getWaveform)(src).then(function (waveform) {
         _this3.setState({ waveform: waveform, loading: false });
       });
     }
@@ -149,7 +149,9 @@ var Player = function (_Component) {
     value: function render() {
       var _this4 = this;
 
-      var url = this.props.url;
+      var _props = this.props,
+          src = _props.src,
+          className = _props.className;
       var _state = this.state,
           loading = _state.loading,
           duration = _state.duration,
@@ -167,7 +169,7 @@ var Player = function (_Component) {
 
       return _react2.default.createElement(
         'div',
-        { className: 'Audio_player ' + (0, _noImportant.css)(styles.player) },
+        { className: 'Audio_player ' + (0, _noImportant.css)(styles.player) + ' ' + className },
         _react2.default.createElement(
           'div',
           { className: (0, _noImportant.css)(styles.play_and_stop), onClick: function onClick() {
@@ -177,7 +179,7 @@ var Player = function (_Component) {
         ),
         _react2.default.createElement(_Audio2.default, { onChange: function onChange(state) {
             return _this4.setState(_extends({}, state));
-          }, ref: 'audio', src: url }),
+          }, ref: 'audio', src: src }),
         _react2.default.createElement(
           'div',
           { className: (0, _noImportant.css)(styles.timeline), ref: 'container' },

package/player/styles/styles.js

@@ -28,7 +28,7 @@ exports.default = {
     left: 0,
     right: 0,
     height: 75,
-    zIndex: 99999,
+    zIndex: 999999,
     width: '100%'
   },
   play_and_stop: _extends({}, styleDisplayInlineBlock, {

package/recorder/DesktopAudioRecorder.js

@@ -109,6 +109,7 @@ var DesktopAudioRecorder = function (_Component) {
     key: 'record',
     value: function record() {
       this.setState({
+        recordedData: null,
         isRecording: true
       });
     }
@@ -150,12 +151,37 @@ var DesktopAudioRecorder = function (_Component) {
     value: function onMediaError(e) {
       console.error('media error', e);
     }
+
+    // This is just for demo purposes: in real life we'll upload the file somewhere
+
+  }, {
+    key: 'updateAudioDom',
+    value: function updateAudioDom() {
+      var recordedData = this.state.recordedData;
+
+      var audioEl = document.querySelector('audio');
+
+      if (audioEl) {
+        var wav = (0, _audio.audioBufferToWav)(recordedData);
+        var audioBlob = new Blob([wav], { type: 'audio/wav' });
+        var reader = new FileReader();
+        reader.onload = function (e) {
+          // e.target.result will hold the base64 data.
+          // Note: It includes the pre-text "data:audio/<format>;base64,<base64 data>"
+          audioEl.src = e.target.result;
+        };
+        reader.readAsDataURL(audioBlob);
+      }
+    }
   }, {
     key: 'stopRecording',
     value: function stopRecording() {
       this.setState({
         isRecording: false
       });
+
+      // Update audio element with new file
+      this.updateAudioDom();
     }
   }]);
 

package/recorder/DesktopRecorder.js

@@ -118,7 +118,6 @@ var DesktopRecorder = function (_Component) {
       var recordedData = this.state.recordedData;
 
       var mergedBuffer = (0, _audio.appendBuffer)(recordedData, audioBuffer);
-      console.log("mergedBuffer", mergedBuffer);
       this.setState({
         recordedData: mergedBuffer
       });

package/stories/player.js

@@ -62,7 +62,7 @@ var PlayerExample = function (_Component) {
             'http://lls-media-public.s3.amazonaws.com/upload/LeLivreScolaire/p15vcjbl4lvpl9l7g8ov8ammh1.mp3'
           )
         ),
-        _react2.default.createElement(_player2.default, { url: this.state.url })
+        _react2.default.createElement(_player2.default, { src: this.state.url })
       );
     }
   }]);

package/stories/recorder.js

@@ -22,8 +22,8 @@ var RecorderExample = function RecorderExample() {
   return _react2.default.createElement(
     'div',
     null,
-    _react2.default.createElement(_player2.default, { url: 'english.mp3' }),
-    _react2.default.createElement(_recorder2.default, null)
+    _react2.default.createElement(_recorder2.default, null),
+    _react2.default.createElement('audio', { controls: true })
   );
 };
 

package/utils/audio.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.convertBlobToaudioBuffer = exports.appendBuffer = exports.convertAudioBufferToWaveform = exports.getWaveform = undefined;
+exports.audioBufferToWav = exports.convertBlobToaudioBuffer = exports.appendBuffer = exports.convertAudioBufferToWaveform = exports.getWaveform = undefined;
 
 var _audioContext = require('./audioContext');
 
@@ -120,4 +120,93 @@ var convertBlobToaudioBuffer = exports.convertBlobToaudioBuffer = function conve
     });
   };
   fileReader.readAsArrayBuffer(blob);
+};
+
+var audioBufferToWav = exports.audioBufferToWav = function audioBufferToWav(buffer, opt) {
+  opt = opt || {};
+
+  var numChannels = buffer.numberOfChannels;
+  var sampleRate = buffer.sampleRate;
+  var format = opt.float32 ? 3 : 1;
+  var bitDepth = format === 3 ? 32 : 16;
+
+  var result = numChannels === 2 ? interleave(buffer.getChannelData(0), buffer.getChannelData(1)) : buffer.getChannelData(0);
+
+  return encodeWAV(result, format, sampleRate, numChannels, bitDepth);
+};
+
+var encodeWAV = function encodeWAV(samples, format, sampleRate, numChannels, bitDepth) {
+  var bytesPerSample = bitDepth / 8;
+  var blockAlign = numChannels * bytesPerSample;
+
+  var buffer = new ArrayBuffer(44 + samples.length * bytesPerSample);
+  var view = new DataView(buffer);
+
+  /* RIFF identifier */
+  writeString(view, 0, 'RIFF');
+  /* RIFF chunk length */
+  view.setUint32(4, 36 + samples.length * bytesPerSample, true);
+  /* RIFF type */
+  writeString(view, 8, 'WAVE');
+  /* format chunk identifier */
+  writeString(view, 12, 'fmt ');
+  /* format chunk length */
+  view.setUint32(16, 16, true);
+  /* sample format (raw) */
+  view.setUint16(20, format, true);
+  /* channel count */
+  view.setUint16(22, numChannels, true);
+  /* sample rate */
+  view.setUint32(24, sampleRate, true);
+  /* byte rate (sample rate * block align) */
+  view.setUint32(28, sampleRate * blockAlign, true);
+  /* block align (channel count * bytes per sample) */
+  view.setUint16(32, blockAlign, true);
+  /* bits per sample */
+  view.setUint16(34, bitDepth, true);
+  /* data chunk identifier */
+  writeString(view, 36, 'data');
+  /* data chunk length */
+  view.setUint32(40, samples.length * bytesPerSample, true);
+  if (format === 1) {
+    // Raw PCM
+    floatTo16BitPCM(view, 44, samples);
+  } else {
+    writeFloat32(view, 44, samples);
+  }
+  return buffer;
+};
+
+var interleave = function interleave(inputL, inputR) {
+  var length = inputL.length + inputR.length;
+  var result = new Float32Array(length);
+
+  var index = 0;
+  var inputIndex = 0;
+
+  while (index < length) {
+    result[index++] = inputL[inputIndex];
+    result[index++] = inputR[inputIndex];
+    inputIndex++;
+  }
+  return result;
+};
+
+var writeFloat32 = function writeFloat32(output, offset, input) {
+  for (var i = 0; i < input.length; i++, offset += 4) {
+    output.setFloat32(offset, input[i], true);
+  }
+};
+
+var floatTo16BitPCM = function floatTo16BitPCM(output, offset, input) {
+  for (var i = 0; i < input.length; i++, offset += 2) {
+    var s = Math.max(-1, Math.min(1, input[i]));
+    output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+  }
+};
+
+var writeString = function writeString(view, offset, string) {
+  for (var i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
 };