Support downloading the composition as MIDI

README.md

@@ -12,6 +12,8 @@ For more detailed instructions, watch the [Cococo video demo](https://youtu.be/X
 
 #### Running the app
 
+CoCoCo requires node version 12 (it has been tested successfully on v12.22.7 but not on v16), and the build process requires that you run on OSX or Windows (not Linux due to an issue with case-sensitive imports in Typescript).
+
 ```bash
 yarn install
 yarn dev

configs/webpack/common.js

@@ -45,23 +45,6 @@ module.exports = {
         test: /\.tsx?$/,
         use: [
           { loader: 'cache-loader' },
-          {
-            loader: 'thread-loader',
-            options: {
-              // there should be 1 cpu for the fork-ts-checker-webpack-plugin
-              workers: require('os').cpus().length - 1,
-              poolTimeout: Infinity, // set this to Infinity in watch mode - see https://github.com/webpack-contrib/thread-loader
-            },
-          },
-          {
-            loader: 'babel-loader',
-            options: {
-              cacheDirectory: true,
-              babelrc: false,
-              presets: ['@babel/preset-env', '@babel/preset-react'],
-              plugins: ['react-hot-loader/babel'],
-            },
-          },
           {
             loader: 'ts-loader',
             options: {
@@ -89,21 +72,8 @@ module.exports = {
     ],
   },
   plugins: [
-    new ForkTsCheckerWebpackPlugin({
-      checkSyntacticErrors: true,
-      tsconfig: resolve(__dirname, '../../tsconfig.json'),
-      exclude: '',
-    }),
     new Dotenv(),
     new HtmlWebpackPlugin({ inject: true, template: 'index.html.ejs' }),
-    new AutoDllPlugin({
-      inject: true, // will inject the DLL bundles to index.html
-      filename: dllFilename,
-      entry: {
-        vendor: vendorDependencies,
-      },
-      context: resolve(__dirname, '../../src'),
-    }),
   ],
   performance: {
     hints: false,

package.json

@@ -12,6 +12,9 @@
     "test-dev": "NODE_ENV=dev webpack --config=configs/webpack/dev.js",
     "deploy": "yarn build && node deploy.js"
   },
+  "engines": {
+    "node": "~12.22.7"
+  },
   "devDependencies": {
     "@babel/cli": "^7.4.4",
     "@babel/core": "^7.4.4",
@@ -43,7 +46,7 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
-    "@magenta/music": "1.9.0",
+    "@magenta/music": "^1.23.1",
     "@material-ui/core": "^4.0.0",
     "@material-ui/icons": "^4.0.0",
     "@material-ui/lab": "^4.0.0-alpha.13",

src/components/controls.tsx

@@ -30,10 +30,12 @@ import {
   SelectAll,
   Undo,
   Redo,
+  CloudDownload,
 } from '@material-ui/icons';
 import { observer } from 'mobx-react';
 
 import { generator, player, layout, editor, EditorTool, undo } from '../core';
+import saveload from '../core/save-load';
 import * as theme from '../core/theme';
 import { Voice } from '../core/note';
 
@@ -83,6 +85,16 @@ export class Controls extends React.Component<{}, State> {
             {showPlay ? <PlayArrow /> : <Stop />}
           </Button>
         </div>
+        <div>
+          <Button
+            disabled={playDisabled}
+            variant="outlined"
+            color="primary"
+            onClick={() => saveload.saveMIDI()}
+          >
+            <CloudDownload/>
+          </Button>
+        </div>
         <div>
           <Button
             disabled={!undo.canUndo}

src/core/player.ts

@@ -64,7 +64,7 @@ class Player {
 
   private player = new mm.SoundFontPlayer(
     SOUNDFONT_URL,
-    Tone.master,
+    Tone.Destination,
     undefined,
     undefined,
     this.playerCallbackObject

src/core/save-load.ts

@@ -1,7 +1,9 @@
-import { undo } from '../core';
+import { undo, editor, player } from '../core';
 import { getDateString } from './utils';
 import featureFlags from './feature-flags';
 import logging, { Events } from './logging';
+import { sequenceProtoToMidi } from '@magenta/music';
+import { getMagentaNoteSequence } from './magenta-utils';
 
 export class SaveLoad {
   saveJSON() {
@@ -13,6 +15,18 @@ export class SaveLoad {
     this.downloadBlob(blob, `cococo_state_${getDateString()}_${ffMeta}`);
   }
 
+  saveMIDI() {
+    const inputNotes = [...editor.allNotes];
+    const sequence = getMagentaNoteSequence(
+      inputNotes,
+      player.bpm,
+      editor.totalSixteenths,
+      true
+    );
+    const blob = new Blob([sequenceProtoToMidi(sequence)], { type: 'audio/midi' });
+    this.downloadBlob(blob, `cococo_music_${getDateString()}`);
+  }
+
   loadJSON() {
     const input = document.createElement('input');
     input.type = 'file';

src/index.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 import { AppContainer, hot } from 'react-hot-loader';
 import * as React from 'react';
 import { render } from 'react-dom';
-import App from './components/app';
+import App from './components/App';
 import './index.css';
 
 const rootEl = document.getElementById('root');
@@ -30,8 +30,8 @@ render(
 
 // Hot Module Replacement API
 if ((module as any).hot) {
-  (module as any).hot.accept('./components/app', () => {
-    const NewApp = require('./components/app').default;
+  (module as any).hot.accept('./components/App', () => {
+    const NewApp = require('./components/App').default;
 
     render(
       <AppContainer>

tsconfig.json

@@ -4,7 +4,7 @@
     "sourceMap": true,
     "noImplicitAny": false,
     "module": "commonjs",
-    "target": "es5",
+    "target": "es6",
     "jsx": "react",
     "lib": ["es5", "es6", "dom"],
     "experimentalDecorators": true,