added midi support

repl/src/App.tsx

@@ -9,6 +9,7 @@ import * as parser from './parse';
 import CodeMirror from './CodeMirror';
 import hot from '../public/hot';
 import { isNote } from 'tone';
+import { useWebMidi } from './midi';
 
 const { tetris, tetrisRev, shapeShifted } = tunes;
 const { parse } = parser;
@@ -132,6 +133,18 @@ function App() {
     logBox.current.scrollTop = logBox.current?.scrollHeight;
   }, [log]);
 
+  useWebMidi({
+    ready: useCallback(({ outputs }) => {
+      pushLog(`WebMidi ready! Just add .midi(${outputs.map((o) => `"${o.name}"`).join(' | ')}) to the pattern. `);
+    }, []),
+    connected: useCallback(({ outputs }) => {
+      pushLog(`Midi device connected! Available: ${outputs.map((o) => `"${o.name}"`).join(', ')}`);
+    }, []),
+    disconnected: useCallback(({ outputs }) => {
+      pushLog(`Midi device disconnected! Available: ${outputs.map((o) => `"${o.name}"`).join(', ')}`);
+    }, []),
+  });
+
   return (
     <div className="h-screen bg-slate-900 flex flex-col">
       <header className="flex-none w-full h-16 px-2 flex border-b border-gray-200 bg-white justify-between">

repl/src/midi.ts

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { isNote } from 'tone';
+import _WebMidi from 'webmidi';
+import { Pattern as _Pattern } from '../../strudel.mjs';
+import * as Tone from 'tone';
+
+const WebMidi: any = _WebMidi;
+const Pattern = _Pattern as any;
+
+export default function enableWebMidi() {
+  return new Promise((resolve, reject) => {
+    if (WebMidi.enabled) {
+      // if already enabled, just resolve WebMidi
+      resolve(WebMidi);
+      return;
+    }
+    WebMidi.enable((err: any) => {
+      if (err) {
+        reject(err);
+      }
+      resolve(WebMidi);
+    });
+  });
+}
+const outputByName = (name: string) => WebMidi.getOutputByName(name);
+
+Pattern.prototype.midi = function (output: string, channel = 1) {
+  return this.fmap((value: any) => ({
+    ...value,
+    onTrigger: (time: number, event: any) => {
+      if (!isNote(value)) {
+        throw new Error('not a note: ' + value);
+      }
+      if (!WebMidi.enabled) {
+        throw new Error(`🎹 WebMidi is not enabled. Supported Browsers: https://caniuse.com/?search=webmidi`);
+      }
+      if (!WebMidi.outputs.length) {
+        throw new Error(`🔌 No MIDI devices found. Connect a device or enable IAC Driver.`);
+      }
+      const device = output ? outputByName(output) : WebMidi.outputs[0];
+      if (!device) {
+        throw new Error(
+          `🔌 MIDI device ${output ? output : ''} not found. Use one of ${WebMidi.outputs
+            .map((o: any) => `"${o.name}"`)
+            .join(' | ')}`
+        );
+      }
+      // console.log('midi', value, output);
+      const timingOffset = WebMidi.time - Tone.context.currentTime * 1000;
+      time = time * 1000 + timingOffset;
+      // const inMs = '+' + (time - Tone.context.currentTime) * 1000;
+      // await enableWebMidi()
+      device.playNote(value, channel, {
+        time,
+        duration: event.duration * 1000,
+        // velocity: velocity ?? 0.5,
+        velocity: 0.9,
+      });
+    },
+  }));
+};
+
+export function useWebMidi(props?: any) {
+  const { ready, connected, disconnected } = props;
+  const [loading, setLoading] = useState(true);
+  const [outputs, setOutputs] = useState<any[]>(WebMidi?.outputs || []);
+  useEffect(() => {
+    enableWebMidi()
+      .then(() => {
+        // Reacting when a new device becomes available
+        WebMidi.addListener('connected', (e: any) => {
+          setOutputs([...WebMidi.outputs]);
+          connected?.(WebMidi, e);
+        });
+        // Reacting when a device becomes unavailable
+        WebMidi.addListener('disconnected', (e: any) => {
+          setOutputs([...WebMidi.outputs]);
+          disconnected?.(WebMidi, e);
+        });
+        ready?.(WebMidi);
+        setLoading(false);
+      })
+      .catch((err: Error) => {
+        if (err) {
+          //throw new Error("Web Midi could not be enabled...");
+          console.warn('Web Midi could not be enabled..');
+          return;
+        }
+      });
+  }, [ready, connected, disconnected, outputs]);
+  const outputByName = (name: string) => WebMidi.getOutputByName(name);
+  return { loading, outputs, outputByName };
+}

repl/src/parse.ts

@@ -2,6 +2,7 @@ import * as krill from '../krill-parser';
 import * as strudel from '../../strudel.mjs';
 import { Scale, Note, Interval } from '@tonaljs/tonal';
 import './tone';
+import './midi';
 import * as toneStuff from './tone';
 import shapeshifter from './shapeshifter';
 

repl/src/tunes.ts

@@ -21,6 +21,8 @@ export const shapeShifted = `stack(
   ).rev()
 ).slow(16).rev()`;
 
+export const tetrisMidi = `${shapeShifted}.midi('IAC-Treiber Bus 1')`;
+
 export const tetrisWithFunctions = `stack(sequence(
   'e5', sequence('b4', 'c5'), 'd5', sequence('c5', 'b4'),
   'a4', sequence('a4', 'c5'), 'e5', sequence('d5', 'c5'),