commit

package.json

@@ -16,7 +16,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "seedrandom": "^3.0.5",
-    "tippy.js": "^6.3.7"
+    "tippy.js": "^6.3.7",
+    "tone": "^14.7.77"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.0.0-alpha.7",

src/App.tsx

@@ -3,7 +3,7 @@ import Duration from "@/sections/Duration";
 import File from "@/sections/File";
 import Footer from "@/sections/Footer";
 import Header from "@/sections/Header";
-import Meta from "@/sections/Meta";
+import Info from "@/sections/Info";
 import Options from "@/sections/Options";
 import PianoRoll from "@/sections/PianoRoll";
 import Start from "@/sections/Start";
@@ -18,7 +18,7 @@ const App = () => (
     <main>
       <File />
       <section>
-        <Meta />
+        <Info />
         <Track />
       </section>
       <PianoRoll />

src/sections/File.tsx

@@ -3,7 +3,7 @@ import { useAtom } from "jotai";
 import { Midi } from "@tonejs/midi";
 import Button from "@/components/Button";
 import Group from "@/components/Group";
-import { filename, humanized, incSeed, midi, options } from "@/state";
+import { filename, humanized, incSeed, midi, options, preview } from "@/state";
 import { downloadData } from "@/util/file";
 import classes from "./File.module.css";
 
@@ -86,6 +86,7 @@ const File = () => {
       />
       <Button onClick={onClick}>Load</Button>
       <Button onClick={onSave}>Save</Button>
+      <Button onClick={preview}>Preview</Button>
       <div
         className={classes.overlay}
         onDragLeave={onDragLeave}

src/sections/Meta.tsx → src/sections/Info.tsx

@@ -3,7 +3,7 @@ import Detail from "@/components/Detail";
 import Group from "@/components/Group";
 import { filename, midi } from "@/state";
 
-const Meta = () => {
+const Info = () => {
   const [getMidi] = useAtom(midi);
   const [getFilename] = useAtom(filename);
 
@@ -17,4 +17,4 @@ const Meta = () => {
   );
 };
 
-export default Meta;
+export default Info;

src/sections/Track.tsx

@@ -3,7 +3,7 @@ import Group from "@/components/Group";
 import Select from "@/components/Select";
 import { midi, track } from "@/state";
 
-const Meta = () => {
+const Info = () => {
   const [getMidi] = useAtom(midi);
   const [getTrack, setTrack] = useAtom(track);
 
@@ -30,4 +30,4 @@ const Meta = () => {
   );
 };
 
-export default Meta;
+export default Info;

src/state/index.ts

@@ -2,6 +2,7 @@ import * as d3 from "d3";
 import { atom, getDefaultStore } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { clamp, range } from "lodash";
+import * as Tone from "tone";
 import { Midi } from "@tonejs/midi";
 import { noteHeight } from "@/sections/PianoRoll";
 import { random } from "@/util/math";
@@ -210,4 +211,44 @@ export const incSeed = () => {
 };
 
 /** for testing */
-// Midi.fromUrl("test.mid").then((parsed) => store.set(midi, parsed));
+Midi.fromUrl("test.mid").then((parsed) => store.set(midi, parsed));
+
+/** midi preview */
+export const preview = () => {
+  console.log("hi");
+  const now = Tone.now() + 0.5;
+  /** schedule notes */
+  for (const track of store.get(midi)?.tracks || []) {
+    const synth = track.instrument.percussion
+      ? /** drum synth to play unpitched notes */
+        new Tone.MembraneSynth()
+          .set({
+            envelope: {
+              attack: 0.01,
+              decay: 0.1,
+              sustain: 0,
+              release: 1,
+            },
+          })
+          .toDestination()
+      : /** tone synth to play pitched notes */
+        new Tone.PolySynth()
+          .set({
+            envelope: {
+              attack: 0.01,
+              decay: 0,
+              sustain: 1,
+              release: 0.01,
+            },
+          })
+          .toDestination();
+    for (const note of track.notes) {
+      synth.triggerAttackRelease(
+        note.name,
+        note.duration,
+        now + note.time,
+        note.velocity
+      );
+    }
+  }
+};