@jadujoel/web-audio-clip-node 0.1.6 → 0.1.8

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/components/SnappableSlider.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+export function SnappableSlider({ min, max, value, skew = 1, step, defaultValue, enableSnap = false, snaps = [], ticks = [], logarithmic = false, disabled = false, labelId, valueText, formatTick, onChange, }) {
+    const containerRef = useRef(null);
+    const isDragging = useRef(false);
+    const isOptionKeyHeld = useRef(false);
+    const dragBoundsRef = useRef(null);
+    const [altHeld, setAltHeld] = useState(false);
+    const resolvedStep = step ?? (max - min) / 100;
+    const getRatioFromValue = useCallback((v) => {
+        if (logarithmic) {
+            if (min <= 0 || max <= 0)
+                return 0;
+            const clamped = Math.max(v, min);
+            return Math.log(clamped / min) / Math.log(max / min);
+        }
+        const range = max - min;
+        if (range === 0)
+            return 0;
+        const normalized = (v - min) / range;
+        return skew === 1 ? normalized : Math.max(normalized, 0) ** skew;
+    }, [min, max, skew, logarithmic]);
+    const getValueFromRatio = useCallback((ratio) => {
+        if (logarithmic) {
+            if (min <= 0 || max <= 0)
+                return min;
+            return min * (max / min) ** ratio;
+        }
+        const adjusted = skew === 1 ? ratio : ratio ** (1 / skew);
+        return adjusted * (max - min) + min;
+    }, [min, max, skew, logarithmic]);
+    const getSnapped = useCallback((v) => {
+        if (!enableSnap || snaps.length === 0 || isOptionKeyHeld.current)
+            return v;
+        return snaps.reduce((closest, snap) => Math.abs(snap - v) < Math.abs(closest - v) ? snap : closest);
+    }, [enableSnap, snaps]);
+    const clampAndEmit = useCallback((raw) => {
+        const clamped = Math.min(Math.max(raw, min), max);
+        const snapped = getSnapped(clamped);
+        onChange?.(snapped);
+    }, [min, max, getSnapped, onChange]);
+    const updateFromClientX = useCallback((clientX) => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const bounds = dragBoundsRef.current ?? el.getBoundingClientRect();
+        const { left, width } = bounds;
+        if (width <= 0)
+            return;
+        const ratio = Math.min(Math.max((clientX - left) / width, 0), 1);
+        const raw = getValueFromRatio(ratio);
+        const snapped = getSnapped(raw);
+        onChange?.(snapped);
+    }, [getValueFromRatio, getSnapped, onChange]);
+    const startDrag = useCallback((clientX, altKey) => {
+        if (disabled)
+            return;
+        const el = containerRef.current;
+        if (!el)
+            return;
+        dragBoundsRef.current = el.getBoundingClientRect();
+        isDragging.current = true;
+        isOptionKeyHeld.current = altKey;
+        setAltHeld(altKey);
+        updateFromClientX(clientX);
+        const handleMove = (e) => {
+            if (isOptionKeyHeld.current !== e.altKey) {
+                isOptionKeyHeld.current = e.altKey;
+                setAltHeld(e.altKey);
+            }
+            updateFromClientX(e.clientX);
+        };
+        const handleTouchMove = (e) => updateFromClientX(e.touches[0].clientX);
+        const handleUp = () => {
+            isDragging.current = false;
+            isOptionKeyHeld.current = false;
+            dragBoundsRef.current = null;
+            setAltHeld(false);
+            document.removeEventListener("mousemove", handleMove);
+            document.removeEventListener("mouseup", handleUp);
+            document.removeEventListener("touchmove", handleTouchMove);
+            document.removeEventListener("touchend", handleUp);
+        };
+        document.addEventListener("mousemove", handleMove);
+        document.addEventListener("mouseup", handleUp);
+        document.addEventListener("touchmove", handleTouchMove);
+        document.addEventListener("touchend", handleUp);
+    }, [updateFromClientX, disabled]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Alt") {
+            isOptionKeyHeld.current = true;
+            setAltHeld(true);
+            return;
+        }
+        if (disabled)
+            return;
+        let newValue = value;
+        const s = resolvedStep;
+        const bigStep = s * 10;
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                newValue = value + s;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                newValue = value - s;
+                break;
+            case "PageUp":
+                newValue = value + bigStep;
+                break;
+            case "PageDown":
+                newValue = value - bigStep;
+                break;
+            case "Home":
+                newValue = min;
+                break;
+            case "End":
+                newValue = max;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        clampAndEmit(newValue);
+    }, [value, resolvedStep, min, max, clampAndEmit, disabled]);
+    const handleKeyUp = useCallback((e) => {
+        if (e.key === "Alt") {
+            isOptionKeyHeld.current = false;
+            setAltHeld(false);
+        }
+    }, []);
+    const handleDoubleClick = useCallback(() => {
+        if (disabled)
+            return;
+        if (defaultValue !== undefined) {
+            onChange?.(defaultValue);
+        }
+    }, [defaultValue, onChange, disabled]);
+    const ratio = getRatioFromValue(value);
+    const pct = `${ratio * 100}%`;
+    const snapElements = useMemo(() => {
+        let prevRatio = -1;
+        return snaps.map((snap, i) => {
+            const r = getRatioFromValue(snap);
+            const show = i === 0 || r - prevRatio >= 0.05;
+            if (show)
+                prevRatio = r;
+            return (_jsxs("span", { children: [_jsx("span", { className: "slider-snap", style: { left: `${r * 100}%` } }), _jsx("span", { className: "slider-xval", style: { left: `${r * 100}%`, display: show ? "block" : "none" }, children: formatTick ? formatTick(snap) : snap })] }, snap));
+        });
+    }, [snaps, getRatioFromValue, formatTick]);
+    const tickElements = useMemo(() => {
+        let prevRatio = -1;
+        return ticks.map((tick) => {
+            const r = getRatioFromValue(tick);
+            const show = prevRatio < 0 || r - prevRatio >= 0.05;
+            if (show)
+                prevRatio = r;
+            return (_jsxs("span", { children: [_jsx("span", { className: "slider-tick", style: { left: `${r * 100}%` } }), _jsx("span", { className: "slider-xval", style: { left: `${r * 100}%`, display: show ? "block" : "none" }, children: formatTick ? formatTick(tick) : tick })] }, tick));
+        });
+    }, [ticks, getRatioFromValue, formatTick]);
+    const sliderClass = [
+        "snappable-slider",
+        disabled ? "snappable-slider--disabled" : "",
+        altHeld ? "snappable-slider--fine" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("div", { role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-valuetext": valueText, "aria-labelledby": labelId, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, ref: containerRef, className: sliderClass, onMouseDown: (e) => {
+            if (e.button !== 0)
+                return;
+            startDrag(e.clientX, e.altKey);
+        }, onTouchStart: (e) => startDrag(e.touches[0].clientX, false), onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onDoubleClick: handleDoubleClick, children: [_jsx("span", { className: "slider-track" }), _jsx("span", { className: "slider-fill", style: { width: pct } }), _jsx("span", { className: "slider-thumb", style: { left: pct } }), snapElements, tickElements] }));
+}

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/components/TransportButtons.d.ts

