@lls/lls-audio 0.0.71 → 0.0.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/lls-audio",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "main": "index.js",
   "devDependencies": {
     "@kadira/storybook": "2.21.0",

package/recorder/AudioWorker.js

@@ -5,126 +5,136 @@ Object.defineProperty(exports, "__esModule", {
 });
 var AudioWorker = function AudioWorker(self) {
   var recLength = 0;
+  var buffersToProcess = [];
   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 processBuffers = function processBuffers() {
+    buffersToProcess.forEach(function (_ref) {
+      var timestamp = _ref.timestamp,
+          inputBuffer = _ref.inputBuffer;
+
+      appendBuffer(timestamp, inputBuffer);
+    });
+  };
+
+  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 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) {
-      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' });
-    };
+  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;
+  };
+
+  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 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) {
+    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) {
+    processBuffers(); // append all buffers together
+
+    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);
+    return new Blob([dataview], { type: 'audio/wav' });
+  };
+
+  self.onmessage = function (e) {
     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 });
+        buffersToProcess.push({
+          timestamp: e.data.timestamp,
+          inputBuffer: e.data.inputBuffer
+        });
         break;
       case 'exportWAV':
-        exportWAV(e.data.beginning, e.data.end);
-        postMessage({ command: 'send_WAV', audioBlob: audioBlob });
-        break;
-      case 'clean':
+        var _audioBlob = exportWAV(e.data.beginning, e.data.end);
+        postMessage({ command: 'send_WAV', audioBlob: _audioBlob });
+
+        // Clean variables
         recLength = 0;
         recBuffers = [];
-        audioBlob = null;
+        buffersToProcess = [];
         break;
     }
   };

package/recorder/Visualizer.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -13,20 +15,30 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 } });
+      style = _ref.style;
+  return _react2.default.createElement('circle', { r: radius / maxRadius, style: _extends({ transition: 'all 0.1s', opacity: 0.2 + radius / maxRadius }, style) });
 };
 
 var Visualizer = function Visualizer(_ref2) {
-  var volume = _ref2.volume;
-
-  var radius = (100 + volume) / 2;
-  radius = radius < 0 ? 0 : radius;
-
+  var _ref2$width = _ref2.width,
+      width = _ref2$width === undefined ? 100 : _ref2$width,
+      volume = _ref2.volume,
+      _ref2$maxRadius = _ref2.maxRadius,
+      maxRadius = _ref2$maxRadius === undefined ? 100 : _ref2$maxRadius,
+      _ref2$minRadius = _ref2.minRadius,
+      minRadius = _ref2$minRadius === undefined ? 50 : _ref2$minRadius,
+      _ref2$style = _ref2.style,
+      style = _ref2$style === undefined ? { fill: 'red' } : _ref2$style;
+
+  var radius = minRadius + (maxRadius - minRadius) * volume / 100;
   return _react2.default.createElement(
-    'svg',
-    null,
-    _react2.default.createElement(Circle, { radius: radius, maxRadius: 100 })
+    'div',
+    { style: { width: width } },
+    _react2.default.createElement(
+      'svg',
+      { viewBox: '-1 -1 2 2' },
+      _react2.default.createElement(Circle, { radius: radius, maxRadius: maxRadius, style: style })
+    )
   );
 };
 

package/recorder/index.js

@@ -40,10 +40,13 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 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();
 
