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

package/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);
+    });
+}

package/dist/hooks/useClipNode.js

@@ -0,0 +1,338 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ClipNode } from "../audio/ClipNode";
+import { float32ArrayFromAudioBuffer, linFromDb } from "../audio/utils";
+import { getProcessorModuleUrl } from "../audio/workletUrl";
+import { SAMPLE_RATE } from "../controls/controlDefs";
+import { loadFromCache } from "../data/cache";
+import { loadUploadedFile, saveUploadedFile } from "../data/fileStore";
+function applyValue(node, key, value) {
+    switch (key) {
+        case "playhead":
+            node.playhead = value;
+            break;
+        case "offset":
+            node.offset = value;
+            break;
+        case "duration":
+            node.duration = value;
+            break;
+        case "loopStart":
+            node.loopStart = value;
+            break;
+        case "loopEnd":
+            node.loopEnd = value;
+            break;
+        case "loopCrossfade":
+            node.loopCrossfade = value;
+            break;
+        case "fadeIn":
+            node.fadeIn = value;
+            break;
+        case "fadeOut":
+            node.fadeOut = value;
+            break;
+        case "playbackRate":
+            node.playbackRate.value = value;
+            break;
+        case "detune":
+            node.detune.value = value;
+            break;
+        case "gain":
+            node.gain.value = linFromDb(value);
+            break;
+        case "pan":
+            node.pan.value = value;
+            break;
+        case "lowpass":
+            node.lowpass.value = value;
+            break;
+        case "highpass":
+            node.highpass.value = value;
+            break;
+        case "startDelay":
+        case "stopDelay":
+            break;
+    }
+}
+function applyToggle(node, key, on) {
+    switch (key) {
+        case "fadeIn":
+            node.toggleFadeIn(on);
+            break;
+        case "fadeOut":
+            node.toggleFadeOut(on);
+            break;
+        case "loopCrossfade":
+            node.toggleLoopCrossfade(on);
+            break;
+        case "loopStart":
+            node.toggleLoopStart(on);
+            break;
+        case "loopEnd":
+            node.toggleLoopEnd(on);
+            break;
+        case "playbackRate":
+            node.togglePlaybackRate(on);
+            break;
+        case "detune":
+            node.toggleDetune(on);
+            break;
+        case "gain":
+            node.toggleGain(on);
+            break;
+        case "pan":
+            node.togglePan(on);
+            break;
+        case "lowpass":
+            node.toggleLowpass(on);
+            break;
+        case "highpass":
+            node.toggleHighpass(on);
+            break;
+        case "offset":
+            node.offset = on ? node.offset : 0;
+            break;
+        case "duration":
+            node.duration = on ? node.duration : -1;
+            break;
+        case "startDelay":
+        case "stopDelay":
+            // These are applied at start/stop time; toggle state is handled in the hook
+            break;
+    }
+}
+export function useClipNode({ values, enabled, loop, setValue, }) {
+    const [nodeState, setNodeState] = useState("initial");
+    const [statusMessage, setStatusMessage] = useState(null);
+    const [soundName, setSoundName] = useState(null);
+    const [audioDuration, setAudioDuration] = useState(null);
+    const [infoCurrentTime, setInfoCurrentTime] = useState("0");
+    const [infoCurrentFrame, setInfoCurrentFrame] = useState("0");
+    const [infoTimesLooped, setInfoTimesLooped] = useState("0");
+    const [infoLatency, setInfoLatency] = useState("unknown");
+    const [infoTimeTaken, setInfoTimeTaken] = useState("unknown");
+    const ctxRef = useRef(null);
+    const nodeRef = useRef(null);
+    const bufferRef = useRef(null);
+    const frameRef = useRef(null);
+    // RAF loop for display info
+    useEffect(() => {
+        let id;
+        const tick = () => {
+            const f = frameRef.current;
+            if (f) {
+                const [ct, cf, ph, tt] = f;
+                setInfoCurrentTime(ct.toPrecision(4));
+                setInfoCurrentFrame(cf.toString());
+                setInfoTimeTaken(tt.toFixed(4));
+                setValue("playhead", ph);
+            }
+            id = requestAnimationFrame(tick);
+        };
+        id = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(id);
+    }, [setValue]);
+    const ensureContext = useCallback(async () => {
+        if (ctxRef.current)
+            return ctxRef.current;
+        const ctx = new AudioContext({ sampleRate: SAMPLE_RATE });
+        await ctx.audioWorklet.addModule(getProcessorModuleUrl());
+        ctxRef.current = ctx;
+        return ctx;
+    }, []);
+    const decodeAudio = useCallback(async (source) => {
+        const ctx = await ensureContext();
+        let arrayBuffer;
+        if (typeof source === "string") {
+            arrayBuffer = await loadFromCache(source);
+        }
+        else {
+            arrayBuffer = source;
+        }
+        if (!arrayBuffer)
+            throw new Error("Could not load audio data");
+        const decoded = await ctx.decodeAudioData(arrayBuffer);
+        bufferRef.current = decoded;
+        setAudioDuration(decoded.duration);
+        return decoded;
+    }, [ensureContext]);
+    const createNode = useCallback((ctx, buffer) => {
+        const node = new ClipNode(ctx, {
+            processorOptions: {
+                buffer: float32ArrayFromAudioBuffer(buffer),
+                loopStart: values.loopStart,
+                loopEnd: values.loopEnd,
+                duration: values.duration,
+                offset: values.offset,
+                fadeInDuration: values.fadeIn,
+                fadeOutDuration: values.fadeOut,
+                loop,
+                enableDetune: enabled.detune,
+                enableFadeIn: enabled.fadeIn,
+                enableFadeOut: enabled.fadeOut,
+                enableGain: enabled.gain,
+                enableHighpass: enabled.highpass,
+                enableLowpass: enabled.lowpass,
+                enablePan: enabled.pan,
+                enablePlaybackRate: enabled.playbackRate,
+                enableLoopStart: enabled.loopStart,
+                enableLoopEnd: enabled.loopEnd,
+                enableLoopCrossfade: enabled.loopCrossfade,
+            },
+        });
+        node.connect(ctx.destination);
+        node.onstatechange = (s) => setNodeState(s);
+        node.onlooped = () => setInfoTimesLooped(node.timesLooped.toString());
+        node.onframe = (data) => {
+            frameRef.current = data;
+        };
+        node.addEventListener("processorerror", (e) => console.error("processor error", e));
+        node.loop = loop;
+        node.playbackRate.value = values.playbackRate;
+        node.detune.value = values.detune;
+        node.lowpass.value = values.lowpass;
+        node.highpass.value = values.highpass;
+        node.gain.value = linFromDb(values.gain);
+        node.pan.value = values.pan;
+        setInfoLatency(ctx.outputLatency != null
+            ? `base: ${Math.round(ctx.baseLatency * ctx.sampleRate)} | output: ${Math.round(ctx.outputLatency * ctx.sampleRate)}`
+            : "unknown");
+        return node;
+    }, [loop, values, enabled]);
+    const start = useCallback(async () => {
+        const ctx = await ensureContext();
+        const buffer = bufferRef.current;
+        if (!buffer) {
+            setStatusMessage("Load a sound file first.");
+            return;
+        }
+        setStatusMessage(null);
+        if (!nodeRef.current) {
+            nodeRef.current = createNode(ctx, buffer);
+        }
+        ctx.resume();
+        const node = nodeRef.current;
+        const delay = enabled.startDelay ? values.startDelay : 0;
+        const offset = enabled.offset ? values.offset : 0;
+        const duration = enabled.duration ? values.duration : -1;
+        node.start(ctx.currentTime + delay, offset, duration);
+    }, [
+        ensureContext,
+        createNode,
+        values.startDelay,
+        values.offset,
+        values.duration,
+        enabled.startDelay,
+        enabled.offset,
+        enabled.duration,
+    ]);
+    const stop = useCallback(() => {
+        const ctx = ctxRef.current;
+        const node = nodeRef.current;
+        if (!ctx || !node)
+            return;
+        const delay = enabled.stopDelay ? values.stopDelay : 0;
+        node.stop(ctx.currentTime + delay);
+    }, [values.stopDelay, enabled.stopDelay]);
+    const pause = useCallback(() => {
+        const ctx = ctxRef.current;
+        const node = nodeRef.current;
+        if (!ctx || !node)
+            return;
+        const delay = enabled.stopDelay ? values.stopDelay : 0;
+        node.pause(ctx.currentTime + delay);
+    }, [values.stopDelay, enabled.stopDelay]);
+    const resume = useCallback(() => {
+        const ctx = ctxRef.current;
+        const node = nodeRef.current;
+        if (!ctx || !node)
+            return;
+        const delay = enabled.startDelay ? values.startDelay : 0;
+        node.resume(ctx.currentTime + delay);
+    }, [values.startDelay, enabled.startDelay]);
+    const dispose = useCallback(() => {
+        nodeRef.current?.dispose();
+        nodeRef.current = null;
+        setNodeState("disposed");
+    }, []);
+    const logState = useCallback(() => {
+        nodeRef.current?.logState();
+    }, []);
+    const loadFromArrayBuffer = useCallback(async (ab, name) => {
+        const buf = await decodeAudio(ab);
+        bufferRef.current = buf;
+        setSoundName(name);
+        setValue("playhead", 0);
+    }, [decodeAudio, setValue]);
+    // Auto-load last uploaded file from IndexedDB on mount
+    useEffect(() => {
+        loadUploadedFile()
+            .then((stored) => {
+            if (stored) {
+                loadFromArrayBuffer(stored.arrayBuffer, stored.name).catch((err) => console.error("[fileStore] Failed to restore file:", err));
+            }
+        })
+            .catch((err) => console.error("[fileStore] Failed to load from IndexedDB:", err));
+    }, [loadFromArrayBuffer]);
+    const loadSound = useCallback(() => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "audio/*";
+        input.onchange = async () => {
+            const file = input.files?.[0];
+            if (!file)
+                return;
+            const ab = await file.arrayBuffer();
+            const copy = ab.slice(0);
+            await loadFromArrayBuffer(ab, file.name);
+            saveUploadedFile(file.name, copy).catch((err) => console.error("[fileStore] Failed to save to IndexedDB:", err));
+        };
+        input.click();
+    }, [loadFromArrayBuffer]);
+    const applyValueToNode = useCallback((key, val) => {
+        setValue(key, val);
+        const node = nodeRef.current;
+        if (node)
+            applyValue(node, key, val);
+    }, [setValue]);
+    const applyToggleToNode = useCallback((key, on) => {
+        const node = nodeRef.current;
+        if (node)
+            applyToggle(node, key, on);
+    }, []);
+    const applyValuesToNode = useCallback((valuesToApply) => {
+        const node = nodeRef.current;
+        if (!node)
+            return;
+        for (const [key, value] of Object.entries(valuesToApply)) {
+            applyValue(node, key, value);
+        }
+    }, []);
+    const setLoopOnNode = useCallback((checked) => {
+        const node = nodeRef.current;
+        if (node)
+            node.loop = checked;
+    }, []);
+    return {
+        nodeState,
+        statusMessage,
+        soundName,
+        audioDuration,
+        infoCurrentTime,
+        infoCurrentFrame,
+        infoTimesLooped,
+        infoLatency,
+        infoTimeTaken,
+        start,
+        stop,
+        pause,
+        resume,
+        dispose,
+        logState,
+        loadSound,
+        applyValue: applyValueToNode,
+        applyValues: applyValuesToNode,
+        applyToggle: applyToggleToNode,
+        setLoopOnNode,
+    };
+}