@@ -0,0 +1,14 @@
+import type { ClipNodeState } from "../audio/types";
+interface TransportButtonsProps {
+    nodeState: ClipNodeState;
+    onStart: () => void;
+    onStop: () => void;
+    onPause: () => void;
+    onResume: () => void;
+    onDispose: () => void;
+    onLog: () => void;
+    onLoadSound: () => void;
+}
+declare function TransportButtonsInner({ nodeState, onStart, onStop, onPause, onResume, onDispose, onLog, onLoadSound, }: TransportButtonsProps): import("react/jsx-runtime").JSX.Element;
+export declare const TransportButtons: import("react").MemoExoticComponent<typeof TransportButtonsInner>;
+export {};

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/components/TransportButtons.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+function TransportButtonsInner({ nodeState, onStart, onStop, onPause, onResume, onDispose, onLog, onLoadSound, }) {
+    const cantStop = nodeState === "initial" ||
+        nodeState === "disposed" ||
+        nodeState === "ended";
+    return (_jsxs("section", { id: "buttons", children: [_jsxs("div", { className: "btn-group-primary", children: [_jsx("button", { type: "button", onClick: onLoadSound, children: "Load Sound" }), _jsx("button", { type: "button", onClick: onStart, disabled: nodeState === "started", "aria-disabled": nodeState === "started", children: "Start" }), _jsx("button", { type: "button", onClick: onStop, disabled: cantStop, "aria-disabled": cantStop, children: "Stop" }), _jsx("button", { type: "button", onClick: onPause, disabled: nodeState !== "started" && nodeState !== "resumed", "aria-disabled": nodeState !== "started" && nodeState !== "resumed", children: "Pause" }), _jsx("button", { type: "button", onClick: onResume, disabled: nodeState !== "paused", "aria-disabled": nodeState !== "paused", children: "Resume" })] }), _jsxs("div", { className: "btn-group-secondary", children: [_jsx("button", { type: "button", className: "btn-secondary", onClick: onLog, children: "Log State" }), _jsx("button", { type: "button", className: "btn-secondary", onClick: onDispose, children: "Dispose" })] })] }));
+}
+export const TransportButtons = memo(TransportButtonsInner);

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/controls/controlDefs.d.ts

