@lls/lls-audio 0.0.3

package/recorder/DesktopRecorder.js

@@ -0,0 +1,144 @@
+'use strict';
+
+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 _msr = require('msr');
+
+var _msr2 = _interopRequireDefault(_msr);
+
+var _Wave = require('../player/Wave');
+
+var _Wave2 = _interopRequireDefault(_Wave);
+
+var _audioContext = require('../utils/audioContext');
+
+var _audioContext2 = _interopRequireDefault(_audioContext);
+
+var _audio = require('../utils/audio');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 audioContext = new _audioContext2.default();
+
+var DesktopRecorder = function (_Component) {
+  _inherits(DesktopRecorder, _Component);
+
+  function DesktopRecorder(props) {
+    _classCallCheck(this, DesktopRecorder);
+
+    var _this = _possibleConstructorReturn(this, (DesktopRecorder.__proto__ || Object.getPrototypeOf(DesktopRecorder)).call(this, props));
+
+    _this.state = {
+      isRecording: false,
+      recordedData: null
+    };
+    _this.mediaRecorder = null;
+    _this.buffers = [];
+    return _this;
+  }
+
+  _createClass(DesktopRecorder, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _state = this.state,
+          isRecording = _state.isRecording,
+          recordedData = _state.recordedData;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        'Desktop recorder',
+        isRecording ? _react2.default.createElement(
+          'button',
+          { onClick: function onClick() {
+              return _this2.stopRecording();
+            } },
+          ' stop recording '
+        ) : _react2.default.createElement(
+          'button',
+          { onClick: function onClick() {
+              return _this2.record();
+            } },
+          ' record '
+        ),
+        recordedData ? _react2.default.createElement(_Wave2.default, {
+          width: 500,
+          currentTime: 0,
+          height: 40,
+          isLoading: false,
+          buffer: recordedData }) : null
+      );
+    }
+  }, {
+    key: 'record',
+    value: function record() {
+      var _this3 = this;
+
+      window.navigator.getUserMedia({ audio: true }, function (stream) {
+        return _this3.onMediaSuccess(stream);
+      }, function (stream) {
+        return _this3.onMediaError(stream);
+      });
+      this.setState({
+        isRecording: true
+      });
+    }
+  }, {
+    key: 'onMediaSuccess',
+    value: function onMediaSuccess(stream) {
+      var _this4 = this;
+
+      this.mediaRecorder = new _msr2.default(stream);
+      this.mediaRecorder.mimeType = 'audio/wav'; // check this line for audio/wav
+      this.mediaRecorder.bufferSize = 256; // check this line for audio/wav
+      this.mediaRecorder.ondataavailable = function (blob) {
+        (0, _audio.convertBlobToAudioBuffer)(blob, _this4.onRecordingConverted.bind(_this4));
+      };
+      this.mediaRecorder.start();
+    }
+  }, {
+    key: 'onRecordingConverted',
+    value: function onRecordingConverted(audioBuffer) {
+      var recordedData = this.state.recordedData;
+
+      var mergedBuffer = (0, _audio.appendBuffer)(recordedData, audioBuffer);
+      console.log("mergedBuffer", mergedBuffer);
+      this.setState({
+        recordedData: mergedBuffer
+      });
+    }
+  }, {
+    key: 'onMediaError',
+    value: function onMediaError(e) {
+      console.error('media error', e);
+    }
+  }, {
+    key: 'stopRecording',
+    value: function stopRecording() {
+      this.mediaRecorder.stop();
+      this.setState({
+        isRecording: false
+      });
+    }
+  }]);
+
+  return DesktopRecorder;
+}(_react.Component);
+
+exports.default = DesktopRecorder;

package/recorder/MobileRecorder.js

@@ -0,0 +1,46 @@
+"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 MobileRecorder = function MobileRecorder() {
+  return _react2.default.createElement(
+    "div",
+    null,
+    _react2.default.createElement(
+      "h3",
+      null,
+      "IOS and Android (nb: IOS does not support audio, just video) "
+    ),
+    _react2.default.createElement(
+      "p",
+      null,
+      " audio : ",
+      _react2.default.createElement("input", { type: "file", accept: "audio/*;capture=microphone" }),
+      " "
+    ),
+    _react2.default.createElement(
+      "p",
+      null,
+      " camcorder : ",
+      _react2.default.createElement("input", { type: "file", accept: "audio/*;capture=camcorder" }),
+      " "
+    ),
+    _react2.default.createElement(
+      "p",
+      null,
+      " camera : ",
+      _react2.default.createElement("input", { type: "file", accept: "image/*;capture=camera" }),
+      " "
+    )
+  );
+};
+
+exports.default = MobileRecorder;