package/dist/lib-react.js

@@ -1,19 +1,17 @@
-export {
-  useClipNode,
-  useClipControls,
-  TransportButtons,
-  SnappableSlider,
-  PlayheadSlider,
-  PlaybackRateControl,
-  PanControl,
-  GainControl,
-  FilterControl,
-  DisplayPanel,
-  DetuneControl,
-  ControlSection,
-  ContextMenu,
-  AudioControl
-};
-
-//# debugId=030B87E04A0B95F064756E2164756E21
-//# sourceMappingURL=lib-react.js.map
+// Store
+// Components
+export { AudioControl } from "./components/AudioControl";
+export { ContextMenu } from "./components/ContextMenu";
+export { ControlSection } from "./components/ControlSection";
+export { DetuneControl } from "./components/DetuneControl";
+export { DisplayPanel } from "./components/DisplayPanel";
+export { FilterControl } from "./components/FilterControl";
+export { GainControl } from "./components/GainControl";
+export { PanControl } from "./components/PanControl";
+export { PlaybackRateControl } from "./components/PlaybackRateControl";
+export { PlayheadSlider } from "./components/PlayheadSlider";
+export { SnappableSlider } from "./components/SnappableSlider";
+export { TransportButtons } from "./components/TransportButtons";
+// Hooks
+export { useClipNode } from "./hooks/useClipNode";
+export { useClipControls } from "./store/clipStore";