@@ -0,0 +1,31 @@
+export type ControlKey = "playhead" | "offset" | "duration" | "startDelay" | "stopDelay" | "fadeIn" | "fadeOut" | "loopStart" | "loopEnd" | "loopCrossfade" | "playbackRate" | "detune" | "gain" | "pan" | "lowpass" | "highpass";
+export interface ControlDef {
+    key: ControlKey;
+    label: string;
+    min: number;
+    max: number;
+    defaultValue: number;
+    precision?: number;
+    snap?: string;
+    preset?: string;
+    title?: string;
+    hasToggle?: boolean;
+    hasSnap?: boolean;
+    hasMaxLock?: boolean;
+    /** When true, max defaults to audio file duration. */
+    maxLockedByDefault?: boolean;
+}
+export declare const DEFAULT_TEMPO = 120;
+export declare const SAMPLE_RATE = 48000;
+export declare const controlDefs: ControlDef[];
+export declare const loopControlDefs: ControlDef[];
+export declare const paramDefs: ControlDef[];
+export declare const allDefs: ControlDef[];
+export declare function buildDefaults(): {
+    values: Record<ControlKey, number>;
+    snaps: Record<ControlKey, string>;
+    enabled: Record<ControlKey, boolean>;
+    mins: Record<ControlKey, number>;
+    maxs: Record<ControlKey, number>;
+    maxLocked: Record<ControlKey, boolean>;
+};

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/controls/controlDefs.js

