WIP wavs to json ( needs noise ).

Author: looshi2

src/App.js

@@ -16,19 +16,18 @@ import HorizontalSlider from './views/Components/HorizontalSlider.js'
 import Keyboard from './views/Keyboard/Keyboard.js'
 import EventEmitter from 'event-emitter'
 
+import WaveTableData from './data/WaveTableData.json'
+
 const audioContext = new AudioContext()
 const eventEmitter = new EventEmitter()
 
 class App extends React.Component {
   constructor (props) {
     super(props)
-    let wavsURL = 'http://davedave.us/wavetable-synth/wavefiles.php'
-    wavsURL += '?rand=' + Math.random().toString()  // Bust annoying long cache on my server.
-    axios.get(wavsURL, { responseType: 'json' })
-      .then(function (response) {
-        let action = Actions.waveFileListLoaded(response.data)
-        props.dispatch(action)
-      })
+    axios.get(WaveTableData).then(function (response) {
+      let action = Actions.waveFileListLoaded(response.data)
+      props.dispatch(action)
+    })
   }
 
   render () {

src/data/Reducers.js

@@ -10,7 +10,7 @@ let Keyboard = {}
 
 // The list of waveforms should only be loaded once when the page loads,
 // not reloaded each time a preset changes.
-let OSC_WAV_FILES = []
+let OSC_WAV_FILES = {}
 
 // LFOs
 const LFODestinations = [
@@ -357,8 +357,10 @@ function OscillatorsReducer (state, action) {
     case 'WAVE_FILE_LIST_LOADED':
       state = state.map(function (osc) {
         OSC_WAV_FILES = action.files
-        if (!osc.files.length) {
-          osc.files = [...action.files] // Only set this once per page load.
+        let hasLoaded = Object.keys(osc.files).length > 0
+         // Only set the wavetable data once per page load.
+        if (!hasLoaded) {
+          osc.files = Object.assign({}, action.files)
         }
         return osc
       })

src/data/WaveTableData.json

@@ -109,7 +109,7 @@ OscillatorView.propTypes = {
   amount: React.PropTypes.number,
   // channelDataA: React.PropTypes.array, ?
   // channelDataB: React.PropTypes.array,
-  files: React.PropTypes.array,
+  files: React.PropTypes.object,
   fileA: React.PropTypes.string,
   fileB: React.PropTypes.string
 }

src/views/Oscillator/OscillatorView.js

@@ -3,11 +3,9 @@ Dropdown, shows a list of files.
 On select, loads the file.
 */
 import React from 'react'
-import axios from 'axios'
 import Select from 'react-select'
 import {connect} from 'react-redux'
 import Actions from '../../data/Actions.js'
-const baseUrl = 'http://davedave.us/wavetable-synth/wavs/'
 
 class WaveFileLoader extends React.Component {
   constructor (props) {
@@ -18,16 +16,16 @@ class WaveFileLoader extends React.Component {
   }
 
   componentWillUpdate (nextProps, nextState) {
-    if (this.props.files.length !== nextProps.files.length) {
-      let options = nextProps.files.map((file) => {
+    if (this.props.files !== nextProps.files) {
+      let options = Object.keys(nextProps.files).map((file) => {
         let fileName = file.split('.')[0]
         return { value: fileName, label: file.split('.')[0] }
       })
       this.setState({options})
     }
 
     // Wait until the file list is ready.
-    if (this.props.files.length) {
+    if (Object.keys(this.props.files).length) {
       this.loadWaveFile(nextProps.selectedFile)
     }
   }
@@ -39,29 +37,25 @@ class WaveFileLoader extends React.Component {
   }
 
   loadWaveFile (fileName) {
-    const {id, side, audioContext, dispatch} = this.props
-    const filePath = baseUrl + fileName + '.wav'
+    const {id, side, dispatch} = this.props
 
     if (fileName.toLowerCase().indexOf('noise') !== -1) {
-      // Generate some noise, don't bother to load and parse a file.
-      // The "noise.wav" is actually not noise, it's just another wavetable
-      // file renamed to "noise.wav" so it shows up as an option in the dropdown.
+      // 600 is too short for a white noise osc, so we generate 1 second
+      // of noise here.  All other waves are 600 samples long.
       let channelData = new Float32Array(44100)
       for (var i = 0; i < 44100; i++) {
         channelData[i] = Math.random()
       }
       let action = Actions.waveFileLoadCompleted(id, side, channelData)
       dispatch(action)
     } else {
-      axios.get(filePath, { responseType: 'arraybuffer' })
-        .then(function (response) {
-          // Extract the data to draw each waveform.
-          audioContext.decodeAudioData(response.data).then(function (buffer) {
-            let channelData = buffer.getChannelData(0)
-            let action = Actions.waveFileLoadCompleted(id, side, channelData)
-            dispatch(action)
-          })
-        })
+      // Convert regular array from JSON file to the format the osc needs:
+      let channelData = new Float32Array(600)
+      this.props.files[fileName].forEach((data, index) => {
+        channelData[index] = data
+      })
+      let action = Actions.waveFileLoadCompleted(id, side, channelData)
+      dispatch(action)
     }
   }
 
@@ -85,7 +79,7 @@ class WaveFileLoader extends React.Component {
   }
 }
 WaveFileLoader.propTypes = {
-  files: React.PropTypes.array,
+  files: React.PropTypes.object,
   id: React.PropTypes.string
 }
 WaveFileLoader.defaultProps = {

src/views/Oscillator/WaveFileLoader.js

@@ -22,6 +22,7 @@ module.exports = function () {
         {test: /\.css$/, loaders: ['style-loader', 'css-loader']},
         {test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader']},
         {test: /\.png/, loaders: ['file-loader']},
+        {test: /\.json/, loaders: ['file-loader']},
         {test: /\.worker\.js$/, loaders: ['worker-loader', 'babel-loader']}
       ]
     }