package/dist/lib.js

@@ -1,44 +1,16 @@
-export {
-  transportLinkedControlPairs,
-  saveUploadedFile,
-  remapTempoRelativeValue,
-  processorCode,
-  processBlock,
-  presets,
-  paramDefs,
-  loopLinkedControlPairs,
-  loopControlDefs,
-  loadUploadedFile,
-  loadFromCache,
-  linFromDb,
-  isTempoRelativeSnap,
-  handleProcessorMessage,
-  getTempoSnapInterval,
-  getSnappedValue,
-  getProperties,
-  getProcessorModuleUrl,
-  getProcessorCdnUrl,
-  getProcessorBlobUrl,
-  getLinkedControlUpdates,
-  getLinkedControlPairForControl,
-  getActiveLinkedControls,
-  generateSnapPoints,
-  formatValueText,
-  formatTickLabel,
-  float32ArrayFromAudioBuffer,
-  dbFromLin,
-  createFilterState,
-  controlDefs,
-  buildLinkedControlPairDefaults,
-  buildDefaults,
-  audioBufferFromFloat32Array,
-  allDefs,
-  State,
-  SAMPLE_RATE,
-  SAMPLE_BLOCK_SIZE,
-  DEFAULT_TEMPO,
-  ClipNode
-};
-
-//# debugId=9B64F311A83C9C3D64756E2164756E21
-//# sourceMappingURL=lib.js.map
+// Core audio
+export { ClipNode } from "./audio/ClipNode";
+export { processorCode } from "./audio/processor-code";
+// Processor kernel (for advanced / testing)
+export { createFilterState, getProperties, handleProcessorMessage, processBlock, SAMPLE_BLOCK_SIZE, } from "./audio/processor-kernel";
+export { State } from "./audio/types";
+// Utils
+export { audioBufferFromFloat32Array, dbFromLin, float32ArrayFromAudioBuffer, generateSnapPoints, getSnappedValue, getTempoSnapInterval, isTempoRelativeSnap, linFromDb, presets, remapTempoRelativeValue, } from "./audio/utils";
+export { getProcessorBlobUrl, getProcessorCdnUrl, getProcessorModuleUrl, } from "./audio/workletUrl";
+// Controls
+export { allDefs, buildDefaults, controlDefs, DEFAULT_TEMPO, loopControlDefs, paramDefs, SAMPLE_RATE, } from "./controls/controlDefs";
+export { formatTickLabel, formatValueText } from "./controls/formatValueText";
+export { buildLinkedControlPairDefaults, getActiveLinkedControls, getLinkedControlPairForControl, getLinkedControlUpdates, loopLinkedControlPairs, transportLinkedControlPairs, } from "./controls/linkedControlPairs";
+// Data
+export { loadFromCache } from "./data/cache";
+export { loadUploadedFile, saveUploadedFile } from "./data/fileStore";