@@ -0,0 +1,214 @@
+// ---------------------------------------------------------------------------
+// Control definitions — shared configuration for all audio controls
+// ---------------------------------------------------------------------------
+export const DEFAULT_TEMPO = 120;
+export const SAMPLE_RATE = 48000;
+export const controlDefs = [
+    {
+        key: "offset",
+        label: "Offset",
+        min: 0,
+        max: 60,
+        defaultValue: 0,
+        snap: "bar",
+        hasSnap: true,
+        hasToggle: true,
+        hasMaxLock: true,
+        maxLockedByDefault: true,
+        title: "Start position in the buffer (seconds).",
+    },
+    {
+        key: "duration",
+        label: "Duration",
+        min: -1,
+        max: 60,
+        defaultValue: -1,
+        hasSnap: true,
+        hasToggle: true,
+        hasMaxLock: true,
+        maxLockedByDefault: true,
+        title: "How long to play before auto-stopping (seconds). -1 for full length.",
+    },
+    {
+        key: "startDelay",
+        label: "StartDelay",
+        min: 0,
+        max: 4,
+        defaultValue: 0,
+        snap: "beat",
+        hasSnap: true,
+        hasToggle: true,
+        title: "Delay before starting (seconds).",
+    },
+    {
+        key: "stopDelay",
+        label: "StopDelay",
+        min: 0,
+        max: 4,
+        defaultValue: 0,
+        snap: "beat",
+        hasSnap: true,
+        hasToggle: true,
+        hasMaxLock: true,
+        title: "Delay before stopping (seconds).",
+    },
+    {
+        key: "fadeIn",
+        label: "FadeIn",
+        min: 0,
+        max: 60,
+        defaultValue: 0,
+        snap: "beat",
+        hasSnap: true,
+        hasToggle: true,
+        hasMaxLock: true,
+        title: "Fade-in duration (seconds).",
+    },
+    {
+        key: "fadeOut",
+        label: "FadeOut",
+        min: 0,
+        max: 60,
+        defaultValue: 0,
+        snap: "beat",
+        hasSnap: true,
+        hasToggle: true,
+        hasMaxLock: true,
+        title: "Fade-out duration (seconds).",
+    },
+];
+export const loopControlDefs = [
+    {
+        key: "loopStart",
+        label: "Start",
+        min: 0,
+        max: 60,
+        defaultValue: 0,
+        snap: "bar",
+        hasSnap: true,
+        hasToggle: true,
+        hasMaxLock: true,
+        maxLockedByDefault: true,
+    },
+    {
+        key: "loopEnd",
+        label: "End",
+        min: 0,
+        max: 60,
+        defaultValue: 0,
+        snap: "bar",
+        hasSnap: true,
+        hasToggle: true,
+        hasMaxLock: true,
+        maxLockedByDefault: true,
+    },
+    {
+        key: "loopCrossfade",
+        label: "Crossfade",
+        min: 0,
+        max: 1,
+        defaultValue: 0,
+        snap: "beat",
+        hasSnap: true,
+        hasToggle: true,
+    },
+];
+export const paramDefs = [
+    {
+        key: "playbackRate",
+        label: "PlaybackRate",
+        min: -2,
+        max: 2,
+        defaultValue: 1,
+        precision: 2,
+        preset: "playbackRate",
+        hasToggle: true,
+        title: "Playback speed. Negative for reverse.",
+    },
+    {
+        key: "detune",
+        label: "Detune",
+        min: -2400,
+        max: 2400,
+        defaultValue: 0,
+        precision: 4,
+        preset: "cents",
+        hasToggle: true,
+        title: "Pitch shift in cents.",
+    },
+    {
+        key: "gain",
+        label: "Gain",
+        min: -100,
+        max: 0,
+        defaultValue: 0,
+        precision: 3,
+        preset: "gain",
+        hasToggle: true,
+        title: "Amplitude in dB.",
+    },
+    {
+        key: "pan",
+        label: "Pan",
+        min: -1,
+        max: 1,
+        defaultValue: 0,
+        preset: "pan",
+        hasToggle: true,
+        title: "-1 full left, 1 full right.",
+    },
+    {
+        key: "lowpass",
+        label: "Lowpass",
+        min: 32,
+        max: 16384,
+        defaultValue: 16384,
+        preset: "hertz",
+        hasToggle: true,
+        title: "Lowpass cutoff frequency.",
+    },
+    {
+        key: "highpass",
+        label: "Highpass",
+        min: 32,
+        max: 16384,
+        defaultValue: 32,
+        preset: "hertz",
+        hasToggle: true,
+        title: "Highpass cutoff frequency.",
+    },
+];
+/** Internal-only definition for playhead (not shown in UI). */
+const playheadDef = {
+    key: "playhead",
+    label: "Playhead",
+    min: 0,
+    max: 480000,
+    defaultValue: 0,
+    precision: 1,
+    snap: "int",
+    title: "Current sample position of buffer playback.",
+};
+export const allDefs = [
+    playheadDef,
+    ...controlDefs,
+    ...loopControlDefs,
+    ...paramDefs,
+];
+export function buildDefaults() {
+    const values = {};
+    const snaps = {};
+    const enabled = {};
+    const mins = {};
+    const maxs = {};
+    const maxLocked = {};
+    for (const d of allDefs) {
+        values[d.key] = d.defaultValue;
+        snaps[d.key] = d.snap ?? "none";
+        enabled[d.key] = true;
+        mins[d.key] = d.min;
+        maxs[d.key] = d.max;
+        maxLocked[d.key] = d.maxLockedByDefault ?? false;
+    }
+    return { values, snaps, enabled, mins, maxs, maxLocked };
+}

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/controls/formatValueText.d.ts

@@ -0,0 +1,2 @@
+export declare function formatValueText(value: number, key: string | undefined, snap: string, tempo: number): string;
+export declare function formatTickLabel(value: number, key: string | undefined, snap: string, tempo: number): string;

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/controls/formatValueText.js

