added midi support

This commit is contained in:
Felix Roos 2022-02-09 22:10:11 +01:00
parent b0e50db4f6
commit f6c4bdb8a6
7 changed files with 132 additions and 83 deletions

View file

@ -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">