@jadujoel/web-audio-clip-node 0.1.0 → 0.1.2

package/dist/components/PanControl.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useId, useRef, useState } from "react";
+import { presets } from "../audio/utils";
+import { SnappableSlider } from "./SnappableSlider";
+function formatPan(value) {
+    if (Math.abs(value) < 0.005)
+        return "C";
+    const pct = Math.round(Math.abs(value) * 100);
+    return value < 0 ? `L${pct}` : `R${pct}`;
+}
+function PanControlInner({ value, defaultValue, enabled, onChange, onToggle, }) {
+    const preset = presets.pan;
+    const min = preset.min ?? -1;
+    const max = preset.max ?? 1;
+    const labelId = useId();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editText, setEditText] = useState("");
+    const inputRef = useRef(null);
+    const displayValue = formatPan(value);
+    const handleChange = useCallback((v) => {
+        if (!enabled)
+            return;
+        onChange(v);
+    }, [enabled, onChange]);
+    const startEditing = useCallback(() => {
+        setEditText(String(value));
+        setIsEditing(true);
+        queueMicrotask(() => inputRef.current?.select());
+    }, [value]);
+    const commitEdit = useCallback(() => {
+        setIsEditing(false);
+        const parsed = Number.parseFloat(editText);
+        if (Number.isFinite(parsed)) {
+            onChange(Math.min(Math.max(parsed, min), max));
+        }
+    }, [editText, min, max, onChange]);
+    const handleEditKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            commitEdit();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            setIsEditing(false);
+        }
+    }, [commitEdit]);
+    const disabled = !enabled;
+    return (_jsxs("div", { className: `audio-control${disabled ? " audio-control--disabled" : ""}`, title: "-1 full left, 1 full right.", children: [_jsx("input", { type: "checkbox", className: "control-toggle", checked: enabled, onChange: (e) => onToggle(e.target.checked) }), _jsx("span", { className: "control-label", id: labelId, children: "Pan" }), _jsx(SnappableSlider, { min: min, max: max, value: value, skew: preset.skew ?? 1, defaultValue: defaultValue, ticks: preset.ticks ?? [], disabled: disabled, labelId: labelId, valueText: displayValue, onChange: handleChange }), isEditing ? (_jsx("input", { ref: inputRef, type: "text", className: "control-output control-output--editing", value: editText, onChange: (e) => setEditText(e.target.value), onBlur: commitEdit, onKeyDown: handleEditKeyDown })) : (_jsx("button", { type: "button", className: "control-output", onClick: startEditing, children: displayValue }))] }));
+}
+export const PanControl = memo(PanControlInner);

package/dist/components/PlaybackRateControl.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useId, useRef, useState } from "react";
+import { presets } from "../audio/utils";
+import { SnappableSlider } from "./SnappableSlider";
+function PlaybackRateControlInner({ value, defaultValue, enabled, onChange, onToggle, }) {
+    const preset = presets.playbackRate;
+    const min = preset.min ?? -4;
+    const max = preset.max ?? 4;
+    const labelId = useId();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editText, setEditText] = useState("");
+    const inputRef = useRef(null);
+    const displayValue = `${value.toFixed(2)}x`;
+    const handleChange = useCallback((v) => {
+        if (!enabled)
+            return;
+        onChange(v);
+    }, [enabled, onChange]);
+    const startEditing = useCallback(() => {
+        setEditText(String(value));
+        setIsEditing(true);
+        queueMicrotask(() => inputRef.current?.select());
+    }, [value]);
+    const commitEdit = useCallback(() => {
+        setIsEditing(false);
+        const parsed = Number.parseFloat(editText);
+        if (Number.isFinite(parsed)) {
+            onChange(Math.min(Math.max(parsed, min), max));
+        }
+    }, [editText, min, max, onChange]);
+    const handleEditKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            commitEdit();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            setIsEditing(false);
+        }
+    }, [commitEdit]);
+    const disabled = !enabled;
+    return (_jsxs("div", { className: `audio-control${disabled ? " audio-control--disabled" : ""}`, title: "Playback speed. Negative for reverse.", children: [_jsx("input", { type: "checkbox", className: "control-toggle", checked: enabled, onChange: (e) => onToggle(e.target.checked) }), _jsx("span", { className: "control-label", id: labelId, children: "Rate" }), _jsx(SnappableSlider, { min: min, max: max, value: value, skew: preset.skew ?? 1, defaultValue: defaultValue, enableSnap: true, snaps: preset.snaps ?? [], ticks: preset.ticks ?? [], disabled: disabled, labelId: labelId, valueText: displayValue, onChange: handleChange }), isEditing ? (_jsx("input", { ref: inputRef, type: "text", className: "control-output control-output--editing", value: editText, onChange: (e) => setEditText(e.target.value), onBlur: commitEdit, onKeyDown: handleEditKeyDown })) : (_jsx("button", { type: "button", className: "control-output", onClick: startEditing, children: displayValue }))] }));
+}
+export const PlaybackRateControl = memo(PlaybackRateControlInner);

package/dist/components/PlayheadSlider.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useId } from "react";
+import { SAMPLE_RATE } from "../controls/controlDefs";
+import { SnappableSlider } from "./SnappableSlider";
+function formatTime(seconds) {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toFixed(2).padStart(5, "0")}`;
+}
+function PlayheadSliderInner({ value, audioDuration, disabled = false, onChange, }) {
+    const labelId = useId();
+    const maxSamples = audioDuration != null ? audioDuration * SAMPLE_RATE : 0;
+    const currentSeconds = value / SAMPLE_RATE;
+    const durationSeconds = audioDuration ?? 0;
+    const handleChange = useCallback((v) => {
+        onChange(Math.floor(v));
+    }, [onChange]);
+    return (_jsxs("div", { className: "playhead-slider", children: [_jsx("span", { className: "playhead-label", id: labelId, children: "Playhead" }), _jsx(SnappableSlider, { min: 0, max: maxSamples, value: value, disabled: disabled || maxSamples === 0, labelId: labelId, valueText: formatTime(currentSeconds), onChange: handleChange }), _jsxs("span", { className: "playhead-time", children: [formatTime(currentSeconds), " / ", formatTime(durationSeconds)] })] }));
+}
+export const PlayheadSlider = memo(PlayheadSliderInner);

package/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/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/dist/controls/controlDefs.js

@@ -0,0 +1,211 @@
+// ---------------------------------------------------------------------------
+// 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,
+        title: "Delay before stopping (seconds).",
+    },
+    {
+        key: "fadeIn",
+        label: "FadeIn",
+        min: 0,
+        max: 60,
+        defaultValue: 0,
+        snap: "beat",
+        hasSnap: true,
+        hasToggle: true,
+        title: "Fade-in duration (seconds).",
+    },
+    {
+        key: "fadeOut",
+        label: "FadeOut",
+        min: 0,
+        max: 60,
+        defaultValue: 0,
+        snap: "beat",
+        hasSnap: true,
+        hasToggle: 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/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/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/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;
+}