Add save button for saving to MIDI

src/components/controls.tsx

@@ -30,10 +30,12 @@ import {
   SelectAll,
   Undo,
   Redo,
+  Save,
 } 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()}
+          >
+            <Save />
+          </Button>
+        </div>
         <div>
           <Button
             disabled={!undo.canUndo}

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';