0.14.0 - soundfont2 sampler (#81)

* feat: add SamplerInstrument

* feat: remove options from RegionGroup

* feat: initial sf2 implementation

* feat: add soundfon2 example

* chore: changeset

* chore: version bump

* chore: documentation

Author: danigb

.gitignore

@@ -7,4 +7,5 @@ src/**/*.js
 .next
 .DS_Store
 tmp/
-bun.lockb
+bun.lockb
+*.sf2

CHANGELOG.md

@@ -1,5 +1,40 @@
 # smplr
 
+## 0.14.x
+
+#### Load soundfont files directly via Soundfont2 (385d492)
+
+Now is possible to load soundfont files directly thanks to [soundfont2](https://www.npmjs.com/package/soundfont2) package.
+
+First you need to add the dependency to the project:
+
+```bash
+npm i soundfont2
+```
+
+Then, use the new Soundfont2Sampler class:
+
+```ts
+import { Soundfont2Sampler } from "smplr";
+import { SoundFont2 } from "soundfont2";
+
+const context = new AudioContext();
+const sampler = Soundfont2Sampler(context, {
+  url: "https://smpldsnds.github.io/soundfonts/soundfonts/galaxy-electric-pianos.sf2",
+  createSoundfont: (data) => new SoundFont2(data),
+});
+
+sampler.load.then(() => {
+  // list all available instruments for the soundfont
+  console.log(sampler.instrumentNames);
+
+  // load the first available instrument
+  sampler.loadInstrument(sampler.instrumentNames[0]);
+});
+```
+
+Support is still very limited. Lot of soundfont features are still not implemented, however looping seems to work quite well (read #78)
+
 ## 0.13.x
 
 #### DrumMachines accept a DrumMachineInstrument as source

README.md

@@ -501,6 +501,31 @@ const context = new AudioContext();
 const sampler = new Versilian(context, { instrument: instrumentNAmes[0] });
 ```
 
+### Soundfont2Sampler
+
+Sampler capable of reading .sf2 files directly:
+
+```ts
+import { Soundfont2Sampler } from "smplr";
+import { SoundFont2 } from "soundfont2";
+
+const context = new AudioContext();
+const sampler = Soundfont2Sampler(context, {
+  url: "https://smpldsnds.github.io/soundfonts/soundfonts/galaxy-electric-pianos.sf2",
+  createSoundfont: (data) => new SoundFont2(data),
+});
+
+sampler.load.then(() => {
+  // list all available instruments for the soundfont
+  console.log(sampler.instrumentNames);
+
+  // load the first available instrument
+  sampler.loadInstrument(sampler.instrumentNames[0]);
+});
+```
+
+Still limited support. API may vary.
+
 ## License
 
 MIT License

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "smplr",
-  "version": "0.13.4",
+  "version": "0.14.0",
   "homepage": "https://github.com/danigb/smplr#readme",
   "description": "A Sampled collection of instruments",
   "main": "dist/index.js",

package.json

@@ -5,6 +5,7 @@ import { ElectricPianoExample } from "src/ElectricPianoExample";
 import { MalletExample } from "src/MalletExample";
 import { MellotronExample } from "src/MellotronExample";
 import { SmolkenExample } from "src/SmolkenExample";
+import { Soundfont2Example } from "src/Soundfont2Example";
 import { SoundfontExample } from "src/SoundfontExample";
 import { VersilianExample } from "src/VersilianExample";
 import { PianoExample } from "../src/PianoExample";
@@ -33,6 +34,7 @@ export default function Home() {
           <MellotronExample />
           <SmolkenExample />
           <VersilianExample />
+          <Soundfont2Example />
         </div>
       </main>
     </>

site/package-lock.json

@@ -0,0 +1,161 @@
+"use client";
+
+import { useState } from "react";
+import { Reverb, Soundfont2Sampler, Storage } from "smplr";
+import { SoundFont2 } from "soundfont2";
+import { ConnectMidi } from "./ConnectMidi";
+import { PianoKeyboard } from "./PianoKeyboard";
+import { getAudioContext } from "./audio-context";
+import { LoadWithStatus, useStatus } from "./useStatus";
+
+const SF2_INSTRUMENTS: Record<string, string> = {
+  "Galaxy Electric Pianos":
+    "https://smpldsnds.github.io/soundfonts/soundfonts/galaxy-electric-pianos.sf2",
+  "Giga MIDI":
+    "https://smpldsnds.github.io/soundfonts/soundfonts/giga-hq-fm-gm.sf2",
+  Supersaw:
+    "https://smpldsnds.github.io/soundfonts/soundfonts/supersaw-collection.sf2",
+};
+const SF_NAMES = Object.keys(SF2_INSTRUMENTS);
+
+let reverb: Reverb | undefined;
+let storage: Storage | undefined;
+let samplerNames: string[] = [
+  "Supersaw",
+  "Giga MIDI",
+  "Galaxy Electric Pianos",
+];
+
+export function Soundfont2Example({ className }: { className?: string }) {
+  const [sampler, setSampler] = useState<Soundfont2Sampler | undefined>(
+    undefined
+  );
+  const [samplerName, setSamplerName] = useState<string>(samplerNames[0]);
+  const [instrumentName, setInstrumentName] = useState<string>("");
+  const [status, setStatus] = useStatus();
+  const [reverbMix, setReverbMix] = useState(0);
+  const [volume, setVolume] = useState(100);
+
+  function loadSampler(sf2Name: string) {
+    if (sampler) sampler.disconnect();
+    setStatus("loading");
+    const context = getAudioContext();
+    setSamplerName(sf2Name);
+
+    reverb ??= new Reverb(context);
+    const newSampler = new Soundfont2Sampler(context, {
+      url: SF2_INSTRUMENTS[sf2Name],
+      createSoundfont: (data) => new SoundFont2(data),
+    });
+    newSampler.output.addEffect("reverb", reverb, reverbMix);
+    setSampler(newSampler);
+
+    newSampler.load.then((sampler) => {
+      const instrumentName = sampler.instrumentNames[0];
+      setInstrumentName(instrumentName);
+      sampler.loadInstrument(instrumentName);
+      setStatus("ready");
+    });
+  }
+
+  return (
+    <div className={className}>
+      <div className="flex gap-2 items-end mb-2">
+        <div className="flex flex-col">
+          <h1 className="text-3xl">Soundfont2</h1>
+          <h2>Soundfont2 sampler</h2>
+        </div>
+
+        <div>(experimental)</div>
+
+        <LoadWithStatus
+          status={status}
+          onClick={() => loadSampler("Supersaw")}
+        />
+        <ConnectMidi instrument={sampler} />
+      </div>
+      <div className="my-2">
+        <select
+          className="appearance-none bg-zinc-700 text-zinc-200 rounded border border-gray-400 py-2 px-3 leading-tight focus:outline-none focus:border-blue-500"
+          value={samplerName}
+          onChange={(e) => {
+            const sf2name = e.target.value;
+            loadSampler(sf2name);
+          }}
+        >
+          {samplerNames.map((name) => (
+            <option key={name} value={name}>
+              {name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className={status !== "ready" ? "opacity-30" : ""}>
+        <div className="flex gap-4 mb-2 no-select">
+          <select
+            className="appearance-none bg-zinc-700 text-zinc-200 rounded border border-gray-400 py-2 px-3 leading-tight focus:outline-none focus:border-blue-500"
+            value={instrumentName}
+            onChange={(e) => {
+              const instrumentName = e.target.value;
+              setInstrumentName(instrumentName);
+              sampler?.loadInstrument(instrumentName);
+            }}
+          >
+            {sampler?.instrumentNames.map((name) => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </select>
+          <button
+            className="bg-zinc-700 rounded px-3 py-0.5 shadow"
+            onClick={() => {
+              sampler?.stop();
+            }}
+          >
+            Stop all
+          </button>
+        </div>
+        <div className="flex gap-4 mb-2 no-select">
+          <div>Volume:</div>
+          <input
+            type="range"
+            min={0}
+            max={127}
+            step={1}
+            value={volume}
+            onChange={(e) => {
+              const volume = e.target.valueAsNumber;
+              sampler?.output.setVolume(volume);
+              setVolume(volume);
+            }}
+          />
+          <div>Reverb:</div>
+          <input
+            type="range"
+            min={0}
+            max={1}
+            step={0.001}
+            value={reverbMix}
+            onChange={(e) => {
+              const mix = e.target.valueAsNumber;
+              sampler?.output.sendEffect("reverb", mix);
+              setReverbMix(mix);
+            }}
+          />
+        </div>
+        <PianoKeyboard
+          borderColor="border-blue-700"
+          onPress={(note) => {
+            if (!sampler) return;
+            note.time = (note.time ?? 0) + sampler.context.currentTime;
+            sampler.start(note);
+          }}
+          onRelease={(midi) => {
+            sampler?.stop({ stopId: midi });
+          }}
+        />
+      </div>
+    </div>
+  );
+}

site/pages/index.tsx

@@ -6,6 +6,7 @@ export * from "./reverb/reverb";
 export * from "./sampler";
 export * from "./smolken";
 export * from "./soundfont/soundfont";
+export * from "./soundfont2";
 export * from "./splendid-grand-piano";
 export * from "./storage";
 export * from "./versilian";

site/src/Soundfont2Example.tsx

@@ -79,11 +79,11 @@ export class Mellotron implements InternalPlayer {
 
   public constructor(
     public readonly context: BaseAudioContext,
-    options: MellotronOptions
+    private readonly options: MellotronOptions
   ) {
     this.config = getMellotronConfig(options);
     this.player = new DefaultPlayer(context, options);
-    this.group = createEmptyRegionGroup(options);
+    this.group = createEmptyRegionGroup();
 
     const loader = loadMellotronInstrument(
       this.config.instrument,
@@ -104,7 +104,9 @@ export class Mellotron implements InternalPlayer {
   start(sample: SampleStart | string | number) {
     const found = findFirstSampleInRegions(
       this.group,
-      typeof sample === "object" ? sample : { note: sample }
+      typeof sample === "object" ? sample : { note: sample },
+      undefined,
+      this.options
     );
 
     if (!found) return () => undefined;