Add small nudges to music grid playback to hopefully make chords more…

… prominent
hlysine · Jan 26, 2025 · c8ad778 · c8ad778
1 parent 1eb00ce
commit c8ad778
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -28,10 +28,10 @@
   "dependencies": {
     "@dnd-kit/sortable": "^8.0.0",
     "@hlysine/bun-vercel": "^1.0.0-alpha.8",
+    "@hlysine/piano": "^0.2.1",
     "@monaco-editor/react": "^4.6.0",
     "@tanstack/react-router": "^1.22.1",
     "@tanstack/router-devtools": "^1.22.2",
-    "@tonejs/piano": "^0.2.1",
     "@use-gesture/react": "^10.3.1",
     "@vercel/speed-insights": "^1.0.10",
     "animejs": "^3.2.2",

diff --git a/src/client/instructions/parts/MusicControlsPart.tsx b/src/client/instructions/parts/MusicControlsPart.tsx
@@ -12,6 +12,7 @@ import { array } from '@logic-pad/core/data/dataHelper';
 import {
   CachedPlayback,
   cleanUp,
+  drum,
   piano,
   pianoImmediate,
   pianoImmediatePedal,
@@ -28,6 +29,14 @@ const MusicControls = lazy(async function () {
   await piano.load();
   await pianoImmediate.load();
   await pianoImmediatePedal.load();
+  await new Promise<void>(resolve => {
+    const interval = setInterval(() => {
+      if (Object.values(drum).every(player => player.loaded)) {
+        clearInterval(interval);
+        resolve();
+      }
+    }, 100);
+  });
   return {
     default: memo(function MusicControls({
       instruction,

diff --git a/src/client/instructions/parts/instruments.ts b/src/client/instructions/parts/instruments.ts
@@ -1,5 +1,5 @@
 import MusicGridRule from '@logic-pad/core/data/rules/musicGridRule';
-import { Piano } from '@tonejs/piano';
+import { Piano } from '@hlysine/piano';
 import GridData from '@logic-pad/core/data/grid';
 import * as Tone from 'tone';
 import { Color } from '@logic-pad/core/data/primitives';
@@ -41,6 +41,12 @@ export const pianoImmediate = new Piano({
   maxPolyphony: 32,
 }).toDestination();
 
+function nudge(note: string): number {
+  const n = Number(note.at(-1));
+  if (Number.isNaN(n)) return 0;
+  return (8 - n) / 6;
+}
+
 export const drum = {
   snare: new Tone.Player('/samples/snare.wav').toDestination(),
   kick: new Tone.Player('/samples/kick.wav').toDestination(),
@@ -103,7 +109,7 @@ export function encodePlayback(
         tile.color === Color.Dark &&
         !grid.connections.isConnected({ x1: x, y1: y, x2: x - 1, y2: y })
       ) {
-        addEvent(x / 2, {
+        addEvent(x / 2 + (nudge(row.note) * 0.02 * bpm) / 120, {
           type: 'keydown',
           value: row.note,
           velocity: row.velocity,
@@ -119,7 +125,7 @@ export function encodePlayback(
         ) {
           endPos = { x: endPos.x + 1, y: endPos.y };
         }
-        addEvent((endPos.x + 1) / 2, {
+        addEvent((endPos.x + 1) / 2 + (nudge(row.note) * 0.02 * bpm) / 120, {
           type: 'keyup',
           value: row.note,
         });
@@ -151,7 +157,8 @@ export function encodePlayback(
               drum[event.value as keyof typeof drum].start(time, 0);
             } else {
               piano.keyDown({
-                note: event.value,
+                midi:
+                  Tone.Midi(event.value).toMidi() + nudge(event.value) * 0.01,
                 velocity: event.velocity,
                 time,
               });
@@ -161,7 +168,11 @@ export function encodePlayback(
             if (event.value in drum) {
               drum[event.value as keyof typeof drum].stop(time);
             } else {
-              piano.keyUp({ note: event.value, time });
+              piano.keyUp({
+                midi:
+                  Tone.Midi(event.value).toMidi() + nudge(event.value) * 0.01,
+                time,
+              });
             }
             break;
           case 'complete':