zds-pickers 4.3.0 → 4.5.0

package/dist/other/SoundFontProvider.js

@@ -29,7 +29,17 @@ const midiToNoteName = (midiNumber) => {
         : midiNumber;
     return Note.fromMidi(num);
 };
-const createBundledPlayer = (soundfontData) => {
+/**
+ * Key-up release, in seconds — the same 0.3 s soundfont-player's own envelope
+ * uses on the remote path. Pausing the element outright cut the sample
+ * mid-waveform, which clicked on every key-up and made a glissando sound
+ * like a row of switches.
+ */
+const RELEASE_SECONDS = 0.3;
+// setTargetAtTime is exponential, so it needs a time constant rather than a
+// duration: five of them leave <1% of the level by the time the element stops.
+const RELEASE_TIME_CONSTANT = RELEASE_SECONDS / 5;
+const createBundledPlayer = (audioContext, soundfontData) => {
     const player = {
         play: (note, velocity) => {
             const noteName = midiToNoteName(note);
@@ -37,13 +47,29 @@ const createBundledPlayer = (soundfontData) => {
             if (!noteData) {
                 return { stop: () => { } };
             }
+            // Still streamed by an <audio> element — no decode, so no first-note
+            // latency — but routed through a gain node so the release can ramp.
             const audio = new Audio(noteData);
-            audio.volume = (velocity ?? 127) / 127;
+            const source = audioContext.createMediaElementSource(audio);
+            const gain = audioContext.createGain();
+            gain.gain.value = (velocity ?? 127) / 127;
+            source.connect(gain).connect(audioContext.destination);
             audio.play();
+            let stopped = false;
             return {
                 stop: () => {
-                    audio.pause();
-                    audio.currentTime = 0;
+                    if (stopped)
+                        return;
+                    stopped = true;
+                    const now = audioContext.currentTime;
+                    gain.gain.cancelScheduledValues(now);
+                    gain.gain.setValueAtTime(gain.gain.value, now);
+                    gain.gain.setTargetAtTime(0, now, RELEASE_TIME_CONSTANT);
+                    window.setTimeout(() => {
+                        audio.pause();
+                        source.disconnect();
+                        gain.disconnect();
+                    }, RELEASE_SECONDS * 1000);
                 },
             };
         },
@@ -54,7 +80,7 @@ const createBundledPlayer = (soundfontData) => {
 const loadBundledOrRemoteInstrument = (audioContext, instrumentName, format, soundfont, hostname) => {
     const soundfontData = window.MIDI?.Soundfont?.[instrumentName];
     if (soundfontData) {
-        return Promise.resolve(createBundledPlayer(soundfontData));
+        return Promise.resolve(createBundledPlayer(audioContext, soundfontData));
     }
     // biome-ignore lint/suspicious/noConsole: intentional diagnostics for missing bundled soundfont
     console.warn(`[zds-pickers] Bundled soundfont "${instrumentName}" not found; falling back to remote load.`);
@@ -72,7 +98,9 @@ const loadBundledOrRemoteInstrument = (audioContext, instrumentName, format, sou
 };
 const SoundfontProvider = (props) => {
     const { audioContext, format, hostname, instrumentName, onChange, render, soundfont, } = props;
-    const [isLoading, setIsLoading] = useState(true);
+    // No instrument means silent, not loading — starting true would leave a
+    // muted keyboard disabled forever, since nothing ever loads to clear it.
+    const [isLoading, setIsLoading] = useState(Boolean(instrumentName));
     const [activeAudioNodes, setActiveAudioNodes] = useState({});
     const [instrument, setInstrument] = useState(null);
     const loadInstrument = useCallback((nm) => {
@@ -111,7 +139,11 @@ const SoundfontProvider = (props) => {
     useEffect(() => {
         if (instrumentName) {
             loadInstrument(instrumentName);
+            return;
         }
+        // Unset after a load (muting): drop the loaded player so playNote no-ops.
+        setInstrument(null);
+        setIsLoading(false);
     }, [instrumentName, loadInstrument]);
     useEffect(() => {
         if (isDefined(instrumentName)) {

package/dist/pickers/KeyPicker.js

@@ -24,7 +24,7 @@ const makeNoteNameLabelRenderer = (noteLabels) => ({ isAccidental, isActive, mid
         }), children: pitchName }));
 };
 const KeyPicker = (props) => {
-    const { value, onChange, disabled = false, height = 100, noteLabels, showNoteNames = false, width = 300, octave = 4, ...rest } = props;
+    const { value, onChange, disabled = false, height = 100, muted = false, noteLabels, showNoteNames = false, width = 300, octave = 4, ...rest } = props;
     const renderNoteLabel = useMemo(() => makeNoteNameLabelRenderer(noteLabels), [noteLabels]);
     const handleKeyClick = useCallback((note) => {
         if (disabled)
@@ -36,6 +36,6 @@ const KeyPicker = (props) => {
     const octaveStart = 60 + (octave - 4) * 12;
     const octaveEnd = octaveStart + 11;
     const shouldHighlight = value !== noSelection && value >= octaveStart && value <= octaveEnd;
-    return (_jsx(OctavePlayer, { ...rest, className: showNoteNames ? 'ReactPiano--showNoteNames' : undefined, selectedNotes: shouldHighlight ? [value] : [], disabled: disabled, height: height, renderNoteLabel: showNoteNames ? renderNoteLabel : undefined, width: width, octave: octave, onClick: handleKeyClick, instrumentName: "acoustic_grand_piano" }));
+    return (_jsx(OctavePlayer, { ...rest, className: showNoteNames ? 'ReactPiano--showNoteNames' : undefined, selectedNotes: shouldHighlight ? [value] : [], disabled: disabled, height: height, renderNoteLabel: showNoteNames ? renderNoteLabel : undefined, width: width, octave: octave, onClick: handleKeyClick, instrumentName: muted ? undefined : 'acoustic_grand_piano' }));
 };
 export { KeyPicker };

package/dist/types/pickers/KeyPicker.d.ts

@@ -4,6 +4,8 @@ type KeyPickerProps = Omit<PianoProviderProps, 'className' | 'instrumentName' |
     onChange: (value: number) => void;
     disabled?: boolean;
     height?: number;
+    /** Silences the piano sample a key click otherwise plays. */
+    muted?: boolean;
     /**
      * Chroma-indexed note names (index 0 = C) overriding the default flat
      * spelling — lets a caller label keys for a specific key/scale, where both

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -55,9 +55,10 @@
     "react-dom": "18.3.1",
     "react-select": "5.10.1",
     "storybook": "10.5.5",
+    "tonal": "6.4.3",
     "typescript": "5.8.2",
     "vite": "^8.0.16",
-    "vitest": "4.1.10",
+    "vitest": "4.1.11",
     "zds-mappings": "1.4.9"
   },
   "dependencies": {
@@ -66,7 +67,6 @@
     "d3-selection": "3.0.0",
     "react-svgmt": "2.0.2",
     "soundfont-player": "0.12.0",
-    "tonal": "6.4.2",
     "zds-react-piano": "4.1.0"
   },
   "peerDependencies": {
@@ -74,6 +74,7 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-select": ">=5.10.0",
+    "tonal": ">=6.4.2",
     "zds-mappings": "^1.4.9"
   },
   "scripts": {