diff options
Diffstat (limited to 'public/bundle.js')
| -rw-r--r-- | public/bundle.js | 162 |
1 files changed, 102 insertions, 60 deletions
diff --git a/public/bundle.js b/public/bundle.js index 4c9e358..0de966e 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -1469,6 +1469,7 @@ function reorderBins(spec, order) { } exports.default = { + fft_size: fft_size, fft_overlap: fft_overlap, toSpectrum: toSpectrum, fromSpectrum: fromSpectrum, fromImageData: fromImageData, binToHz: binToHz, fadeInOut: fadeInOut, cloneSpectrum: cloneSpectrum, @@ -1687,7 +1688,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol Object.defineProperty(exports, "__esModule", { value: true }); -exports.buildZip = exports.renderFrames = exports.loadPCM = exports.loadBuffer = exports.FRAME_STEP = exports.FRAME_LENGTH = undefined; +exports.buildZip = exports.renderFrames = exports.loadPCM = exports.loadBuffer = exports.spectrum = exports.FRAME_STEP = exports.FRAME_LENGTH = undefined; var _types = __webpack_require__(/*! ../types */ "./app/client/types.js"); @@ -1701,10 +1702,6 @@ var _jszip = __webpack_require__(/*! jszip */ "./node_modules/jszip/lib/index.js var _jszip2 = _interopRequireDefault(_jszip); -var _fileSaver = __webpack_require__(/*! file-saver */ "./node_modules/file-saver/FileSaver.js"); - -var _fileSaver2 = _interopRequireDefault(_fileSaver); - var _sprintfJs = __webpack_require__(/*! sprintf-js */ "./node_modules/sprintf-js/src/sprintf.js"); var _draw = __webpack_require__(/*! ./lib/draw */ "./app/client/audio/lib/draw.js"); @@ -1731,6 +1728,7 @@ var FRAME_STEP = exports.FRAME_STEP = Math.round(FRAME_LENGTH / 4); var _r = 8; var _i = 8; +exports.spectrum = _spectrum2.default; // requestAudioContext(() => {}) var loadBuffer = exports.loadBuffer = function loadBuffer(file) { @@ -1749,12 +1747,16 @@ var loadBuffer = exports.loadBuffer = function loadBuffer(file) { var loadPCM = exports.loadPCM = function loadPCM(file) { return new Promise(function (resolve, reject) { + // if we've already fetched this file... + if (file.pcm) { + return resolve(file); + } loadBuffer(file).then(function (buffer) { var pcm = buffer._buffer.getChannelData(0); var sr = buffer._buffer.sampleRate; if (!pcm) return reject(); - console.log(buffer, pcm, sr); - resolve({ buffer: buffer, pcm: pcm, sr: sr }); + console.log(pcm.length, sr); + resolve({ file: file, buffer: buffer, pcm: pcm, sr: sr }); }); }); }; @@ -1766,37 +1768,38 @@ var renderFrames = exports.renderFrames = function renderFrames(file, _ref) { max = _ref$max === undefined ? 12 : _ref$max; return function (dispatch) { return new Promise(function (resolve, reject) { - loadPCM(file).then(function (_ref2) { - var buffer = _ref2.buffer, - pcm = _ref2.pcm, - sr = _ref2.sr; + loadPCM(file).then(function (pcmProps) { + var file = pcmProps.file, + buffer = pcmProps.buffer, + pcm = pcmProps.pcm, + sr = pcmProps.sr; dispatch({ type: _types2.default.wav2pix.load }); - var canvases = []; - var offset = 0, - count = 0, - _len = pcm.length - FRAME_LENGTH; + var frames = []; + var count = 0; + var _len = pcm.length - FRAME_LENGTH; + var offset = _len / 4; for (; offset < _len && count < max; offset += frame_step, count += 1) { frames.push(render(pcm.slice(offset, offset + FRAME_LENGTH), sr, count)); } dispatch({ type: _types2.default.wav2pix.finish, message: 'Rendered ' + count + ' images' }); - resolve(frames); + resolve({ pcm: pcmProps, frames: frames }); }); }); }; }; -var buildZip = exports.buildZip = function buildZip(name, file, _ref3) { - var _ref3$frame_step = _ref3.frame_step, - frame_step = _ref3$frame_step === undefined ? FRAME_STEP : _ref3$frame_step, - _ref3$max = _ref3.max, - max = _ref3$max === undefined ? 10000 : _ref3$max; +var buildZip = exports.buildZip = function buildZip(name, file, _ref2) { + var _ref2$frame_step = _ref2.frame_step, + frame_step = _ref2$frame_step === undefined ? FRAME_STEP : _ref2$frame_step, + _ref2$max = _ref2.max, + max = _ref2$max === undefined ? 10000 : _ref2$max; return function (dispatch) { return new Promise(function (resolve, reject) { - loadPCM(file).then(function (_ref4) { - var buffer = _ref4.buffer, - pcm = _ref4.pcm, - sr = _ref4.sr; + loadPCM(file).then(function (_ref3) { + var buffer = _ref3.buffer, + pcm = _ref3.pcm, + sr = _ref3.sr; dispatch({ type: _types2.default.wav2pix.load }); @@ -3240,10 +3243,13 @@ var Slider = function (_Component) { var old_value = opt[name]; var new_value = e.target.value; - if (this.props.type === 'int') { + console.log(this.props); + console.log(new_value, this.props.defaultValue); + if (new_value === '') { + new_value = this.props.defaultValue || (this.props.max - this.props.min) / 2; + } else if (this.props.type === 'int') { new_value = parseInt(new_value); - } - if (this.props.type === 'odd') { + } else if (this.props.type === 'odd') { new_value = parseInt(Math.floor(new_value / 2) * 2 + 1); } if (old_value !== new_value) { @@ -7737,6 +7743,7 @@ var SpectrogramUpload = function (_Component) { _this.state = { file: null, + pcm: null, name: "", frames: [], max: 3000, @@ -7744,7 +7751,12 @@ var SpectrogramUpload = function (_Component) { }; var audioElement = document.createElement('audio'); audioElement.addEventListener('loadedmetadata', function () { - _this.setState({ duration: audioElement.duration }); + var duration = audioElement.duration; + var total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / _this.state.frame_step); + _this.setState({ + duration: duration, + max: Math.min(_this.state.max, total_frame_count) + }); }); _this.audioElement = audioElement; return _this; @@ -7756,39 +7768,55 @@ var SpectrogramUpload = function (_Component) { var _this2 = this; var name = file.name.split('.')[0].replace(/\s+/g, '_').replace(/-/g, '_').replace(/_+/g, '_'); - this.setState({ file: file, name: name }); + this.setState({ file: file, name: name, pcm: '' }, function () { + if (file.size < 2 << 20) { + _this2.rebuildFrames(); + } + }); this.audioElement.src = URL.createObjectURL(file); console.log(file.size); - if (file.size < 2 << 20) { - this.props.wav2pix.renderFrames(file, {}).then(function (frames) { - console.log('got frames', frames.length); - _this2.setState(_extends({}, _this2.state, { frames: frames - })); - }); - } } }, { - key: 'buildZip', - value: function buildZip() { + key: 'rebuildFrames', + value: function rebuildFrames() { var _this3 = this; var _state = this.state, file = _state.file, - max = _state.max, + pcm = _state.pcm, frame_step = _state.frame_step; - this.props.wav2pix.buildZip(this.state.name, file, {}).then(function (_ref) { + this.props.wav2pix.renderFrames(pcm || file, { frame_step: frame_step }).then(function (data) { + console.log('got frames', data.frames.length); + _this3.setState(_extends({}, _this3.state, { + frames: data.frames, + pcm: data.pcm + })); + }); + } + }, { + key: 'buildZip', + value: function buildZip() { + var _this4 = this; + + var _state2 = this.state, + pcm = _state2.pcm, + file = _state2.file, + max = _state2.max, + frame_step = _state2.frame_step; + + this.props.wav2pix.buildZip(this.state.name, pcm || file, { frame_step: frame_step, max: max }).then(function (_ref) { var zip = _ref.zip, filename = _ref.filename, count = _ref.count; - _this3.props.datasetActions.uploadFile(_this3.props.module, _this3.props.folder, zip, filename, { count: count, max: max, frame_step: frame_step }); + _this4.props.datasetActions.uploadFile(_this4.props.module, _this4.props.folder, zip, filename, { count: count, max: max, frame_step: frame_step }); }); } }, { key: 'render', value: function render() { - var _this4 = this; + var _this5 = this; // loading={pix2wav.loading} // progress={pix2wav.progress} @@ -7796,9 +7824,9 @@ var SpectrogramUpload = function (_Component) { // module={pix2wavModule} // data={pix2wav.data} // folder={folder} - var _state2 = this.state, - file = _state2.file, - frames = _state2.frames; + var _state3 = this.state, + file = _state3.file, + frames = _state3.frames; return (0, _preact.h)( 'div', @@ -7824,26 +7852,26 @@ var SpectrogramUpload = function (_Component) { title: 'Choose a sound file', mime: 'image.*', onUpload: function onUpload(file) { - return _this4.pickFile(file); + return _this5.pickFile(file); } }), file && this.renderMetadata(file) ) ), (0, _preact.h)('div', { ref: function ref(c) { - _this4.canvases = c; + _this5.canvases = c; }, className: 'thumbs', id: 'pix2wav_canvases' }) ); } }, { key: 'renderMetadata', value: function renderMetadata(file) { - var _this5 = this; + var _this6 = this; var duration = this.state.duration; var size = _util2.default.hush_size(file.size); - var total_frame_count = (duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step; + var total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step); var frame_size = Math.round(wav2pixActions.FRAME_LENGTH / 44100 * 1000) + ' ms.'; var frame_step = Math.round(this.state.frame_step / 44100 * 1000) + ' ms.'; return (0, _preact.h)( @@ -7893,7 +7921,7 @@ var SpectrogramUpload = function (_Component) { (0, _preact.h)( _common.Param, { title: 'Frames' }, - Math.floor(total_frame_count) + total_frame_count ), (0, _preact.h)( _common.Param, @@ -7905,6 +7933,11 @@ var SpectrogramUpload = function (_Component) { { title: 'Frame Step' }, frame_step ), + (0, _preact.h)( + _common.Param, + { title: 'FFT Size' }, + wav2pixActions.spectrum.fft_size + ), (0, _preact.h)('br', null), (0, _preact.h)( _common.Param, @@ -7919,31 +7952,39 @@ var SpectrogramUpload = function (_Component) { (0, _preact.h)(_common.TextInput, { title: 'Dataset name', onChange: function onChange(e) { - return _this5.setState({ name: e.target.value }); + return _this6.setState({ name: e.target.value }); }, value: this.state.name }), (0, _preact.h)(_common.Slider, { - name: 'Frame cutoff', - min: 10, max: 1000, type: 'int', + name: 'No. Frames', + min: 10, max: Math.min(total_frame_count, 1000), type: 'int', value: this.state.max, + defaultValue: Math.min(total_frame_count, 300), onChange: function onChange(max) { - return _this5.setState({ max: max }); + return _this6.setState({ max: max }); } }), (0, _preact.h)(_common.Slider, { - name: 'frame step', + name: 'Frame step', min: 10, max: 20000, type: 'int', value: this.state.frame_step, + defaultValue: wav2pixActions.FRAME_STEP, onChange: function onChange(frame_step) { - return _this5.setState({ frame_step: frame_step }); + var total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / frame_step); + _this6.setState({ + frame_step: frame_step, + max: Math.min(_this6.state.max, total_frame_count) + }, function () { + _this6.rebuildFrames(); + }); } }), (0, _preact.h)( _common.Button, { onClick: function onClick() { - return _this5.buildZip(); + return _this6.buildZip(); } }, 'Build Zip' @@ -7955,10 +7996,11 @@ var SpectrogramUpload = function (_Component) { }, { key: 'componentDidUpdate', value: function componentDidUpdate() { - var _this6 = this; + var _this7 = this; + this.canvases.innerHTML = ''; var canvases = (this.state.frames || []).map(function (c) { - _this6.canvases.append(c.canvas); + _this7.canvases.append(c.canvas); }); } }]); |