@@ -0,0 +1,80 @@
+export function formatValueText(value, key, snap, tempo) {
+    switch (key) {
+        case "gain":
+            return `${value.toFixed(1)} dB`;
+        case "lowpass":
+        case "highpass":
+            return `${Math.round(value)} Hz`;
+        case "detune":
+            return `${Math.round(value)} cents`;
+        case "pan":
+            if (value === 0)
+                return "center";
+            return value < 0
+                ? `${Math.abs(value).toFixed(2)} left`
+                : `${value.toFixed(2)} right`;
+        case "playbackRate":
+            return `${value.toFixed(2)}x`;
+        case "playhead":
+            return `sample ${Math.round(value)}`;
+        default:
+            break;
+    }
+    if (snap === "beat" || snap === "bar" || snap === "8th" || snap === "16th") {
+        const spb = 60 / tempo;
+        if (snap === "bar") {
+            const bars = value / (spb * 4);
+            return `${Math.round(bars)} bars`;
+        }
+        if (snap === "8th") {
+            const eighths = value / (spb / 2);
+            return `${Math.round(eighths)} 8ths`;
+        }
+        if (snap === "16th") {
+            const sixteenths = value / (spb / 4);
+            return `${Math.round(sixteenths)} 16ths`;
+        }
+        const beats = value / spb;
+        return `${Math.round(beats)} beats`;
+    }
+    if (snap === "integer") {
+        return `${Math.round(value)} s`;
+    }
+    return `${value.toPrecision(4)} s`;
+}
+export function formatTickLabel(value, key, snap, tempo) {
+    switch (key) {
+        case "gain":
+            return value.toFixed(1);
+        case "lowpass":
+        case "highpass":
+            return `${Math.round(value)}`;
+        case "detune":
+            return `${Math.round(value)}`;
+        case "pan":
+            if (value === 0)
+                return "C";
+            return value < 0
+                ? `${Math.abs(value).toFixed(2)}L`
+                : `${value.toFixed(2)}R`;
+        case "playbackRate":
+            return `${value.toFixed(2)}x`;
+        case "playhead":
+            return `${Math.round(value)}`;
+        default:
+            break;
+    }
+    if (snap === "beat" || snap === "bar" || snap === "8th" || snap === "16th") {
+        const spb = 60 / tempo;
+        if (snap === "bar")
+            return `${Math.round(value / (spb * 4))}`;
+        if (snap === "8th")
+            return `${Math.round(value / (spb / 2))}`;
+        if (snap === "16th")
+            return `${Math.round(value / (spb / 4))}`;
+        return `${Math.round(value / spb)}`;
+    }
+    if (snap === "integer")
+        return `${Math.round(value)}`;
+    return value.toPrecision(4);
+}

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/controls/linkedControlPairs.d.ts

@@ -0,0 +1,20 @@
+import type { ControlKey } from "./controlDefs";
+export type LinkedControlPairKey = "fadeOutStopDelay" | "loopStartEnd";
+export interface LinkedControlPairDef {
+    key: LinkedControlPairKey;
+    label: string;
+    controls: readonly [ControlKey, ControlKey];
+}
+export declare const transportLinkedControlPairs: readonly LinkedControlPairDef[];
+export declare const loopLinkedControlPairs: readonly LinkedControlPairDef[];
+export declare function buildLinkedControlPairDefaults(): Record<LinkedControlPairKey, boolean>;
+export declare function getLinkedControlPairForControl(controlKey: ControlKey): LinkedControlPairDef | undefined;
+export declare function getActiveLinkedControls(controlKey: ControlKey, linkedPairs: Record<LinkedControlPairKey, boolean>): readonly ControlKey[];
+export declare function getLinkedControlUpdates({ pair, changedKey, nextValue, values, mins, maxs, }: {
+    pair: LinkedControlPairDef;
+    changedKey: ControlKey;
+    nextValue: number;
+    values: Record<ControlKey, number>;
+    mins: Record<ControlKey, number>;
+    maxs: Record<ControlKey, number>;
+}): Partial<Record<ControlKey, number>>;

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/controls/linkedControlPairs.js

