displaying these gray ass thumbnails

1 files changed, 89 insertions, 56 deletions

diff --git a/app/client/audio/wav2pix.js b/app/client/audio/wav2pix.js
index e0a10fd..e9233e5 100644
--- a/app/client/audio/wav2pix.js
+++ b/app/client/audio/wav2pix.js
@@ -1,3 +1,5 @@
+import types from '../types'
+
 import Tone from 'tone'
 import JSZip from 'jszip'
 import FileSaver from 'file-saver'
@@ -6,73 +8,104 @@ import * as draw from './lib/draw'
 import output from './lib/output'
 import spectrum from './lib/spectrum'
 
-import {
-  lerp, clamp, mod,
-} from '../util'
-
 import { requestAudioContext } from './lib'
 
-let buffer
-let sr = 44100
-let last_i = 0
-let _r = 8, _i = 8
-
-let files, file_index = 0;
-
 const FRAME_LENGTH = 126 * 255
 const FRAME_OFFSET = FRAME_LENGTH / 4
 
-function init() {
-  requestAudioContext(ready)
-  draw.resize(256, 256)
-}
-function handleFileSelect(e) {
-  files = e.dataTransfer ? e.dataTransfer.files : e.target.files
-  loadNext()
+const _r = 8
+const _i = 8
+
+// requestAudioContext(() => {})
+
+export const loadBuffer = file => {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file)
+    let buffer = new Tone.Buffer(
+      url,
+      loadBuffer,
+      err => {
+        console.error('err', err)
+        reject(err)
+      }
+    )
+    function loadBuffer() {
+      URL.revokeObjectURL(url)
+      resolve(buffer)
+    }
+  })
 }
-function loadNext() {
-  var file = files[file_index++]
-  if (! file) return
-  load(file)
+
+export const loadPCM = (file) => {
+  return new Promise((resolve, reject) => {
+    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 })
+    })
+  })
 }
-function load(file) {
-  buffer = new Tone.Buffer(
-    URL.createObjectURL(file),
-    loadBuffer,
-    (err) => console.error('err', err)
-  )
+
+export const renderFrames = (file, { frame_offset=FRAME_OFFSET, max=10 }) => dispatch => {
+  return new Promise((resolve, reject) => {
+    loadPCM(file).then(({ buffer, pcm, sr }) => {
+      dispatch({ type: types.wav2pix.loaded_buffer })
+      let canvases = []
+      for (let offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH;
+            offset < _len && count < max;
+            offset += frame_offset, count += 1
+          ) {
+        canvases.push(render(pcm.slice(offset, offset+FRAME_LENGTH), sr, count))
+      }
+      dispatch({ type: types.wav2pix.draw_finish })
+      resolve(canvases)
+    })
+  })
 }
-function loadBuffer() {
-  // dispatch
-  console.log('loaded buffer', buffer)
-  const pcm = buffer._buffer.getChannelData(0)
-  const sr = buffer._buffer.sampleRate
-  if (! pcm) return
 
-  const zip = new JSZip()
-  const zip_folder = zip.folder("wav2pix_" + name);
+export const buildZip = (name, file, opt) => dispatch => {
+  return new Promise((resolve, reject) => {
+    const frame_offset = opt.frame_offset || FRAME_OFFSET
+    loadPCM(file).then(({ buffer, pcm, sr }) => {
+      dispatch({ type: types.wav2pix.loaded_buffer })
 
-  const offset = 0
-  for (offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH;
-        offset < _len;
-        offset += FRAME_OFFSET, count += 1
-      ) {
-    if ((count % 100) === 0) {
-      // dispatch event instead..
-      console.log(count)
-    }
-    render(pcm.slice(offset, offset+FRAME_LENGTH), count, zip_folder)
-  }
+      const zip = new JSZip()
+      const zip_folder = zip.folder("wav2pix_" + name);
 
-  // dispatch event
-  console.log('done exporting')
-  zip.generateAsync({ type: "blob" }).then(content => {
-    // dispatch
-    console.log('saving zip')
-    // FileSaver.saveAs(content, "wav2pix_" + name + ".zip")
-    setTimeout(loadNext, 1000)
+      for (let offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH;
+            offset < _len;
+            offset += frame_offset, count += 1
+          ) {
+        if ((count % 100) === 0) {
+          dispatch({ type: types.wav2pix.draw_progress, count })
+        }
+        render(pcm.slice(offset, offset+FRAME_LENGTH), sr, count, zip_folder)
+      }
+
+      // dispatch event
+      dispatch({ type: types.wav2pix.draw_finish })
+      zip.generateAsync({ type: "blob" }).then(content => {
+        dispatch({ type: types.wav2pix.load_zip })
+        // FileSaver.saveAs(content, "wav2pix_" + name + ".zip")
+        resolve(content)
+      })
+    })
   })
-  // play(0)
 }
 
-init()
+function render(pcm, sr, count, zip){
+  const fft = spectrum.toSpectrum(pcm, sr)
+  // console.log('render', fft)
+  // const pcm_rev = pcm.slice().reverse()
+  // const spec_rev = spectrum.toSpectrum(pcm_rev, spec.sr)
+  const { canvas, imageData } = draw.raw_spectrum(fft, 0, 256, 0, 256, _r, _i)
+  if (zip) {
+    const name = sprintf('frame_%05d.png', count)
+    const dataURL = canvas.toDataURL("image/png")
+    zip.file(name, dataURL.split(',')[1], {base64: true})
+  }
+  return { fft, canvas, imageData }
+}
+