@lls/lls-audio 0.0.59 → 0.0.61

package/package.json

@@ -1,39 +1,41 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "main": "index.js",
   "devDependencies": {
-    "@kadira/storybook": "^2.21.0",
-    "css-loader": "^0.26.1",
-    "style-loader": "^0.13.1",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
-    "babel-cli": "^6.9.0",
-    "superheroes": "^1.0.0",
-    "conventional-changelog": "^1.1.0",
-    "conventional-changelog-cli": "^1.2.0",
-    "@kadira/storybook-deployer": "^1.0.0",
-    "release-it": "^2.4.0",
+    "@kadira/storybook": "2.21.0",
+    "@kadira/storybook-deployer": "1.0.0",
+    "@lls/lls-icons": "*",
+    "@lls/lls-ui": "*",
+    "aphrodite": "0.5.0",
+    "babel-cli": "6.9.0",
+    "babel-preset-es2015": "6.3.13",
+    "babel-preset-react": "6.3.13",
+    "babel-preset-stage-0": "6.3.13",
+    "conventional-changelog": "1.1.0",
+    "conventional-changelog-cli": "1.2.0",
+    "css-loader": "0.26.1",
+    "file-saver": "^1.3.3",
     "react": "15.3.1",
     "react-dom": "15.3.1",
-    "@lls/lls-ui": "*",
-    "@lls/lls-icons": "*",
-    "aphrodite": "0.5.0"
+    "release-it": "2.4.0",
+    "similarity": "1.1.1",
+    "style-loader": "0.13.1",
+    "superheroes": "1.0.0"
   },
   "dependencies": {
-    "is_js": "^0.9.0",
-    "merge-audio-buffers": "^1.0.0",
-    "msr": "^1.3.4",
-    "react-input-range": "^0.9.3",
-    "waveform-data": "^2.0.0"
+    "hark": "1.1.5",
+    "inline-worker": "1.1.0",
+    "is_js": "0.9.0",
+    "react-input-range": "0.9.3",
+    "waveform-data": "2.0.0"
   },
   "peerDependencies": {
-    "aphrodite": "^0.5.0",
-    "react": "*",
-    "react-dom": "*",
     "@lls/lls-icons": "*",
-    "@lls/lls-ui": "*"
+    "@lls/lls-ui": "*",
+    "aphrodite": "0.5.0",
+    "react": "*",
+    "react-dom": "*"
   },
   "engines": {
     "node": ">=0.12.0"

package/player/Play.js

@@ -18,19 +18,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var generateStyles = function generateStyles(_ref) {
-  var _play_button_wrapper;
-
   var size = _ref.size,
       invert = _ref.invert,
       transitionDuration = _ref.transitionDuration;
   return _noImportant.StyleSheet.create({
-    play_button_wrapper: (_play_button_wrapper = {
+    play_button_wrapper: {
       height: '100%',
-      width: size * 2.5
-    }, _defineProperty(_play_button_wrapper, 'height', size * 2.5), _defineProperty(_play_button_wrapper, 'color', '#6d6d6d'), _defineProperty(_play_button_wrapper, 'textAlign', 'center'), _defineProperty(_play_button_wrapper, 'boxSizing', 'border-box'), _defineProperty(_play_button_wrapper, 'backgroundColor', invert ? 'white' : _colors.BLUE), _defineProperty(_play_button_wrapper, 'borderRadius', '50%'), _defineProperty(_play_button_wrapper, 'display', 'flex'), _defineProperty(_play_button_wrapper, 'alignItems', 'center'), _defineProperty(_play_button_wrapper, 'justifyContent', 'center'), _defineProperty(_play_button_wrapper, 'cursor', 'pointer'), _play_button_wrapper),
+      width: size * 2.5,
+      height: size * 2.5,
+      color: '#6d6d6d',
+      textAlign: 'center',
+      boxSizing: 'border-box',
+      backgroundColor: invert ? 'white' : _colors.BLUE,
+      borderRadius: '50%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer'
+    },
     play_button: {
       'height': size,
       'width': size,

package/player/styles/styles.js

@@ -29,10 +29,12 @@ exports.default = {
   inline: {
     width: '100%'
   },
-  volume: {
+  volume: _defineProperty({
     width: 100,
     cursor: 'pointer'
-  },
+  }, _mediaQueries.MOBILE, {
+    width: 55
+  }),
   iconAudio: {
     color: _colors.BLUE,
     marginRight: 20,
@@ -58,8 +60,7 @@ exports.default = {
     width: 'calc(100% - 430px)',
     display: 'flex'
   }, _mediaQueries.MOBILE, {
-    flex: '1 100%',
-    order: 2,
+    width: 'calc(100% - 225px)',
     margin: '0px 28px'
   }),
   content: {
@@ -88,20 +89,34 @@ exports.default = {
   wavetimeline: _defineProperty({}, _mediaQueries.MOBILE, {
     display: 'none'
   }),
-  loader: {
+  loader: _defineProperty({
     height: 60,
     color: '#00b3df',
     fontSize: 10,
     fontWeight: 'bold',
     lineHeight: '60px',
     textAlign: 'center'
-  },
-  loaderText: {
+  }, _mediaQueries.MOBILE, {
+    lineHeight: 1.5
+  }),
+  loaderText: _defineProperty({
     textTransform: 'uppercase'
-  },
-  loaderOne: {},
-  loaderTwo: {},
-  loaderThree: {},
+  }, _mediaQueries.MOBILE, {
+    position: 'relative',
+    top: 30
+  }),
+  loaderOne: _defineProperty({}, _mediaQueries.MOBILE, {
+    position: 'relative',
+    top: 30
+  }),
+  loaderTwo: _defineProperty({}, _mediaQueries.MOBILE, {
+    position: 'relative',
+    top: 30
+  }),
+  loaderThree: _defineProperty({}, _mediaQueries.MOBILE, {
+    position: 'relative',
+    top: 30
+  }),
   timeline: _defineProperty({
     width: '100%',
     margin: '0px 20px',
@@ -117,11 +132,13 @@ exports.default = {
     fontSize: 23,
     cursor: 'pointer'
   }, _mediaQueries.MOBILE, {
-    marginRight: 37
+    display: 'none'
   }),
-  speed_menu: {
+  speed_menu: _defineProperty({
     marginLeft: 10
-  },
+  }, _mediaQueries.MOBILE, {
+    display: 'none'
+  }),
   close: {
     cursor: 'pointer',
     position: 'absolute',

package/recorder/AudioWorker.js

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var AudioWorker = function AudioWorker(self) {
+  var recLength = 0;
+  var recBuffers = [];
+  var audioBlob = null;
+
+  self.onmessage = function (e) {
+    var mergeBuffers = function mergeBuffers(recBuffers, recLength) {
+      var result = new Float32Array(recLength);
+      var offset = 0;
+      for (var i = 0; i < recBuffers.length; i++) {
+        result.set(recBuffers[i], offset);
+        offset += recBuffers[i].length;
+      }
+      return result;
+    };
+
+    var appendBuffer = function appendBuffer(timestamp, inputBuffer) {
+      for (var channel = 0; channel < inputBuffer.length; channel++) {
+        if (!recBuffers[channel]) recBuffers[channel] = [];
+        recBuffers[channel].push({ timestamp: timestamp, data: inputBuffer[channel], length: inputBuffer[channel].length });
+      }
+      recLength += inputBuffer[0].length;
+    };
+
+    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 writeString = function writeString(view, offset, string) {
+      for (var i = 0; i < string.length; i++) {
+        view.setUint8(offset + i, string.charCodeAt(i));
+      }
+    };
+
+    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 encodeWAV = function encodeWAV(samples) {
+      console.log("samples", samples.length);
+      var buffer = new ArrayBuffer(44 + samples.length * 2);
+      var view = new DataView(buffer);
+
+      /* RIFF identifier */
+      writeString(view, 0, 'RIFF');
+      /* RIFF chunk length */
+      view.setUint32(4, 36 + samples.length * 2, 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, 1, true);
+      /* channel count */
+      view.setUint16(22, recBuffers.length, true);
+      /* sample rate */
+      view.setUint32(24, 44100, true);
+      /* byte rate (sample rate * block align) */
+      view.setUint32(28, 44100 * recBuffers.length * 2, true);
+      /* block align (channel count * bytes per sample) */
+      view.setUint16(32, recBuffers.length * 2, true);
+      /* bits per sample */
+      view.setUint16(34, 16, true);
+      /* data chunk identifier */
+      writeString(view, 36, 'data');
+      /* data chunk length */
+      view.setUint32(40, samples.length * 2, true);
+
+      floatTo16BitPCM(view, 44, samples);
+
+      return view;
+    };
+
+    var exportWAV = function exportWAV(beginning, end) {
+      var buffers = [];
+      for (var channel = 0; channel < recBuffers.length; channel++) {
+        var length = 0;
+        var filtredRecBuffers = recBuffers[channel].filter(function (buffer) {
+          return buffer.timestamp >= beginning - 1000 && buffer.timestamp <= end;
+        }).map(function (buffer) {
+          length += buffer.length;
+          return buffer.data;
+        });
+        buffers.push(mergeBuffers(filtredRecBuffers, length));
+      }
+      var interleaved = recBuffers.length === 2 ? interleave(buffers[0], buffers[1]) : buffers[0];
+      var dataview = encodeWAV(interleaved);
+      audioBlob = new Blob([dataview], { type: 'audio/wav' });
+    };
+
+    switch (e.data.command) {
+      case 'append':
+        appendBuffer(e.data.timestamp, e.data.inputBuffer);
+        var buffers = [];
+        for (var channel = 0; channel < recBuffers.length; channel++) {
+          buffers.push(mergeBuffers(recBuffers[channel], recLength));
+        }
+        postMessage({ command: 'send_buffers', buffers: recBuffers });
+        break;
+      case 'exportWAV':
+        exportWAV(e.data.beginning, e.data.end);
+        postMessage({ command: 'send_WAV', audioBlob: audioBlob });
+        break;
+      case 'clean':
+        recLength = 0;
+        recBuffers = [];
+        audioBlob = null;
+        break;
+    }
+  };
+};
+
+exports.default = AudioWorker;

package/recorder/Visualizer.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Circle = function Circle(_ref) {
+  var radius = _ref.radius,
+      maxRadius = _ref.maxRadius,
+      color = _ref.color;
+  return _react2.default.createElement('circle', { r: radius, cx: 100, cy: 100, style: { 'transition': 'all 0.1s', 'fill': 'red', opacity: 0.2 + radius / maxRadius } });
+};
+
+var Visualizer = function Visualizer(_ref2) {
+  var volume = _ref2.volume;
+
+  var radius = (100 + volume) / 2;
+  radius = radius < 0 ? 0 : radius;
+
+  return _react2.default.createElement(
+    'svg',
+    null,
+    _react2.default.createElement(Circle, { radius: radius, maxRadius: 100 })
+  );
+};
+
+exports.default = Visualizer;

package/recorder/index.js

@@ -4,32 +4,219 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _is_js = require('is_js');
+var _CustomWave = require('../player/CustomWave');
+
+var _CustomWave2 = _interopRequireDefault(_CustomWave);
+
+var _audioContext = require('../utils/audioContext');
+
+var _audioContext2 = _interopRequireDefault(_audioContext);
+
+var _mediaDevices = require('../utils/mediaDevices');
 
-var _DesktopAudioRecorder = require('./DesktopAudioRecorder');
+var _hark = require('hark');
 
-var _DesktopAudioRecorder2 = _interopRequireDefault(_DesktopAudioRecorder);
+var _hark2 = _interopRequireDefault(_hark);
 
-var _MobileRecorder = require('./MobileRecorder');
+var _inlineWorker = require('inline-worker');
 
-var _MobileRecorder2 = _interopRequireDefault(_MobileRecorder);
+var _inlineWorker2 = _interopRequireDefault(_inlineWorker);
+
+var _AudioWorker = require('./AudioWorker');
+
+var _AudioWorker2 = _interopRequireDefault(_AudioWorker);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Check browser support
-var isUserMediaSupported = !!(window.navigator.getUserMedia || window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || window.navigator.msGetUserMedia);
-var desktop = !((0, _is_js.tablet)() && (0, _is_js.mobile)());
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var INTERVAL = 100;
+
+var audioContext = new _audioContext2.default();
+
+var initRecorder = function initRecorder(_ref) {
+  var stream = _ref.stream,
+      audioContext = _ref.audioContext,
+      _ref$onAudioProcess = _ref.onAudioProcess,
+      onAudioProcess = _ref$onAudioProcess === undefined ? function () {} : _ref$onAudioProcess;
+
+  var bufferSize = 4096;
+  var numberOfInputChannels = 1; // for google cloud Speech to text, we must have one (and only one) channel
+  var numberOfOutputChannels = 1;
+
+  // creates an audio node from the microphone incoming stream
+  var mediaStream = audioContext.createMediaStreamSource(stream);
+  var recorder = audioContext.createScriptProcessor ? audioContext.createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels) : audioContext.createJavaScriptNode(bufferSize, numberOfInputChannels, numberOfOutputChannels);
+
+  recorder.onaudioprocess = onAudioProcess;
+
+  // we connect the recorder with the input stream
+  mediaStream.connect(recorder);
+  recorder.connect(audioContext.destination);
+
+  return recorder;
+};
+
+var initWorker = function initWorker(_ref2) {
+  var _ref2$onMessage = _ref2.onMessage,
+      onMessage = _ref2$onMessage === undefined ? function () {} : _ref2$onMessage;
+
+  var worker = new _inlineWorker2.default(_AudioWorker2.default, {});
+  worker.onmessage = onMessage;
+  return worker;
+};
+
+var initSpeechEvents = function initSpeechEvents(_ref3) {
+  var stream = _ref3.stream,
+      _ref3$onSpeaking = _ref3.onSpeaking,
+      onSpeaking = _ref3$onSpeaking === undefined ? function () {} : _ref3$onSpeaking,
+      _ref3$onStoppedSpeaki = _ref3.onStoppedSpeaking,
+      onStoppedSpeaking = _ref3$onStoppedSpeaki === undefined ? function () {} : _ref3$onStoppedSpeaki,
+      _ref3$onVolumeChange = _ref3.onVolumeChange,
+      onVolumeChange = _ref3$onVolumeChange === undefined ? function () {} : _ref3$onVolumeChange;
+
+  // Try hark
+  var options = {
+    interval: INTERVAL
+    //play: true // true: allow to hear the result for debug
+  };
+  var speechEvents = (0, _hark2.default)(stream, options);
 
-var Recorder = function Recorder() {
-  return desktop ? isUserMediaSupported ? _react2.default.createElement(_DesktopAudioRecorder2.default, null) : _react2.default.createElement(
-    'div',
-    null,
-    ' not supported '
-  ) : _react2.default.createElement(_MobileRecorder2.default, null);
+  speechEvents.on('speaking', onSpeaking);
+  speechEvents.on('stopped_speaking', onStoppedSpeaking);
+  speechEvents.on('volume_change', onVolumeChange);
+
+  return speechEvents;
 };
 
-exports.default = Recorder;
+var DesktopAudioRecorder = function (_Component) {
+  _inherits(DesktopAudioRecorder, _Component);
+
+  function DesktopAudioRecorder(props) {
+    _classCallCheck(this, DesktopAudioRecorder);
+
+    // Instances
+    var _this = _possibleConstructorReturn(this, (DesktopAudioRecorder.__proto__ || Object.getPrototypeOf(DesktopAudioRecorder)).call(this, props));
+
+    _this.worker = null;
+    _this.recorder = null;
+    _this.speechEvents = null;
+
+    // Data
+    _this.recordStart = null;
+    _this.audioBuffer = [];
+
+    // Methods
+    _this.init = _this.init.bind(_this);
+    _this.initStream = _this.initStream.bind(_this);
+    return _this;
+  }
+
+  _createClass(DesktopAudioRecorder, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.init(this.props);
+    }
+  }, {
+    key: 'init',
+    value: function init(props) {
+      var _this2 = this;
+
+      var _props$onError = props.onError,
+          onError = _props$onError === undefined ? function () {} : _props$onError,
+          _props$onVolumeChange = props.onVolumeChange,
+          onVolumeChange = _props$onVolumeChange === undefined ? function () {} : _props$onVolumeChange,
+          _props$onRecordComple = props.onRecordComplete,
+          onRecordComplete = _props$onRecordComple === undefined ? function () {} : _props$onRecordComple;
+
+
+      (0, _mediaDevices.shimMediaDevices)();
+
+      window.navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
+        _this2.initStream({
+          stream: stream,
+          onError: onError,
+          onVolumeChange: onVolumeChange,
+          onRecordComplete: onRecordComplete
+        });
+      }).catch(function (err) {
+        onError(err);
+      });
+    }
+  }, {
+    key: 'initStream',
+    value: function initStream(_ref4) {
+      var _this3 = this;
+
+      var stream = _ref4.stream,
+          onError = _ref4.onError,
+          _onVolumeChange = _ref4.onVolumeChange,
+          onRecordComplete = _ref4.onRecordComplete;
+
+      // Init worker that will do heavy calculation
+      this.worker = initWorker({ onMessage: function onMessage(e) {
+          switch (e.data.command) {
+            case 'send_buffers':
+              _this3.audioBuffer = e.data.buffers;
+              break;
+            case 'send_WAV':
+              //const url = (window.URL || window.webkitURL).createObjectURL(e.data.audioBlob)
+              onRecordComplete(e.data.audioBlob);
+              break;
+          }
+        } });
+
+      // Init recorder
+      this.recorder = initRecorder({
+        stream: stream,
+        audioContext: audioContext,
+        onAudioProcess: function onAudioProcess(e) {
+          var inputBuffer = [];
+          for (var channel = 0; channel < e.inputBuffer.numberOfChannels; channel++) {
+            inputBuffer.push(e.inputBuffer.getChannelData(channel));
+          }
+          _this3.worker.postMessage({ command: 'append', timestamp: Date.now(), inputBuffer: inputBuffer });
+        }
+      });
+
+      // Initialize hark for silence recognition
+      this.speechEvents = initSpeechEvents({
+        stream: stream,
+        onStoppedSpeaking: function onStoppedSpeaking() {
+          try {
+            _this3.worker.postMessage({ command: 'exportWAV', buffers: _this3.audioBuffer, beginning: _this3.recordStart, end: Date.now() });
+            _this3.worker.postMessage({ command: 'clean' });
+            _this3.audioBuffer = [];
+          } catch (e) {
+            onError(e);
+          }
+        },
+        onSpeaking: function onSpeaking() {
+          _this3.recordStart = Date.now() - INTERVAL * 3; // give it a bit of extra time
+        },
+        onVolumeChange: function onVolumeChange(volume) {
+          _onVolumeChange(volume);
+        }
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return null;
+    }
+  }]);
+
+  return DesktopAudioRecorder;
+}(_react.Component);
+
+exports.default = DesktopAudioRecorder;

package/stories/index.js

@@ -14,12 +14,17 @@ var _playerRange = require('./playerRange');
 
 var _playerRange2 = _interopRequireDefault(_playerRange);
 
-var _recorder = require('./recorder');
+var _visualizer = require('./visualizer');
 
-var _recorder2 = _interopRequireDefault(_recorder);
+var _visualizer2 = _interopRequireDefault(_visualizer);
+
+var _wordDetector = require('./wordDetector');
+
+var _wordDetector2 = _interopRequireDefault(_wordDetector);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+//import PlayerCustom from './playerCustom'
 (0, _storybook.storiesOf)('Player', module).add('Custom waveform', function () {
   return _react2.default.createElement(_player2.default, null);
 }).add('Ranges', function () {
@@ -31,8 +36,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 }).add('Caption', function () {
   return _react2.default.createElement(_player2.default, { caption: 'Je suis une caption :)' });
 });
-//import PlayerCustom from './playerCustom'
-
-(0, _storybook.storiesOf)('Recorder', module).add('Normal', function () {
-  return _react2.default.createElement(_recorder2.default, null);
+(0, _storybook.storiesOf)('Recorder', module).add('Visualizer', function () {
+  return _react2.default.createElement(_visualizer2.default, null);
+});
+(0, _storybook.storiesOf)('Word detector', module).add('Normal', function () {
+  return _react2.default.createElement(_wordDetector2.default, null);
 });