@@ -0,0 +1,51 @@
+export const transportLinkedControlPairs = [
+    {
+        key: "fadeOutStopDelay",
+        label: "Link StopDelay and FadeOut",
+        controls: ["stopDelay", "fadeOut"],
+    },
+];
+export const loopLinkedControlPairs = [
+    {
+        key: "loopStartEnd",
+        label: "Link Start and End",
+        controls: ["loopStart", "loopEnd"],
+    },
+];
+const allLinkedControlPairs = [
+    ...transportLinkedControlPairs,
+    ...loopLinkedControlPairs,
+];
+export function buildLinkedControlPairDefaults() {
+    return {
+        fadeOutStopDelay: false,
+        loopStartEnd: false,
+    };
+}
+export function getLinkedControlPairForControl(controlKey) {
+    return allLinkedControlPairs.find((pair) => pair.controls[0] === controlKey || pair.controls[1] === controlKey);
+}
+export function getActiveLinkedControls(controlKey, linkedPairs) {
+    const pair = getLinkedControlPairForControl(controlKey);
+    if (pair && linkedPairs[pair.key]) {
+        return pair.controls;
+    }
+    return [controlKey];
+}
+export function getLinkedControlUpdates({ pair, changedKey, nextValue, values, mins, maxs, }) {
+    const [firstKey, secondKey] = pair.controls;
+    if (changedKey !== firstKey && changedKey !== secondKey) {
+        return { [changedKey]: nextValue };
+    }
+    const otherKey = changedKey === firstKey ? secondKey : firstKey;
+    const currentChanged = values[changedKey];
+    const currentOther = values[otherKey];
+    const requestedShift = nextValue - currentChanged;
+    const minShift = Math.max(mins[changedKey] - currentChanged, mins[otherKey] - currentOther);
+    const maxShift = Math.min(maxs[changedKey] - currentChanged, maxs[otherKey] - currentOther);
+    const appliedShift = Math.min(Math.max(requestedShift, minShift), maxShift);
+    return {
+        [changedKey]: currentChanged + appliedShift,
+        [otherKey]: currentOther + appliedShift,
+    };
+}

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/data/cache.d.ts

@@ -0,0 +1 @@
+export declare function loadFromCache(url: string): Promise<ArrayBuffer | undefined>;

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/data/cache.js

@@ -0,0 +1,17 @@
+const cachePromise = caches.open("sound-files");
+export async function loadFromCache(url) {
+    const startTime = performance.now();
+    const cache = await cachePromise;
+    const response = await cache.match(url);
+    if (response) {
+        console.log(`[cache] Loaded ${url} from CacheStorage in ${(performance.now() - startTime).toFixed(0)}ms`);
+        return response.arrayBuffer();
+    }
+    const fetched = await fetch(url);
+    if (fetched.ok) {
+        cache.put(url, fetched.clone()).catch(() => { });
+        console.log(`[cache] Loaded ${url} from network in ${(performance.now() - startTime).toFixed(0)}ms`);
+        return fetched.arrayBuffer();
+    }
+    return undefined;
+}

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/data/fileStore.d.ts

@@ -0,0 +1,6 @@
+export interface StoredFile {
+    name: string;
+    arrayBuffer: ArrayBuffer;
+}
+export declare function saveUploadedFile(name: string, arrayBuffer: ArrayBuffer): Promise<void>;
+export declare function loadUploadedFile(): Promise<StoredFile | null>;

package/examples/react/node_modules/@jadujoel/web-audio-clip-node/dist/data/fileStore.js

@@ -0,0 +1,39 @@
+const DB_NAME = "clip-audio-store";
+const DB_VERSION = 1;
+const STORE_NAME = "files";
+const LAST_FILE_KEY = "last-uploaded";
+function openDB() {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME, DB_VERSION);
+        request.onupgradeneeded = () => {
+            const db = request.result;
+            if (!db.objectStoreNames.contains(STORE_NAME)) {
+                db.createObjectStore(STORE_NAME);
+            }
+        };
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+    });
+}
+function tx(db, mode) {
+    return db.transaction(STORE_NAME, mode).objectStore(STORE_NAME);
+}
+export async function saveUploadedFile(name, arrayBuffer) {
+    const db = await openDB();
+    const store = tx(db, "readwrite");
+    const data = { name, arrayBuffer };
+    await new Promise((resolve, reject) => {
+        const req = store.put(data, LAST_FILE_KEY);
+        req.onsuccess = () => resolve();
+        req.onerror = () => reject(req.error);
+    });
+}
+export async function loadUploadedFile() {
+    const db = await openDB();
+    const store = tx(db, "readonly");
+    return new Promise((resolve, reject) => {
+        const req = store.get(LAST_FILE_KEY);
+        req.onsuccess = () => resolve(req.result ?? null);
+        req.onerror = () => reject(req.error);
+    });
+}