test soundfont-player piano if it crackles in mobile

TeemuKoivisto · Apr 6, 2024 · 7eed770 · 7eed770
1 parent 6936a6e
commit 7eed770
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 8 deletions.
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -25,15 +25,16 @@
  "vitest": "^1.0.4"
  },
  "dependencies": {
- "@iconify-icons/fe": "^1.2.5",
- "@iconify-icons/feather": "^1.2.3",
- "@iconify-icons/mdi": "^1.2.48",
- "@iconify/svelte": "^3.1.4",
  "@/chords-and-scales": "workspace:*",
  "@/games": "workspace:*",
  "@/keyboard": "workspace:*",
  "@/midi-piano": "workspace:*",
  "@/types": "workspace:*",
+ "@iconify-icons/fe": "^1.2.5",
+ "@iconify-icons/feather": "^1.2.3",
+ "@iconify-icons/mdi": "^1.2.48",
+ "@iconify/svelte": "^3.1.4",
+ "soundfont-player": "^0.12.0",
  "tailwindcss": "^3.3.3",
  "vexflow": "^4.2.3",
  "webmidi": "^3.1.8"

diff --git a/packages/client/src/app.html b/packages/client/src/app.html
@@ -3,7 +3,6 @@
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>MIDI Note Trainer</title>
 
  <script>
  try {

diff --git a/packages/client/src/components/virtual-piano/VirtualPiano.svelte b/packages/client/src/components/virtual-piano/VirtualPiano.svelte
@@ -15,7 +15,7 @@
 
  const WHITE_INDECES = [0, 2, 4, 5, 7, 9, 11]
  const C0_MIDI = 12
- const C8_MIDI = 108
+ const C7_MIDI = 96
 
  let innerWidth = window.innerWidth
  $: pianoWidth = Math.min(innerWidth, 780)
@@ -50,7 +50,7 @@
  }
 
  function shiftRange(up: boolean) {
- bottomNoteMidi.update(v => (up ? Math.min(v + 12, C8_MIDI) : Math.max(v - 12, C0_MIDI)))
+ bottomNoteMidi.update(v => (up ? Math.min(v + 12, C7_MIDI) : Math.max(v - 12, C0_MIDI)))
  }
 
  function handleKeyPressed(e: CustomEvent<{ idx: number; row: number }>) {

diff --git a/packages/client/src/routes/(site)/+page.svelte b/packages/client/src/routes/(site)/+page.svelte
@@ -20,6 +20,7 @@
  midiGranted,
  midiInput,
  piano,
+ sf,
  useVirtualPiano
  } from '$stores/inputs'
  import { modalActions } from '$stores/modal'
@@ -81,7 +82,9 @@
  scoreActions.pushPlayed(value)
  }
  if ($piano) {
- $piano.noteOn(value, $inputs.fixedVelocity ?? velocity)
+ // $piano.noteOn(value, $inputs.fixedVelocity ?? velocity)
+ // @ts-ignore
+ $sf?.play(value, undefined, { gain: 4 })
  }
  }
  function gameUpdate() {

diff --git a/packages/client/src/stores/inputs.ts b/packages/client/src/stores/inputs.ts
@@ -1,5 +1,6 @@
 import { derived, get, writable } from 'svelte/store'
 import { WebMidi } from 'webmidi'
+import Soundfont from 'soundfont-player'
 
 import { platform } from './media'
 import { persist } from './persist'
@@ -36,6 +37,7 @@ export const midiRangeNotes = derived(
 )
 export const audioContext = writable<AudioContext | undefined>(undefined)
 export const piano = writable<Piano | undefined>(undefined)
+export const sf = writable<Soundfont.Player | undefined>(undefined)
 export const useVirtualPiano = writable<boolean>(get(platform) === 'mobile')
 export const inputs = persist(
  writable<Inputs>({
@@ -101,6 +103,8 @@ export const inputsActions = {
  const sounds = await fetchSounds(`${GH_BASE_URL}audio`, ctx)
  p.load(sounds)
  piano.set(p)
+ const gpiano = await Soundfont.instrument(ctx, 'acoustic_grand_piano')
+ sf.set(gpiano)
  }
  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml