v0.17.1 - Migrate sample sources and remove websfz format support

CHANGELOG.md

@@ -1,6 +1,8 @@
 # smplr
 
-## 0.17.0
+## 0.17.x
+
+- Migrate Piano sample sources to smpldsnds (fix a iOS loading problem)
 
 #### New audio player (`src/smplr/`)
 

package.json

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

site/pages/index.tsx

@@ -1,5 +1,6 @@
 import { Inter } from "next/font/google";
 import Head from "next/head";
+import { version } from "smplr/package.json";
 import { DrumMachineExample } from "src/DrumMachineExample";
 import { ElectricPianoExample } from "src/ElectricPianoExample";
 import { MalletExample } from "src/MalletExample";
@@ -23,6 +24,7 @@ export default function Home() {
       <main className={"max-w-4xl mx-auto my-20 p-4" + inter.className}>
         <div className="flex items-end mb-16">
           <h1 className="text-6xl font-bold">smplr</h1>
+          <span className="text-zinc-500 ml-3 text-lg">{version}</span>
         </div>
 
         <div className="flex flex-col gap-8">

site/src/DrumMachineExample.tsx

@@ -6,7 +6,7 @@ import { LoadWithStatus, useStatus } from "./useStatus";
 let reverb: Reverb | undefined;
 
 export function DrumMachineExample({ className }: { className?: string }) {
-  const [status, setStatus] = useStatus();
+  const { status, setStatus, progress, onLoadProgress } = useStatus();
   const [dmName, setDmName] = useState(getDrumMachineNames()[0]);
   const [drums, setDrumMachine] = useState<DrumMachine | undefined>(undefined);
   const [reverbMix, setReverbMix] = useState(0.0);
@@ -16,7 +16,7 @@ export function DrumMachineExample({ className }: { className?: string }) {
     setStatus("loading");
     const context = getAudioContext();
     reverb ??= new Reverb(context);
-    const drums = new DrumMachine(context, { instrument });
+    const drums = new DrumMachine(context, { instrument, onLoadProgress });
     drums.output.addEffect("reverb", reverb, reverbMix);
 
     drums.load
@@ -36,6 +36,7 @@ export function DrumMachineExample({ className }: { className?: string }) {
         <h1 className="text-3xl">DrumMachine</h1>
         <LoadWithStatus
           status={status}
+          progress={progress}
           onClick={() => {
             loadDrumMachine(dmName);
           }}

site/src/ElectricPianoExample.tsx

@@ -5,15 +5,16 @@ import { ElectricPiano, getElectricPianoNames, Reverb } from "smplr";
 import { getAudioContext } from "./audio-context";
 import { ConnectMidi } from "./ConnectMidi";
 import { PianoKeyboard } from "./PianoKeyboard";
-import { LoadWithStatus, useStatus } from "./useStatus";
+import { LoadWithStatus, SampleFormat, useStatus } from "./useStatus";
 
 let reverb: Reverb | undefined;
 let instrumentNames = getElectricPianoNames();
 
 export function ElectricPianoExample({ className }: { className?: string }) {
   const [piano, setPiano] = useState<ElectricPiano | undefined>(undefined);
   const [instrumentName, setInstrumentName] = useState("CP80");
-  const [status, setStatus] = useStatus();
+  const { status, setStatus, progress, onLoadProgress } = useStatus();
+  const [format, setFormat] = useState<SampleFormat>("ogg");
   const [reverbMix, setReverbMix] = useState(0);
   const [tremolo, setTremolo] = useState(0);
   const [volume, setVolume] = useState(100);
@@ -23,7 +24,7 @@ export function ElectricPianoExample({ className }: { className?: string }) {
     setStatus("loading");
     const context = getAudioContext();
     reverb ??= new Reverb(context);
-    const newPiano = new ElectricPiano(context, { instrument, volume });
+    const newPiano = new ElectricPiano(context, { instrument, volume, onLoadProgress, formats: [format] });
     newPiano.output.addEffect("reverb", reverb, reverbMix);
     setPiano(newPiano);
     newPiano.load.then(() => {
@@ -37,7 +38,10 @@ export function ElectricPianoExample({ className }: { className?: string }) {
         <h1 className="text-3xl">Electric Piano</h1>
         <LoadWithStatus
           status={status}
+          progress={progress}
           onClick={() => loadPiano(instrumentName)}
+          format={format}
+          onFormatChange={setFormat}
         />
         <ConnectMidi instrument={piano} />
       </div>

site/src/MalletExample.tsx

@@ -15,7 +15,7 @@ export function MalletExample({ className }: { className?: string }) {
   const [instrumentName, setInstrumentName] = useState<string>(
     instrumentNames[0]
   );
-  const [status, setStatus] = useStatus();
+  const { status, setStatus, progress, onLoadProgress } = useStatus();
   const [reverbMix, setReverbMix] = useState(0);
   const [volume, setVolume] = useState(100);
 
@@ -27,6 +27,7 @@ export function MalletExample({ className }: { className?: string }) {
     const newPiano = new Mallet(context, {
       instrument: instrumentName,
       volume,
+      onLoadProgress,
     });
     newPiano.output.addEffect("reverb", reverb, reverbMix);
     setInstrument(newPiano);
@@ -42,6 +43,7 @@ export function MalletExample({ className }: { className?: string }) {
 
         <LoadWithStatus
           status={status}
+          progress={progress}
           onClick={() => loadMallet(instrumentName)}
         />
         <ConnectMidi instrument={instrument} />

site/src/MellotronExample.tsx

@@ -17,7 +17,7 @@ export function MellotronExample({ className }: { className?: string }) {
   const [instrumentName, setInstrumentName] = useState<string>(
     instrumentNames[0]
   );
-  const [status, setStatus] = useStatus();
+  const { status, setStatus, progress, onLoadProgress } = useStatus();
   const [reverbMix, setReverbMix] = useState(0);
   const [volume, setVolume] = useState(100);
 
@@ -29,6 +29,7 @@ export function MellotronExample({ className }: { className?: string }) {
     const newInstrument = new Mellotron(context, {
       instrument: instrumentName,
       volume,
+      onLoadProgress,
     });
     newInstrument.output.addEffect("reverb", reverb, reverbMix);
     setInstrument(newInstrument);
@@ -44,6 +45,7 @@ export function MellotronExample({ className }: { className?: string }) {
 
         <LoadWithStatus
           status={status}
+          progress={progress}
           onClick={() => loadMellotron(instrumentName)}
         />
         <ConnectMidi instrument={instrument} />

site/src/PianoExample.tsx

@@ -5,14 +5,15 @@ import { CacheStorage, Reverb, SplendidGrandPiano } from "smplr";
 import { ConnectMidi } from "./ConnectMidi";
 import { PianoKeyboard } from "./PianoKeyboard";
 import { getAudioContext } from "./audio-context";
-import { LoadWithStatus, useStatus } from "./useStatus";
+import { LoadWithStatus, SampleFormat, useStatus } from "./useStatus";
 
 let reverb: Reverb | undefined;
 let storage: CacheStorage | undefined;
 
 export function PianoExample({ className }: { className?: string }) {
   const [piano, setPiano] = useState<SplendidGrandPiano | undefined>(undefined);
-  const [status, setStatus] = useStatus();
+  const { status, setStatus, progress, onLoadProgress } = useStatus();
+  const [format, setFormat] = useState<SampleFormat>("ogg");
   const [reverbMix, setReverbMix] = useState(0.0);
   const [volume, setVolume] = useState(100);
 
@@ -22,7 +23,7 @@ export function PianoExample({ className }: { className?: string }) {
     const context = getAudioContext();
     reverb ??= new Reverb(context);
     storage ??= new CacheStorage();
-    const newPiano = new SplendidGrandPiano(context, { volume, storage });
+    const newPiano = new SplendidGrandPiano(context, { volume, storage, onLoadProgress, formats: [format] });
     newPiano.output.addEffect("reverb", reverb, reverbMix);
     setPiano(newPiano);
     newPiano.load.then(() => {
@@ -34,7 +35,7 @@ export function PianoExample({ className }: { className?: string }) {
     <div className={className}>
       <div className="flex gap-2 items-end mb-2">
         <h1 className="text-3xl">SplendidGrandPiano</h1>
-        <LoadWithStatus status={status} onClick={loadPiano} />
+        <LoadWithStatus status={status} progress={progress} onClick={loadPiano} format={format} onFormatChange={status === "init" ? setFormat : undefined} />
         <ConnectMidi instrument={piano} />
       </div>
       <div></div>

site/src/SamplerExample.tsx

@@ -22,7 +22,7 @@ const samples = [
 ];
 
 export function SamplerExample({ className }: { className?: string }) {
-  const [status, setStatus] = useStatus();
+  const { status, setStatus, progress, onLoadProgress } = useStatus();
   const [sampler, setSampler] = useState<Sampler | undefined>();
   const [reverbMix, setReverbMix] = useState(0.0);
   const [volume, setVolume] = useState(100);
@@ -39,7 +39,7 @@ export function SamplerExample({ className }: { className?: string }) {
       },
       {} as Record<string, string>
     );
-    const sampler = new Sampler(context, { buffers });
+    const sampler = new Sampler(context, { buffers, onLoadProgress });
     sampler.output.addEffect("reverb", reverb, reverbMix);
 
     sampler.load
@@ -59,6 +59,7 @@ export function SamplerExample({ className }: { className?: string }) {
         <h1 className="text-3xl">Sampler</h1>
         <LoadWithStatus
           status={status}
+          progress={progress}
           onClick={() => {
             loadDrumMachine();
           }}

site/src/SmolkenExample.tsx

@@ -16,7 +16,7 @@ export function SmolkenExample({ className }: { className?: string }) {
   const [instrumentName, setInstrumentName] = useState<string>(
     instrumentNames[0]
   );
-  const [status, setStatus] = useStatus();
+  const { status, setStatus, progress, onLoadProgress } = useStatus();
   const [reverbMix, setReverbMix] = useState(0);
   const [volume, setVolume] = useState(100);
 
@@ -29,6 +29,7 @@ export function SmolkenExample({ className }: { className?: string }) {
     const newInstrument = new Smolken(context, {
       instrument: instrumentName,
       volume,
+      onLoadProgress,
     });
     newInstrument.output.addEffect("reverb", reverb, reverbMix);
     setInstrument(newInstrument);
@@ -44,6 +45,7 @@ export function SmolkenExample({ className }: { className?: string }) {
 
         <LoadWithStatus
           status={status}
+          progress={progress}
           onClick={() => loadSmolken(instrumentName)}
         />
         <ConnectMidi instrument={instrument} />

site/src/Soundfont2Example.tsx

@@ -32,7 +32,7 @@ export function Soundfont2Example({ className }: { className?: string }) {
   );
   const [samplerName, setSamplerName] = useState<string>(samplerNames[0]);
   const [instrumentName, setInstrumentName] = useState<string>("");
-  const [status, setStatus] = useStatus();
+  const { status, setStatus, progress, onLoadProgress } = useStatus();
   const [reverbMix, setReverbMix] = useState(0);
   const [volume, setVolume] = useState(100);
   const [isCustomEnabled, setCustomEnabled] = useState(false);
@@ -76,6 +76,7 @@ export function Soundfont2Example({ className }: { className?: string }) {
 
         <LoadWithStatus
           status={status}
+          progress={progress}
           onClick={() => {
             if (isCustomEnabled) {
               loadSampler(customUrl);

site/src/SoundfontExample.tsx

@@ -8,7 +8,7 @@ import { LoadWithStatus, useStatus } from "./useStatus";
 let reverb: Reverb | undefined;
 
 export function SoundfontExample({ className }: { className?: string }) {
-  const [status, setStatus] = useStatus();
+  const { status, setStatus, progress, onLoadProgress } = useStatus();
   const [loopStatus, setLoopStatus] = useState<"disabled" | "loop" | "no-loop">(
     "disabled"
   );
@@ -27,6 +27,7 @@ export function SoundfontExample({ className }: { className?: string }) {
       kit,
       instrument,
       loadLoopData: true,
+      onLoadProgress,
     });
     soundfont.output.addEffect("reverb", reverb, 0.0);
     soundfont.load
@@ -54,6 +55,7 @@ export function SoundfontExample({ className }: { className?: string }) {
         <h1 className="text-3xl">Soundfont</h1>
         <LoadWithStatus
           status={status}
+          progress={progress}
           onClick={() => {
             loadSoundfont(libraryName, instrumentName);
           }}

site/src/VersilianExample.tsx

@@ -26,7 +26,7 @@ export function VersilianExample({ className }: { className?: string }) {
   const [instrumentName, setInstrumentName] = useState<string>(
     instrumentNames[0]
   );
-  const [status, setStatus] = useStatus();
+  const { status, setStatus, progress, onLoadProgress } = useStatus();
   const [reverbMix, setReverbMix] = useState(0);
   const [volume, setVolume] = useState(100);
 
@@ -46,6 +46,7 @@ export function VersilianExample({ className }: { className?: string }) {
     const newInstrument = new Versilian(context, {
       instrument: instrumentName,
       volume,
+      onLoadProgress,
     });
     newInstrument.output.addEffect("reverb", reverb, reverbMix);
     setInstrument(newInstrument);
@@ -66,6 +67,7 @@ export function VersilianExample({ className }: { className?: string }) {
 
         <LoadWithStatus
           status={status}
+          progress={progress}
           onClick={() => loadVersilian(instrumentName)}
         />
         <ConnectMidi instrument={instrument} />

site/src/useStatus.tsx

@@ -1,29 +1,64 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 export type Status = "init" | "loading" | "ready" | "error";
 
 export function useStatus() {
-  return useState<Status>("init");
+  const [status, setStatus] = useState<Status>("init");
+  const [progress, setProgress] = useState("");
+
+  const onLoadProgress = useCallback(
+    (p: { loaded: number; total: number }) => {
+      setProgress(
+        p.total > 0 ? `${Math.round((100 * p.loaded) / p.total)}%` : ""
+      );
+    },
+    []
+  );
+
+  return { status, setStatus, progress, onLoadProgress } as const;
 }
 
+export type SampleFormat = "ogg" | "m4a";
+
 export function LoadWithStatus({
   status,
   onClick,
+  progress,
+  format,
+  onFormatChange,
 }: {
   status: string;
   onClick: () => void;
+  progress?: string;
+  format?: SampleFormat;
+  onFormatChange?: (format: SampleFormat) => void;
 }) {
   return status === "init" ? (
-    <button
-      className="text-rose-700 bg-zinc-900 px-2 rounded"
-      onClick={onClick}
-    >
-      Load
-    </button>
+    <div className="flex gap-2 items-center">
+      <button
+        className="text-rose-700 bg-zinc-900 px-2 rounded"
+        onClick={onClick}
+      >
+        Load
+      </button>
+      {onFormatChange && (
+        <select
+          className="bg-zinc-900 text-zinc-400 text-sm px-1 rounded"
+          value={format}
+          onChange={(e) => onFormatChange(e.target.value as SampleFormat)}
+        >
+          <option value="ogg">ogg</option>
+          <option value="m4a">m4a</option>
+        </select>
+      )}
+    </div>
   ) : status === "ready" ? (
-    <div className="text-teal-600">Ready</div>
+    <div className="flex gap-2 items-center">
+      <div className="text-teal-600">Ready</div>
+      {format && <div className="text-zinc-500 text-sm">({format})</div>}
+    </div>
   ) : status === "loading" ? (
-    <div className="text-gray-500">Loading...</div>
+    <div className="text-gray-500">Loading{progress ? ` ${progress}` : "..."}</div>
   ) : (
     <div className="text-red-700">Error loading</div>
   );