package/dist/store/clipStore.js

@@ -0,0 +1,71 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { buildDefaults, DEFAULT_TEMPO, } from "../controls/controlDefs";
+import { buildLinkedControlPairDefaults, } from "../controls/linkedControlPairs";
+const STORAGE_KEY = "clip-node-state";
+function searchParamsIncludes(key) {
+    return (typeof window !== "undefined" &&
+        new URLSearchParams(window.location.search).has(key));
+}
+const defaults = buildDefaults();
+const linkedPairDefaults = buildLinkedControlPairDefaults();
+export const useClipControls = create()(searchParamsIncludes("disable-state")
+    ? (set) => ({
+        ...defaults,
+        linkedPairs: linkedPairDefaults,
+        loop: false,
+        tempo: DEFAULT_TEMPO,
+        setValue: (key, val) => set((s) => ({ values: { ...s.values, [key]: val } })),
+        setValuesPartial: (values) => set((s) => ({ values: { ...s.values, ...values } })),
+        setSnap: (key, snap) => set((s) => ({ snaps: { ...s.snaps, [key]: snap } })),
+        setSnapsPartial: (snaps) => set((s) => ({ snaps: { ...s.snaps, ...snaps } })),
+        setEnabled: (key, on) => set((s) => ({ enabled: { ...s.enabled, [key]: on } })),
+        setEnabledPartial: (enabled) => set((s) => ({ enabled: { ...s.enabled, ...enabled } })),
+        setMin: (key, val) => set((s) => ({ mins: { ...s.mins, [key]: val } })),
+        setMinsPartial: (mins) => set((s) => ({ mins: { ...s.mins, ...mins } })),
+        setMax: (key, val) => set((s) => ({ maxs: { ...s.maxs, [key]: val } })),
+        setMaxsPartial: (maxs) => set((s) => ({ maxs: { ...s.maxs, ...maxs } })),
+        setMaxLocked: (key, locked) => set((s) => ({ maxLocked: { ...s.maxLocked, [key]: locked } })),
+        setMaxLockedPartial: (maxLocked) => set((s) => ({ maxLocked: { ...s.maxLocked, ...maxLocked } })),
+        setLinkedPair: (key, on) => set((s) => ({ linkedPairs: { ...s.linkedPairs, [key]: on } })),
+        setLoop: (checked) => set({ loop: checked }),
+        setTempo: (tempo) => set({ tempo }),
+        setTempoAndValues: (tempo, values) => set((s) => ({ tempo, values: { ...s.values, ...values } })),
+        setValues: (values) => set({ values }),
+    })
+    : persist((set) => ({
+        ...defaults,
+        linkedPairs: linkedPairDefaults,
+        loop: false,
+        tempo: DEFAULT_TEMPO,
+        setValue: (key, val) => set((s) => ({ values: { ...s.values, [key]: val } })),
+        setValuesPartial: (values) => set((s) => ({ values: { ...s.values, ...values } })),
+        setSnap: (key, snap) => set((s) => ({ snaps: { ...s.snaps, [key]: snap } })),
+        setSnapsPartial: (snaps) => set((s) => ({ snaps: { ...s.snaps, ...snaps } })),
+        setEnabled: (key, on) => set((s) => ({ enabled: { ...s.enabled, [key]: on } })),
+        setEnabledPartial: (enabled) => set((s) => ({ enabled: { ...s.enabled, ...enabled } })),
+        setMin: (key, val) => set((s) => ({ mins: { ...s.mins, [key]: val } })),
+        setMinsPartial: (mins) => set((s) => ({ mins: { ...s.mins, ...mins } })),
+        setMax: (key, val) => set((s) => ({ maxs: { ...s.maxs, [key]: val } })),
+        setMaxsPartial: (maxs) => set((s) => ({ maxs: { ...s.maxs, ...maxs } })),
+        setMaxLocked: (key, locked) => set((s) => ({ maxLocked: { ...s.maxLocked, [key]: locked } })),
+        setMaxLockedPartial: (maxLocked) => set((s) => ({ maxLocked: { ...s.maxLocked, ...maxLocked } })),
+        setLinkedPair: (key, on) => set((s) => ({ linkedPairs: { ...s.linkedPairs, [key]: on } })),
+        setLoop: (checked) => set({ loop: checked }),
+        setTempo: (tempo) => set({ tempo }),
+        setTempoAndValues: (tempo, values) => set((s) => ({ tempo, values: { ...s.values, ...values } })),
+        setValues: (values) => set({ values }),
+    }), {
+        name: STORAGE_KEY,
+        partialize: (state) => ({
+            values: state.values,
+            snaps: state.snaps,
+            enabled: state.enabled,
+            mins: state.mins,
+            maxs: state.maxs,
+            maxLocked: state.maxLocked,
+            linkedPairs: state.linkedPairs,
+            loop: state.loop,
+            tempo: state.tempo,
+        }),
+    }));

