Upgrade to tone 14, fix record

package.json

@@ -21,6 +21,7 @@
     "antd": "^4.8.4",
     "apollo-boost": "^0.4.7",
     "apollo-server-lambda": "^2.9.16",
+    "audiobuffer-to-wav": "^1.0.0",
     "bufferutil": "^4.0.1",
     "chalk": "^2.4.2",
     "classnames": "^2.2.5",
@@ -51,10 +52,10 @@
     "react-portal": "^3.2.0",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
-    "react-scripts": "^3.1.1",
+    "react-scripts": "^3.2.0",
     "react-select": "^3.0.8",
     "teoria": "^2.5.0",
-    "tone": "13.8.25",
+    "tone": "14.8.49",
     "utf-8-validate": "^5.0.2"
   },
   "scripts": {
@@ -64,9 +65,10 @@
     "upload-schema": "yarn checkForFaunaKey && curl -u $FAUNADB_SERVER_SECRET: https://graphql.fauna.com/import --data-binary \"@schema.gql\"",
     "start:server": "yarn upload-schema && netlify-lambda serve functions -c ./webpack.config.js",
     "start:devserver": "NODE_ENV=development yarn start:server",
-    "build": "npm-run-all --parallel build:**",
+    "build": "npm-run-all --parallel build:** && npm run-script append-sw",
     "build:app": "craco build",
     "build:functions": "netlify-lambda build functions -c ./webpack.config.js",
+    "append-sw": "cat src/sw-epilog.js >> build/service-worker.js",
     "test": "craco test --env=jsdom",
     "eject": "react-scripts eject"
   },

src/components/ColorControllerPanel/ColorController/Container.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { string, array } from 'prop-types';
-import Tone from 'tone';
+import * as Tone from 'tone';
 import ColorControllerComponent from './Component';
 import { SYNTH_PRESETS } from 'instrumentPresets';
 import { SEND_CHANNELS } from 'utils/music';