+// make the volume a value between 0 and 100
+var formatVolume = function formatVolume(volume) {
+  return Math.max(0, Math.min(100, volume + 100));
+};
+
 var initRecorder = function initRecorder(_ref) {
   var stream = _ref.stream,
       audioContext = _ref.audioContext,
@@ -83,11 +86,12 @@ var initSpeechEvents = function initSpeechEvents(_ref3) {
       _ref3$onStoppedSpeaki = _ref3.onStoppedSpeaking,
       onStoppedSpeaking = _ref3$onStoppedSpeaki === undefined ? function () {} : _ref3$onStoppedSpeaki,
       _ref3$onVolumeChange = _ref3.onVolumeChange,
-      onVolumeChange = _ref3$onVolumeChange === undefined ? function () {} : _ref3$onVolumeChange;
+      onVolumeChange = _ref3$onVolumeChange === undefined ? function () {} : _ref3$onVolumeChange,
+      debounce = _ref3.debounce;
 
   // Try hark
   var options = {
-    interval: INTERVAL
+    interval: debounce
     //play: true // true: allow to hear the result for debug
   };
   var speechEvents = (0, _hark2.default)(stream, options);
@@ -114,7 +118,6 @@ var Recorder = function (_Component) {
 
     // Data
     _this.recordStart = null;
-    _this.audioBuffer = [];
     _this.audioStream = null;
 
     // Methods
@@ -147,7 +150,9 @@ var Recorder = function (_Component) {
     value: function init(props) {
       var _this2 = this;
 
-      var _props$onNotAvailable = props.onNotAvailable,
+      var _props$debounce = props.debounce,
+          debounce = _props$debounce === undefined ? 200 : _props$debounce,
+          _props$onNotAvailable = props.onNotAvailable,
           onNotAvailable = _props$onNotAvailable === undefined ? function () {} : _props$onNotAvailable,
           _props$onError = props.onError,
           onError = _props$onError === undefined ? function () {} : _props$onError,
@@ -164,7 +169,8 @@ var Recorder = function (_Component) {
           stream: stream,
           onError: onError,
           onVolumeChange: onVolumeChange,
-          onRecordComplete: onRecordComplete
+          onRecordComplete: onRecordComplete,
+          debounce: debounce
         });
       }).catch(function (err) {
         onNotAvailable(err);
@@ -178,17 +184,14 @@ var Recorder = function (_Component) {
       var stream = _ref4.stream,
           onError = _ref4.onError,
           _onVolumeChange = _ref4.onVolumeChange,
-          onRecordComplete = _ref4.onRecordComplete;
+          onRecordComplete = _ref4.onRecordComplete,
+          debounce = _ref4.debounce;
 
       // Init worker that will do heavy calculation
       this.audioStream = stream;
       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;
           }
@@ -204,7 +207,8 @@ var Recorder = function (_Component) {
             inputBuffer.push(e.inputBuffer.getChannelData(channel));
           }
           _this3.worker.postMessage({ command: 'append', timestamp: Date.now(), inputBuffer: inputBuffer });
-        }
+        },
+        debounce: debounce
       });
 
       // Initialize hark for silence recognition