package/examples/README.md

@@ -0,0 +1,10 @@
+# Examples
+
+Each subdirectory demonstrates a different way to use `@jadujoel/web-audio-clip-node`.
+
+| Example | Description | Build step? |
+|---------|-------------|-------------|
+| [cdn-vanilla](./cdn-vanilla/) | Pure HTML + `<script type="module">` via jsDelivr CDN | No |
+| [esm-bundler](./esm-bundler/) | Vite + TypeScript with `npm install` | Yes |
+| [react](./react/) | Vite + React using the built-in hooks & components | Yes |
+| [self-hosted](./self-hosted/) | Vite + self-hosted `processor.js` via `getProcessorModuleUrl()` | Yes |

package/examples/cdn-vanilla/README.md

@@ -0,0 +1,13 @@
+# CDN Vanilla Example
+
+Zero-install example — open `index.html` directly in a browser (or use any static file server).
+
+Everything is loaded from [jsDelivr](https://www.jsdelivr.com/).
+
+```sh
+# Option A: just open the file
+open index.html
+
+# Option B: serve it
+npx serve .
+```

package/examples/cdn-vanilla/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ClipNode – CDN Vanilla Example</title>
+  <style>
+    body { font-family: system-ui, sans-serif; max-width: 480px; margin: 2rem auto; }
+    button { font-size: 1rem; padding: 0.5rem 1rem; margin: 0.25rem; cursor: pointer; }
+  </style>
+</head>
+<body>
+  <h1>ClipNode – CDN</h1>
+  <p>Loads the library directly from jsDelivr. No bundler, no npm.</p>
+  <button id="play" type="button">▶ Play</button>
+  <button id="stop" type="button">■ Stop</button>
+  <p id="status">Click Play to start (loads a sample tone).</p>
+
+  <script type="module">
+    // Import the core library and processor from the CDN
+    import { ClipNode, getProcessorCdnUrl } from "https://cdn.jsdelivr.net/npm/@jadujoel/web-audio-clip-node@0.1.1/dist/lib.js";
+
+    const status = document.getElementById("status");
+    let ctx;
+    let clip;
+
+    // Generate a simple sine-wave AudioBuffer for demo purposes
+    function createToneBuffer(audioCtx, freq = 440, duration = 2) {
+      const length = audioCtx.sampleRate * duration;
+      const buf = audioCtx.createBuffer(1, length, audioCtx.sampleRate);
+      const data = buf.getChannelData(0);
+      for (let i = 0; i < length; i++) {
+        data[i] = Math.sin(2 * Math.PI * freq * i / audioCtx.sampleRate);
+      }
+      return buf;
+    }
+
+    document.getElementById("play").addEventListener("click", async () => {
+      if (!ctx) {
+        ctx = new AudioContext();
+        const processorUrl = getProcessorCdnUrl("0.1.1");
+        await ctx.audioWorklet.addModule(processorUrl);
+        clip = new ClipNode(ctx, {
+          processorOptions: { sampleRate: ctx.sampleRate },
+        });
+        clip.connect(ctx.destination);
+        clip.buffer = createToneBuffer(ctx);
+      }
+      clip.start();
+      status.textContent = "Playing…";
+    });
+
+    document.getElementById("stop").addEventListener("click", () => {
+      if (clip) {
+        clip.stop();
+        status.textContent = "Stopped.";
+      }
+    });
+  </script>
+</body>
+</html>

package/examples/esm-bundler/README.md

@@ -0,0 +1,8 @@
+# ESM Bundler Example (Vite + TypeScript)
+
+Uses `npm install` + Vite. The processor is loaded via `getProcessorBlobUrl()` (embedded, zero-config).
+
+```sh
+npm install
+npm run dev
+```

package/examples/esm-bundler/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ClipNode – ESM Bundler Example</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./src/main.ts"></script>
+</body>
+</html>

package/examples/esm-bundler/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "esm-bundler-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@jadujoel/web-audio-clip-node": "^0.1.1"
+  },
+  "devDependencies": {
+    "vite": "^6"
+  }
+}