@@ -28,10 +28,10 @@ class ColorController extends Component {
     const { effects } = SYNTH_PRESETS[synthType];
 
     this.fxList = [];
-    this.fxBus = new Tone.Gain(0.8);
+    this.fxBus = new Tone.Channel(0, 0);
     this.fxBus.receive(receiveChannel);
 
-    this.output = new Tone.Gain(1);
+    this.output = new Tone.Channel();
     this.output.send(SEND_CHANNELS.MASTER_OUTPUT, 0);
     this.connectEffects(effects);
 
@@ -98,13 +98,13 @@ class ColorController extends Component {
   // called by the callbacks in the synth object
   // TODO figure out better way?
   setEffectAmount(effectIndex, val, parameter) {
-    this.fxList[effectIndex].set(parameter, val);
+    this.fxList[effectIndex].set({ [parameter]: val });
   }
 
   connectEffects(fxConstructors) {
     this.disposeEffects();
 
-    this.fxBus = new Tone.Gain(0.8);
+    this.fxBus = new Tone.Channel(0, 0);
     this.fxBus.receive(this.props.receiveChannel);
 
     fxConstructors.forEach(fxObj => {

src/components/Project/useAudioOutput.js

@@ -1,30 +1,42 @@
 import { useState, useEffect } from 'react';
-import Tone from 'tone';
+import * as Tone from 'tone';
 import { SEND_CHANNELS } from 'utils/music';
 
 export const useAudioOutput = () => {
   const [isPlaying, setIsPlaying] = useState(false);
 
   useEffect(() => {
     /* master output */
-    const masterCompressor = new Tone.Compressor({
+    const destinationCompressor = new Tone.Compressor({
       ratio: 16,
       threshold: -30,
       release: 0.25,
       attack: 0.003,
       knee: 30,
     });
 
-    const masterLimiter = new Tone.Limiter(-2);
-    const masterOutput = new Tone.Gain(0.9).receive(
+    const destinationLimiter = new Tone.Limiter(-2);
+
+    /* TODO set gain */
+    const destinationOutput = new Tone.Channel(-2, 0).receive(
       SEND_CHANNELS.MASTER_OUTPUT
     );
-    masterOutput.chain(masterCompressor, masterLimiter, Tone.Master);
+
+    const recordOut = new Tone.Channel(0, 0).send(SEND_CHANNELS.RECORDER, 0);
+    const finalNode = new Tone.Gain();
+
+    finalNode.fan(recordOut, Tone.Destination);
+
+    destinationOutput.chain(
+      destinationCompressor,
+      destinationLimiter,
+      finalNode
+    );
     return () => {
       Tone.Transport.stop();
-      masterCompressor.dispose();
-      masterLimiter.dispose();
-      masterOutput.dispose();
+      destinationCompressor.dispose();
+      destinationLimiter.dispose();
+      destinationOutput.dispose();
     };
   }, []);
 

src/components/Project/useRecorder.jsx

@@ -1,37 +1,56 @@
 import { useRef, useState, useEffect } from 'react';
 import moment from 'moment';
-import Tone from 'tone';
-import Recorder from 'utils/Recorder';
+import * as Tone from 'tone';
+import { SEND_CHANNELS } from 'utils/music';
+import audiobufferToWav from 'audiobuffer-to-wav';
+
+async function convertWebMToWAV(webmBlob) {
+  // Read the WebM data as an ArrayBuffer
+  const arrayBuffer = await webmBlob.arrayBuffer();
+
+  // Decode the WebM data using the Web Audio API
+  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+  // Encode the AudioBuffer as WAV using the 'audiobuffer-to-wav' library
+  const wavBlob = new Blob([audiobufferToWav(audioBuffer)], {
+    type: 'audio/wav',
+  });
+
+  return wavBlob;
+}
 
 export const useRecorder = () => {
   const recorder = useRef(null);
   useEffect(() => {
-    recorder.current = new Recorder(Tone.Master);
+    const recorderChannel = new Tone.Channel();
+    recorderChannel.receive(SEND_CHANNELS.RECORDER);
+    recorder.current = new Tone.Recorder();
+    recorderChannel.connect(recorder.current);
   }, []);
+
   const [isRecording, setIsRecording] = useState(false);
   const [isArmed, setIsArmed] = useState(false);
   const [downloadUrls, setDownloadUrls] = useState([]);
 
   const beginRecording = () => {
     setIsArmed(false);
     setIsRecording(true);
-    recorder.current.record();
+    recorder.current.start();
   };
 
-  const stopRecording = (fileName = 'My project') => {
-    recorder.current.exportWAV(blob => {
-      const url = URL.createObjectURL(blob);
-      const newDownloadUrls = downloadUrls.slice();
-      const createdAt = moment();
-      newDownloadUrls.push({
-        url,
-        fileName: `${fileName}[shapeyourmusic].wav`,
-        createdAt,
-      });
-      setDownloadUrls(newDownloadUrls);
-      recorder.current.stop();
-      recorder.current.clear();
+  const stopRecording = async (fileName = 'My project') => {
+    const webmBlob = await recorder.current.stop();
+    const wavBlob = await convertWebMToWAV(webmBlob);
+    const url = URL.createObjectURL(wavBlob);
+    const newDownloadUrls = downloadUrls.slice();
+    const createdAt = moment();
+    newDownloadUrls.push({
+      url,
+      fileName: `${fileName}[shapeyourmusic].wav`,
+      createdAt,
     });
+    setDownloadUrls(newDownloadUrls);
     setIsRecording(false);
   };
 

src/components/Shape/Synth.js

@@ -1,4 +1,4 @@
-import Tone from 'tone';
+import * as Tone from 'tone';
 import { SYNTH_PRESETS } from 'instrumentPresets';
 import { SEND_CHANNELS } from 'utils/music';
 import { forEachPoint, getNoteInfo } from 'utils/shape';
@@ -49,7 +49,7 @@ export function Synth({ onStartLoading, onEndLoading }) {
     panner.disconnect();
     panner.dispose();
     panner3d.disconnect();
-    panner3d.dispose();
+    // panner3d.dispose();
     solo.disconnect();
     solo.dispose();
     gain.disconnect();
@@ -69,11 +69,17 @@ export function Synth({ onStartLoading, onEndLoading }) {
       if (synth) {
         disposeSynth();
       }
-
-      synth = new synthObj.baseSynth(synthObj.params, () => {
+      const { isSampler } = synthObj;
+      console.log('base synth', synthObj.baseSynth);
+      const onLoaded = () => {
         onEndLoading();
         isBuffering = false;
-      });
+      };
+      synth = new synthObj.baseSynth(
+        synthObj.params,
+        ...(isSampler ? [onLoaded] : [])
+      );
+
       if (synth instanceof Tone.Sampler) {
         onStartLoading();
         isBuffering = true;
@@ -110,8 +116,12 @@ export function Synth({ onStartLoading, onEndLoading }) {
       }
 
       solo = new Tone.Solo();
+
       // NOTE: this is where we connect to the output channel for this color
-      gain = new Tone.Gain().send(`${SEND_CHANNELS.FX_PREFIX}${colorIndex}`, 0);
+      gain = new Tone.Channel().send(
+        `${SEND_CHANNELS.FX_PREFIX}${colorIndex}`,
+        0
+      );
 
       synth.chain(pannerNode, solo, gain);
     },
@@ -124,7 +134,7 @@ export function Synth({ onStartLoading, onEndLoading }) {
       });
     },
     setNoteEvents: (scaleObj, points) => {
-      part.removeAll();
+      part.clear();
 
       let delay = 0;
       let prevNoteIndex = firstNoteIndex;

src/components/Shape/useShapeSynth.js

@@ -50,6 +50,7 @@ export const useShapeSynth = ({
   }, [firstNoteIndex]);
 
   useEffect(() => {
+    console.log('calling set synth', selectedSynth, colorIndex);
     synthContainer.current.setSynth(selectedSynth, colorIndex);
   }, [selectedSynth, colorIndex]);
 

src/components/ShapeCanvas/Container.jsx

@@ -7,7 +7,7 @@ import ShapeCanvasComponent from './Component';
 import { TOOL_TYPES } from 'utils/project';
 
 import withProjectContext from 'components/Project/withProjectContext';
-import Tone from 'tone';
+import * as Tone from 'tone';
 
 export const DRAWING_STATES = {
   PENDING: 'pending', // not currently drawing

src/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+// import registerServiceWorker from './registerServiceWorker';
+import * as serviceWorker from './serviceWorker';
 
 import { initSentry } from 'utils/errorTracking';
 
@@ -13,4 +14,12 @@ import './static/css/main.css';
 initSentry();
 
 ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+serviceWorker.register({
+  onUpdate: registration => {
+    alert('New version available!  Ready to update?');
+    if (registration && registration.waiting) {
+      registration.waiting.postMessage({ type: 'SKIP_WAITING' });
+    }
+    window.location.reload();
+  },
+});

src/instrumentPresets/blip.js

@@ -1,4 +1,4 @@
-import Tone from 'tone';
+import * as Tone from 'tone';
 import { setSynthParam, setSynthEnvelopeParam } from './utils';
 
 export default {

src/instrumentPresets/cello.js

@@ -1,4 +1,4 @@
-import Tone from 'tone';
+import * as Tone from 'tone';
 import { setSynthEnvelopeParam, setEffectWet } from './utils';
 
 export default {

src/instrumentPresets/duo.js

@@ -1,10 +1,54 @@
-import Tone from 'tone';
+import * as Tone from 'tone';
 import { setSynthParam, setEffectWet } from './utils';
 
 export default {
   name: 'Duo',
   baseSynth: Tone.DuoSynth,
-  params: {},
+  params: {
+    vibratoAmount: 0.5,
+    vibratoRate: 5,
+    harmonicity: 1.5,
+    voice0: {
+      volume: -10,
+      portamento: 0,
+      oscillator: {
+        type: 'custom',
+        partials: [3],
+      },
+      filterEnvelope: {
+        attack: 0.01,
+        decay: 0,
+        sustain: 1,
+        release: 0.5,
+      },
+      envelope: {
+        attack: 0.01,
+        decay: 0,
+        sustain: 1,
+        release: 0.5,
+      },
+    },
+    voice1: {
+      volume: -10,
+      portamento: 0,
+      oscillator: {
+        type: 'custom',
+        partials: [3],
+      },
+      filterEnvelope: {
+        attack: 0.01,
+        decay: 0,
+        sustain: 1,
+        release: 0.5,
+      },
+      envelope: {
+        attack: 0.01,
+        decay: 0,
+        sustain: 1,
+        release: 0.5,
+      },
+    },
+  },
   effects: [
     {
       type: Tone.Chorus,