@@ -212,19 +216,19 @@ var Recorder = function (_Component) {
         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 = [];
+            console.log("exportWAV");
+            _this3.worker.postMessage({ command: 'exportWAV', beginning: _this3.recordStart, end: Date.now() });
           } catch (e) {
             onError(e);
           }
         },
         onSpeaking: function onSpeaking() {
-          _this3.recordStart = Date.now() - INTERVAL * 3; // give it a bit of extra time
+          _this3.recordStart = Date.now() - debounce * 3; // give it a bit of extra time
         },
         onVolumeChange: function onVolumeChange(volume) {
-          _onVolumeChange(volume);
-        }
+          _onVolumeChange(formatVolume(volume));
+        },
+        debounce: debounce
       });
     }
   }, {

package/stories/visualizer.js

@@ -61,9 +61,16 @@ var VisualizerExample = function (_Component) {
         'div',
         null,
         _react2.default.createElement(_recorder2.default, {
+          debounce: 100,
           onVolumeChange: this.setVolume,
           onError: function onError(err) {
             return console.log('error', err);
+          },
+          onRecordComplete: function onRecordComplete() {
+            return console.log('onRecordComplete');
+          },
+          onNotAvailable: function onNotAvailable() {
+            return console.log('not available');
           }
         }),
         _react2.default.createElement(_Visualizer2.default, { volume: volume })

package/stories/wordDetector.js

@@ -37,15 +37,15 @@ var onNotAvailable = function onNotAvailable() {
 var onError = function onError(e) {
   return console.log("onError", e);
 };
-var onSuccess = function onSuccess(res, attempts) {
-  return console.log({ res: res, attempts: attempts });
+var onSuccess = function onSuccess(res) {
+  return console.log("onSucces", res);
 };
-var onFailure = function onFailure(res, attempts) {
-  return console.log({ res: res, attempts: attempts });
+var onFailure = function onFailure(res) {
+  return console.log("onFailure", res);
 };
 
 var CONFIG = {
-  API_URL: 'http://localhost:3004/speechtotext'
+  API_URL: 'https://api-dev.lelivrescolaire.fr/speechtotext'
 
   // Instanciate component with config
 };var WordDetectorComponent = (0, _wordDetector.createWordDetector)(CONFIG);
@@ -84,7 +84,6 @@ var WordDetectorExample = function (_Component) {
           onError: onError,
           onSuccess: onSuccess,
           onFailure: onFailure,
-          record: true,
           onRecordComplete: onRecordComplete
         })
       );

package/wordDetector/index.js

@@ -36,9 +36,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var SIMILARITY_THRESHOLD = 0.8;
 var isSpeechRecognitionAvailable = (0, _reactSpeechRecognizer.speechRecognitionAvailable)();
 
-var debug = function debug(wav) {
-  //FileSaver.saveAs(wav, 'test.wav')
-};
+/*
+const debug = (wav) => {
+  FileSaver.saveAs(wav, 'test.wav')
+}*/
 
 var sendFileToSpeechToTextApi = function sendFileToSpeechToTextApi(API_URL, wav) {
   return new Promise(function (resolve, reject) {
@@ -73,8 +74,7 @@ var WordDetector = function (_Component) {
     var _this = _possibleConstructorReturn(this, (WordDetector.__proto__ || Object.getPrototypeOf(WordDetector)).call(this, props));
 
     _this.state = {
-      attempts: 0,
-      browserApiAvailable: true
+      attempts: 0
     };
     _this.onError = _this.onError.bind(_this);
     _this.onSuccess = _this.onSuccess.bind(_this);
@@ -86,23 +86,27 @@ var WordDetector = function (_Component) {
 
   _createClass(WordDetector, [{
     key: 'onSuccess',
-    value: function onSuccess(res, attempts) {
+    value: function onSuccess(res, attempts, url) {
       var onSuccess = this.props.onSuccess;
 
       this.setState({
-        attempts: attempts
+        attempts: 0
+      });
+      onSuccess({
+        res: res, attempts: attempts, url: url
       });
-      onSuccess(res, attempts);
     }
   }, {
     key: 'onFailure',
-    value: function onFailure(res, attempts) {
+    value: function onFailure(res, attempts, url) {
       var onFailure = this.props.onFailure;
 
       this.setState({
         attempts: attempts
       });
-      onFailure(res, attempts);
+      onFailure({
+        res: res, attempts: attempts, url: url
+      });
     }
   }, {
     key: 'onError',
@@ -114,8 +118,10 @@ var WordDetector = function (_Component) {
   }, {
     key: 'onApiResult',
     value: function onApiResult(_ref) {
-      var _ref$transcript = _ref.transcript,
-          transcript = _ref$transcript === undefined ? '' : _ref$transcript;
+      var speechToText = _ref.speechToText,
+          url = _ref.url;
+
+      var transcript = speechToText && speechToText[0];
       var attempts = this.state.attempts;
       var _props = this.props,
           word = _props.word,
@@ -124,7 +130,7 @@ var WordDetector = function (_Component) {
       var incrementedAttempts = attempts + 1;
       var success = compare(word, transcript);
       var cb = success ? this.onSuccess : this.onFailure;
-      cb(transcript, incrementedAttempts);
+      cb(transcript, incrementedAttempts, url);
     }
   }, {
     key: 'onRecordComplete',
@@ -133,46 +139,27 @@ var WordDetector = function (_Component) {
 
       //debug(wav)
       var _props2 = this.props,
-          alwaysUseApi = _props2.alwaysUseApi,
           config = _props2.config,
           onRecordComplete = _props2.onRecordComplete;
       var API_URL = config.API_URL;
-      var browserApiAvailable = this.state.browserApiAvailable;
 
 
-      var useHtmlDetector = isSpeechRecognitionAvailable && !alwaysUseApi;
-
-      // Upload to Speech to text Api
-      if (!useHtmlDetector) {
-        if (!API_URL) {
-          return this.onError(new Error('Missing API_URL in CONF'));
-        }
-
-        sendFileToSpeechToTextApi(API_URL, wav).then(function (res) {
-          _this2.onApiResult(res);
-        }).catch(function (e) {
-          _this2.onError(e);
-        });
+      if (!API_URL) {
+        return this.onError(new Error('Missing API_URL in CONF'));
       }
 
+      sendFileToSpeechToTextApi(API_URL, wav).then(function (res) {
+        _this2.onApiResult(JSON.parse(res));
+      }).catch(function (e) {
+        _this2.onError(e);
+      });
+
       onRecordComplete(wav);
     }
   }, {
     key: 'render',
     value: function render() {
-      var _props3 = this.props,
-          record = _props3.record,
-          word = _props3.word,
-          compare = _props3.compare,
-          alwaysUseApi = _props3.alwaysUseApi;
-
-      var useHtmlDetector = isSpeechRecognitionAvailable && !alwaysUseApi;
-      return _react2.default.createElement(
-        'div',
-        null,
-        useHtmlDetector ? _react2.default.createElement(_reactSpeechRecognizer.WordDetector, { word: word, compare: compare, onFailure: this.onFailure, onSuccess: this.onSuccess }) : _react2.default.createElement(_recorder2.default, { onError: this.onError, onRecordComplete: this.onRecordComplete }),
-        useHtmlDetector && record && _react2.default.createElement(_recorder2.default, { onError: this.onError, onRecordComplete: this.onRecordComplete })
-      );
+      return _react2.default.createElement(_recorder2.default, { onError: this.onError, onRecordComplete: this.onRecordComplete });
     }
   }]);
 
@@ -180,9 +167,7 @@ var WordDetector = function (_Component) {
 }(_react.Component);
 
 WordDetector.defaultProps = {
-  alwaysUseApi: true,
   config: {},
-  record: false,
   word: '',
   compare: defaultCompare,
   onRecordComplete: function onRecordComplete() {},