summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/client/audio/lib/spectrum.js1
-rw-r--r--app/client/audio/wav2pix.js21
-rw-r--r--app/client/common/slider.component.js9
-rw-r--r--app/client/modules/pix2wav/views/spectrogram.upload.js60
4 files changed, 64 insertions, 27 deletions
diff --git a/app/client/audio/lib/spectrum.js b/app/client/audio/lib/spectrum.js
index c7252f1..a60cdcf 100644
--- a/app/client/audio/lib/spectrum.js
+++ b/app/client/audio/lib/spectrum.js
@@ -266,6 +266,7 @@ function reorderBins(spec, order){
}
export default {
+ fft_size, fft_overlap,
toSpectrum, fromSpectrum, fromImageData, binToHz,
fadeInOut,
cloneSpectrum,
diff --git a/app/client/audio/wav2pix.js b/app/client/audio/wav2pix.js
index 48ca140..5f48814 100644
--- a/app/client/audio/wav2pix.js
+++ b/app/client/audio/wav2pix.js
@@ -2,7 +2,6 @@ import types from '../types'
import Tone from 'tone'
import JSZip from 'jszip'
-import FileSaver from 'file-saver'
import { sprintf } from 'sprintf-js'
import * as draw from './lib/draw'
@@ -17,6 +16,7 @@ export const FRAME_STEP = Math.round(FRAME_LENGTH / 4)
const _r = 8
const _i = 8
+export { spectrum }
// requestAudioContext(() => {})
export const loadBuffer = file => {
@@ -39,22 +39,29 @@ export const loadBuffer = file => {
export const loadPCM = (file) => {
return new Promise((resolve, reject) => {
+ // if we've already fetched this file...
+ if (file.pcm) {
+ return resolve(file)
+ }
loadBuffer(file).then(buffer => {
const pcm = buffer._buffer.getChannelData(0)
const sr = buffer._buffer.sampleRate
if (! pcm) return reject()
- console.log(buffer, pcm, sr)
- resolve({ buffer, pcm, sr })
+ console.log(pcm.length, sr)
+ resolve({ file, buffer, pcm, sr })
})
})
}
export const renderFrames = (file, { frame_step=FRAME_STEP, max=12 }) => dispatch => {
return new Promise((resolve, reject) => {
- loadPCM(file).then(({ buffer, pcm, sr }) => {
+ loadPCM(file).then((pcmProps) => {
+ const { file, buffer, pcm, sr } = pcmProps
dispatch({ type: types.wav2pix.load })
- let canvases = []
- let offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH
+ let frames = []
+ let count = 0
+ let _len = pcm.length - FRAME_LENGTH
+ let offset = _len / 4
for (;
offset < _len && count < max;
offset += frame_step, count += 1
@@ -62,7 +69,7 @@ export const renderFrames = (file, { frame_step=FRAME_STEP, max=12 }) => dispatc
frames.push(render(pcm.slice(offset, offset+FRAME_LENGTH), sr, count))
}
dispatch({ type: types.wav2pix.finish, message: 'Rendered ' + count + ' images' })
- resolve(frames)
+ resolve({ pcm: pcmProps, frames })
})
})
}
diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js
index fccbc5e..cc00650 100644
--- a/app/client/common/slider.component.js
+++ b/app/client/common/slider.component.js
@@ -25,10 +25,15 @@ class Slider extends Component {
let { name, opt } = this.props
let old_value = opt[name]
let 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) {
diff --git a/app/client/modules/pix2wav/views/spectrogram.upload.js b/app/client/modules/pix2wav/views/spectrogram.upload.js
index 40e6159..609c5e8 100644
--- a/app/client/modules/pix2wav/views/spectrogram.upload.js
+++ b/app/client/modules/pix2wav/views/spectrogram.upload.js
@@ -22,6 +22,7 @@ class SpectrogramUpload extends Component {
super(props)
this.state = {
file: null,
+ pcm: null,
name: "",
frames: [],
max: 3000,
@@ -29,7 +30,12 @@ class SpectrogramUpload extends Component {
}
const audioElement = document.createElement('audio')
audioElement.addEventListener('loadedmetadata', () => {
- this.setState({ duration: audioElement.duration })
+ const duration = audioElement.duration
+ const total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step)
+ this.setState({
+ duration,
+ max: Math.min(this.state.max, total_frame_count),
+ })
})
this.audioElement = audioElement
}
@@ -38,22 +44,29 @@ class SpectrogramUpload extends Component {
.replace(/\s+/g, '_')
.replace(/-/g, '_')
.replace(/_+/g, '_')
- this.setState({ file, name })
+ this.setState({ file, name, pcm: '' }, () => {
+ if (file.size < 2 << 20) {
+ this.rebuildFrames()
+ }
+ })
this.audioElement.src = URL.createObjectURL(file)
console.log(file.size)
- if (file.size < 2 << 20) {
- this.props.wav2pix.renderFrames(file, {})
- .then(frames => {
- console.log('got frames', frames.length)
- this.setState({
- ...this.state, frames
- })
+ }
+ rebuildFrames(){
+ const { file, pcm, frame_step } = this.state
+ this.props.wav2pix.renderFrames(pcm || file, { frame_step })
+ .then(data => {
+ console.log('got frames', data.frames.length)
+ this.setState({
+ ...this.state,
+ frames: data.frames,
+ pcm: data.pcm,
})
- }
+ })
}
buildZip(){
- const { file, max, frame_step } = this.state
- this.props.wav2pix.buildZip(this.state.name, file, {})
+ const { pcm, file, max, frame_step } = this.state
+ this.props.wav2pix.buildZip(this.state.name, pcm || file, { frame_step, max })
.then(({ zip, filename, count }) => {
this.props.datasetActions.uploadFile(
this.props.module,
@@ -96,7 +109,7 @@ class SpectrogramUpload extends Component {
renderMetadata(file){
const { duration } = this.state
const size = util.hush_size(file.size)
- const total_frame_count = (duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step
+ const total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step)
const frame_size = Math.round(wav2pixActions.FRAME_LENGTH / 44100 * 1000) + ' ms.'
const frame_step = Math.round(this.state.frame_step / 44100 * 1000) + ' ms.'
return (
@@ -111,9 +124,11 @@ class SpectrogramUpload extends Component {
<Param title='Size'><span className={size[0]}>{size[1]}</span></Param>
<Param title='Date'>{moment(file.lastModifiedDate).format("YYYY-MM-DD h:mm a")}</Param>
<Param title='Duration'>{Math.floor(duration) + ' s.'}</Param>
- <Param title='Frames'>{Math.floor(total_frame_count)}</Param>
+ <Param title='Frames'>{total_frame_count}</Param>
<Param title='Frame Size'>{frame_size}</Param>
<Param title='Frame Step'>{frame_step}</Param>
+ <Param title='FFT Size'>{wav2pixActions.spectrum.fft_size}</Param>
+
<br />
<Param title='Status'>{this.props.pix2wav.status}</Param>
<br />
@@ -125,16 +140,24 @@ class SpectrogramUpload extends Component {
value={this.state.name}
/>
<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={max => this.setState({ max })}
/>
<Slider
- name='frame step'
+ name='Frame step'
min={10} max={20000} type='int'
value={this.state.frame_step}
- onChange={frame_step => this.setState({ frame_step })}
+ defaultValue={wav2pixActions.FRAME_STEP}
+ onChange={frame_step => {
+ const total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / frame_step)
+ this.setState({
+ frame_step,
+ max: Math.min(this.state.max, total_frame_count)
+ }, () => { this.rebuildFrames() })
+ }}
/>
<Button
onClick={() => this.buildZip()}
@@ -145,6 +168,7 @@ class SpectrogramUpload extends Component {
)
}
componentDidUpdate(){
+ this.canvases.innerHTML = ''
const canvases = (this.state.frames || []).map(c => {
this.canvases.append(c.canvas)
})
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 13:11:11 +0000