package/recorder/index.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _is_js = require('is_js');
+
+var _DesktopAudioRecorder = require('./DesktopAudioRecorder');
+
+var _DesktopAudioRecorder2 = _interopRequireDefault(_DesktopAudioRecorder);
+
+var _MobileRecorder = require('./MobileRecorder');
+
+var _MobileRecorder2 = _interopRequireDefault(_MobileRecorder);
+
+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)());
+
+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);
+};
+
+exports.default = Recorder;

package/stories/customPlayer.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _CustomPlayer = require('../player/CustomPlayer');
+
+var _CustomPlayer2 = _interopRequireDefault(_CustomPlayer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var CustomPlayerExample = function CustomPlayerExample() {
+  return _react2.default.createElement(_CustomPlayer2.default, { url: 'cranberries_zombie.mp3' });
+};
+
+exports.default = CustomPlayerExample;

package/stories/index.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _storybook = require('@kadira/storybook');
+
+var _getMuiTheme = require('material-ui/styles/getMuiTheme');
+
+var _getMuiTheme2 = _interopRequireDefault(_getMuiTheme);
+
+var _MuiThemeProvider = require('material-ui/styles/MuiThemeProvider');
+
+var _MuiThemeProvider2 = _interopRequireDefault(_MuiThemeProvider);
+
+var _player = require('./player');
+
+var _player2 = _interopRequireDefault(_player);
+
+var _customPlayer = require('./customPlayer');
+
+var _customPlayer2 = _interopRequireDefault(_customPlayer);
+
+var _recorder = require('./recorder');
+
+var _recorder2 = _interopRequireDefault(_recorder);
+
+require('../common/material-ui.css');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//import PlayerCustom from './playerCustom'
+(0, _storybook.storiesOf)('Player', module).add('Soundclound waveform', function () {
+  return _react2.default.createElement(
+    _MuiThemeProvider2.default,
+    { muiTheme: (0, _getMuiTheme2.default)() },
+    _react2.default.createElement(_player2.default, null)
+  );
+}).add('Custom waveform', function () {
+  return _react2.default.createElement(
+    _MuiThemeProvider2.default,
+    { muiTheme: (0, _getMuiTheme2.default)() },
+    _react2.default.createElement(_customPlayer2.default, null)
+  );
+});
+(0, _storybook.storiesOf)('Recorder', module).add('Normal', function () {
+  return _react2.default.createElement(
+    _MuiThemeProvider2.default,
+    { muiTheme: (0, _getMuiTheme2.default)() },
+    _react2.default.createElement(_recorder2.default, null)
+  );
+});

package/stories/player.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _player = require('../player');
+
+var _player2 = _interopRequireDefault(_player);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var PlayerExample = function PlayerExample() {
+  return _react2.default.createElement(_player2.default, { url: 'cranberries_zombie.mp3' });
+};
+
+exports.default = PlayerExample;

package/stories/recorder.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _player = require('../player');
+
+var _player2 = _interopRequireDefault(_player);
+
+var _recorder = require('../recorder');
+
+var _recorder2 = _interopRequireDefault(_recorder);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var RecorderExample = function RecorderExample() {
+  return _react2.default.createElement(
+    'div',
+    null,
+    _react2.default.createElement(_player2.default, { url: 'english.mp3' }),
+    _react2.default.createElement(_recorder2.default, null)
+  );
+};
+
+exports.default = RecorderExample;

package/utils/audio.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertBlobToaudioBuffer = exports.appendBuffer = exports.convertAudioBufferToWaveform = exports.getWaveform = undefined;
+
+var _audioContext = require('./audioContext');
+
+var _audioContext2 = _interopRequireDefault(_audioContext);
+
+var _webaudio = require('waveform-data/webaudio');
+
+var _webaudio2 = _interopRequireDefault(_webaudio);
+
+var _waveformData = require('waveform-data');
+
+var _waveformData2 = _interopRequireDefault(_waveformData);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var audioContext = _audioContext2.default ? new _audioContext2.default() : null;
+
+var bufferCache = {};
+
+var getWaveform = exports.getWaveform = function getWaveform(url) {
+  return new Promise(function (resolve, reject) {
+    if (bufferCache[url]) {
+      resolve(bufferCache[url]);
+      return;
+    }
+    var xhr = new XMLHttpRequest();
+
+    // URL of a CORS MP3/Ogg file
+    xhr.open("GET", url);
+    xhr.responseType = "arraybuffer";
+
+    xhr.addEventListener("load", function onResponse(progressEvent) {
+      (0, _webaudio2.default)(audioContext, this.response, function (error, waveform) {
+        if (error) reject(error);
+        bufferCache[url] = waveform;
+        resolve(waveform);
+      });
+    });
+
+    xhr.send();
+  });
+};
+
+var convertAudioBufferToWaveform = exports.convertAudioBufferToWaveform = function convertAudioBufferToWaveform(audioBuffer) {
+  // All this code (except the last line) is stolen/inspired from https://github.com/bbc/waveform-data.js/blob/master/lib/builders/audiodecoder.js
+  var scale = 512;
+  var scaleAdjuster = 127;
+  var dataLength = Math.floor(audioBuffer.length / scale);
+  var offset = 20;
+  var dataObject = new DataView(new ArrayBuffer(offset + dataLength * 2));
+  var leftChannel = void 0,
+      rightChannel = void 0;
+  var minValue = Infinity,
+      max_value = -Infinity,
+      scale_counter = scale;
+  var bufferLength = audioBuffer.length;
+
+  dataObject.setInt32(0, 1, true); //version
+  dataObject.setUint32(4, 1, true); //is 8 bit
+  dataObject.setInt32(8, audioBuffer.sampleRate, true); //sample rate
+  dataObject.setInt32(12, scale, true); //scale
+  dataObject.setInt32(16, dataLength, true); //length
+
+  leftChannel = audioBuffer.getChannelData(0);
+  rightChannel = audioBuffer.getChannelData(1);
+
+  for (var i = 0; i < bufferLength; i++) {
+    var sample = (leftChannel[i] + rightChannel[i]) / 2 * scaleAdjuster;
+
+    if (sample < minValue) {
+      minValue = sample;
+      if (minValue < -128) {
+        minValue = -128;
+      }
+    }
+
+    if (sample > max_value) {
+      max_value = sample;
+      if (max_value > 127) {
+        max_value = 127;
+      }
+    }
+
+    if (--scale_counter === 0) {
+      dataObject.setInt8(offset++, Math.floor(minValue));
+      dataObject.setInt8(offset++, Math.floor(max_value));
+      minValue = Infinity;max_value = -Infinity;scale_counter = scale;
+    }
+  }
+
+  return _waveformData2.default.create(dataObject.buffer);
+};
+
+var appendBuffer = exports.appendBuffer = function appendBuffer(buffer1, buffer2) {
+  if (!buffer1) return buffer2;
+  if (!buffer2) return buffer1;
+  var numberOfChannels = Math.min(buffer1.numberOfChannels, buffer2.numberOfChannels);
+  var tmp = audioContext.createBuffer(numberOfChannels, buffer1.length + buffer2.length, buffer1.sampleRate);
+  for (var i = 0; i < numberOfChannels; i++) {
+    var channel = tmp.getChannelData(i);
+    channel.set(buffer1.getChannelData(i), 0);
+    channel.set(buffer2.getChannelData(i), buffer1.length);
+  }
+  return tmp;
+};
+
+var convertBlobToaudioBuffer = exports.convertBlobToaudioBuffer = function convertBlobToaudioBuffer(blob, cb) {
+  var fileReader = new FileReader();
+  fileReader.onload = function (_ref) {
+    var result = _ref.target.result;
+
+    audioContext.decodeAudioData(result, function (buf) {
+      cb(buf);
+    });
+  };
+  fileReader.readAsArrayBuffer(blob);
+};

package/utils/audioContext.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+window.AudioContext = window.AudioContext || window.webkitAudioContext;
+
+window.OfflineAudioContext = window.OfflineAudioContext || window.webkitOfflineAudioContext;
+
+exports.default = window.AudioContext;