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

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/dist/workers/worker-utils.d.ts

@@ -0,0 +1,11 @@
+export declare function concat(a: Uint8Array, b: Uint8Array): Uint8Array;
+interface EstimateTotalSamplesInput {
+    totalBytes: number | null;
+    bitrate: number | null;
+    sourceSampleRate: number;
+    targetSampleRate: number;
+}
+export declare function estimateTotalSamplesFromContentLength({ totalBytes, bitrate, sourceSampleRate, targetSampleRate, }: EstimateTotalSamplesInput): number | null;
+export declare function resampleChannel(src: Float32Array, srcRate: number, dstRate: number): Float32Array;
+export declare function createThrottleStream(bytesPerSec: number): TransformStream<Uint8Array, Uint8Array>;
+export {};

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/dist/workers/worker-utils.js

@@ -0,0 +1,55 @@
+export function concat(a, b) {
+    const out = new Uint8Array(a.length + b.length);
+    out.set(a);
+    out.set(b, a.length);
+    return out;
+}
+const FALLBACK_BITRATE_BPS = 128_000;
+export function estimateTotalSamplesFromContentLength({ totalBytes, bitrate, sourceSampleRate, targetSampleRate, }) {
+    if (totalBytes == null || totalBytes <= 0)
+        return null;
+    if (sourceSampleRate <= 0 || targetSampleRate <= 0)
+        return null;
+    const safeBitrate = bitrate != null && Number.isFinite(bitrate) && bitrate > 0
+        ? bitrate
+        : FALLBACK_BITRATE_BPS;
+    const durationSeconds = (totalBytes * 8) / safeBitrate;
+    if (!Number.isFinite(durationSeconds) || durationSeconds <= 0)
+        return null;
+    const totalSamples = Math.ceil(durationSeconds * targetSampleRate);
+    return Number.isFinite(totalSamples) && totalSamples > 0
+        ? totalSamples
+        : null;
+}
+export function resampleChannel(src, srcRate, dstRate) {
+    if (srcRate === dstRate)
+        return src;
+    const ratio = srcRate / dstRate;
+    const dstLen = Math.round(src.length / ratio);
+    const dst = new Float32Array(dstLen);
+    for (let i = 0; i < dstLen; i++) {
+        const srcPos = i * ratio;
+        const idx = Math.floor(srcPos);
+        const frac = srcPos - idx;
+        const a = src[idx] ?? 0;
+        const b = src[Math.min(idx + 1, src.length - 1)] ?? 0;
+        dst[i] = a + frac * (b - a);
+    }
+    return dst;
+}
+export function createThrottleStream(bytesPerSec) {
+    let totalBytes = 0;
+    const startTime = performance.now();
+    return new TransformStream({
+        async transform(chunk, controller) {
+            totalBytes += chunk.length;
+            const elapsed = (performance.now() - startTime) / 1000;
+            const expected = totalBytes / bytesPerSec;
+            const delay = expected - elapsed;
+            if (delay > 0) {
+                await new Promise((resolve) => setTimeout(resolve, delay * 1000));
+            }
+            controller.enqueue(chunk);
+        },
+    });
+}

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/package.json

@@ -0,0 +1,104 @@
+{
+	"name": "@jadujoel/web-audio-clip-node",
+	"version": "0.1.8",
+	"type": "module",
+	"description": "Full-featured AudioWorklet clip player with playback rate, detune, gain, pan, filters, looping, fades, crossfade, and streaming buffer support. React components included.",
+	"keywords": [
+		"web-audio",
+		"audioworklet",
+		"audio",
+		"clip",
+		"player",
+		"dsp",
+		"react",
+		"worklet"
+	],
+	"author": "joel.lof@icloud.com",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/jadujoel/web-audio-clip-node.git"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/lib.d.ts",
+			"import": "./dist/lib.js"
+		},
+		"./bundle": "./dist/lib.bundle.js",
+		"./react": {
+			"types": "./dist/lib-react.d.ts",
+			"import": "./dist/lib-react.js"
+		},
+		"./streaming": {
+			"types": "./dist/streaming.d.ts",
+			"import": "./dist/streaming.js"
+		},
+		"./processor": "./dist/processor.js",
+		"./styles.css": {
+			"types": "./dist/styles.css.d.ts",
+			"default": "./dist/styles.css"
+		}
+	},
+	"main": "./dist/lib.js",
+	"types": "./dist/lib.d.ts",
+	"files": [
+		"dist",
+		"README.md",
+		"LICENSE",
+		"examples"
+	],
+	"sideEffects": false,
+	"scripts": {
+		"build": "bun build.ts",
+		"build:lib": "bun build.ts --lib",
+		"build:webpage": "bun build.ts --webpage",
+		"dev": "bun serve-webpage.ts",
+		"examples": "bun examples.ts",
+		"lint": "biome check",
+		"serve-webpage": "bun serve-webpage.ts",
+		"test": "bun test",
+		"test:e2e": "bunx playwright test",
+		"test:e2e:chromium": "bunx playwright test --project=chromium",
+		"test:e2e:firefox": "bunx playwright test --project=firefox",
+		"test:e2e:webkit": "bunx playwright test --project=webkit",
+		"typecheck": "tsc --noEmit",
+		"validate": "bun run build && bun run lint && bun run typecheck && bun test",
+		"prepublishOnly": "bun run build:lib"
+	},
+	"peerDependencies": {
+		"react": ">=18",
+		"react-dom": ">=18",
+		"zustand": ">=4"
+	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		},
+		"react-dom": {
+			"optional": true
+		},
+		"zustand": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.4.11",
+		"@playwright/test": "1.59.1",
+		"@testing-library/dom": "10.4.1",
+		"@testing-library/react": "16.3.2",
+		"@types/react": "19.2.14",
+		"@types/react-dom": "19.2.3",
+		"bun-types": "1.3.12",
+		"happy-dom": "20.8.9",
+		"isomorphic-web-audio-api": "1.0.2",
+		"react": "19.2.5",
+		"react-dom": "19.2.5",
+		"zustand": "5.0.12"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"patchedDependencies": {
+		"node-web-audio-api@1.0.9": "patches/node-web-audio-api@1.0.9.patch"
+	}
+}

package/examples/index.html

@@ -3,15 +3,260 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Examples</title>
+  <meta name="theme-color" content="#2b2b2b" />
+  <meta name="description" content="Examples for @jadujoel/web-audio-clip-node — a custom Audio Worklet Node for playing audio clips." />
+  <title>web-audio-clip-node — Examples</title>
+  <style>
+    :root {
+      --color-bg: #2b2b2b;
+      --color-surface: #3a3a3a;
+      --color-surface-hover: #424242;
+      --color-text: #e8e8e8;
+      --color-text-muted: #999;
+      --color-accent: #5b9bd5;
+      --color-accent-dim: rgba(91, 155, 213, 0.15);
+      --color-border: #555;
+      --color-border-subtle: #444;
+      --radius-sm: 6px;
+      --radius-md: 10px;
+      --radius-lg: 14px;
+    }
+
+    *, *::before, *::after { box-sizing: border-box; }
+
+    body {
+      background-color: var(--color-bg);
+      color: var(--color-text);
+      font-family: system-ui, -apple-system, sans-serif;
+      font-size: 16px;
+      margin: 0;
+      padding: 0;
+      min-height: 100dvh;
+      display: flex;
+      flex-direction: column;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    main {
+      max-width: 740px;
+      width: 100%;
+      margin: 0 auto;
+      padding: 48px 20px 64px;
+      flex: 1;
+    }
+
+    header {
+      margin-bottom: 40px;
+    }
+
+    .eyebrow {
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--color-accent);
+      margin: 0 0 10px;
+    }
+
+    h1 {
+      font-size: clamp(1.6rem, 5vw, 2.2rem);
+      font-weight: 700;
+      margin: 0 0 12px;
+      line-height: 1.2;
+      letter-spacing: -0.02em;
+    }
+
+    .subtitle {
+      color: var(--color-text-muted);
+      font-size: 1rem;
+      margin: 0;
+      line-height: 1.55;
+      max-width: 52ch;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 14px;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .card {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border-subtle);
+      border-radius: var(--radius-lg);
+      transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+    }
+
+    .card:hover {
+      background: var(--color-surface-hover);
+      border-color: var(--color-border);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+    }
+
+    .card a {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 20px 22px;
+      text-decoration: none;
+      color: inherit;
+      height: 100%;
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .card-icon {
+      font-size: 1.25rem;
+      line-height: 1;
+      flex-shrink: 0;
+    }
+
+    .card-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--color-text);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .card-title .arrow {
+      color: var(--color-accent);
+      opacity: 0;
+      transform: translateX(-4px);
+      transition: opacity 0.15s ease, transform 0.15s ease;
+      font-size: 0.9em;
+    }
+
+    .card:hover .card-title .arrow {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    .card-desc {
+      font-size: 0.875rem;
+      color: var(--color-text-muted);
+      line-height: 1.5;
+      margin: 0;
+    }
+
+    .badge {
+      font-size: 0.65rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      padding: 2px 7px;
+      border-radius: 999px;
+      background: var(--color-accent-dim);
+      color: var(--color-accent);
+      border: 1px solid rgba(91, 155, 213, 0.25);
+      white-space: nowrap;
+      align-self: flex-start;
+      margin-top: 2px;
+    }
+
+    footer {
+      text-align: center;
+      padding: 24px 20px;
+      color: var(--color-text-muted);
+      font-size: 0.8125rem;
+      border-top: 1px solid var(--color-border-subtle);
+    }
+
+    footer a {
+      color: var(--color-accent);
+      text-decoration: none;
+    }
+
+    footer a:hover {
+      text-decoration: underline;
+    }
+  </style>
 </head>
 <body>
-  <ul>
-    <li><a href="cdn-vanilla">Vanilla</a>
-    <li><a href="esm-bundler">ESM Bundler</a></li>
-    <li><a href="react">React</a></li>
-    <li><a href="self-hosted">Self Hosted</a></li>
-    <li><a href="streaming">Streaming</a></li>
-  </ul>
+  <main>
+    <header>
+      <p class="eyebrow">@jadujoel/web-audio-clip-node</p>
+      <h1>Examples</h1>
+      <p class="subtitle">Six integration paths for the custom Audio Worklet Node — from a zero-build CDN snippet to a full streaming React app.</p>
+    </header>
+
+    <ul class="grid">
+      <li class="card">
+        <a href="playground">
+          <div class="card-header">
+            <span class="card-icon">🎛️</span>
+            <span class="card-title">Playground<span class="arrow">→</span></span>
+          </div>
+          <p class="card-desc">Full-featured interactive demo showcasing all controls, parameters, linked pairs, tempo, and loop settings.</p>
+          <span class="badge">Bun · React</span>
+        </a>
+      </li>
+      <li class="card">
+        <a href="cdn-vanilla">
+          <div class="card-header">
+            <span class="card-icon">🌐</span>
+            <span class="card-title">CDN Vanilla<span class="arrow">→</span></span>
+          </div>
+          <p class="card-desc">Single HTML file. No build step — loads the jsDelivr bundle directly and plays a generated demo clip.</p>
+          <span class="badge">No build</span>
+        </a>
+      </li>
+      <li class="card">
+        <a href="esm-bundler">
+          <div class="card-header">
+            <span class="card-icon">📦</span>
+            <span class="card-title">ESM Bundler<span class="arrow">→</span></span>
+          </div>
+          <p class="card-desc">Bun + TypeScript importing the package as an ES module. Standard bundler workflow.</p>
+          <span class="badge">Bun</span>
+        </a>
+      </li>
+      <li class="card">
+        <a href="react">
+          <div class="card-header">
+            <span class="card-icon">⚛️</span>
+            <span class="card-title">React<span class="arrow">→</span></span>
+          </div>
+          <p class="card-desc">Bun + React using the built-in hooks and UI controls — the full interactive demo.</p>
+          <span class="badge">Bun · React</span>
+        </a>
+      </li>
+      <li class="card">
+        <a href="self-hosted">
+          <div class="card-header">
+            <span class="card-icon">🗄️</span>
+            <span class="card-title">Self-Hosted<span class="arrow">→</span></span>
+          </div>
+          <p class="card-desc">Serve your own <code>processor.js</code> via <code>getProcessorModuleUrl()</code> for full control over asset hosting.</p>
+          <span class="badge">Bun</span>
+        </a>
+      </li>
+      <li class="card">
+        <a href="streaming">
+          <div class="card-header">
+            <span class="card-icon">🎵</span>
+            <span class="card-title">Streaming<span class="arrow">→</span></span>
+          </div>
+          <p class="card-desc">Decode and buffer audio on-the-fly from a network stream via a dedicated Worker — minimal latency start.</p>
+          <span class="badge">Bun · Worker</span>
+        </a>
+      </li>
+    </ul>
+  </main>
+
+  <footer>
+    <a href="https://github.com/jadujoel/web-audio-clip-node" target="_blank" rel="noopener noreferrer">GitHub</a>
+    &nbsp;·&nbsp;
+    <a href="https://www.npmjs.com/package/@jadujoel/web-audio-clip-node" target="_blank" rel="noopener noreferrer">npm</a>
+  </footer>
 </body>
 </html>

package/examples/playground/README.md

@@ -0,0 +1,9 @@
+# Playground
+
+Full-featured interactive demo of all ClipNode controls, parameters, and features.
+Uses the published `@jadujoel/web-audio-clip-node` package.
+
+```bash
+bun install
+bun run dev
+```

package/examples/playground/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#404040">
+  <meta name="description" content="Full-featured interactive playground for @jadujoel/web-audio-clip-node.">
+  <title>ClipNode – Playground</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/main.tsx"></script>
+</body>
+</html>

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Joel Löf
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/README.md

@@ -0,0 +1,197 @@
+# @jadujoel/web-audio-clip-node
+
+AudioWorklet clip playback for the Web Audio API with pause/resume, reusable start, buffer hot-swap, loop callbacks, loop crossfade, real-time sample playhead control, and sample-accurate fades — without extra nodes.
+
+Live demo: https://jadujoel.github.io/web-audio-clip-node/
+
+## Why this library
+
+`AudioBufferSourceNode` is good at one-shot playback, but it does not give you some things clip-based apps usually need:
+
+- **Pause and resume** — `AudioBufferSourceNode` has no pause; you must stop and recreate
+- **Reusable start** — call `start()` again after `stop()` without creating a new node
+- **Buffer hot-swap** — assign a new `AudioBuffer` to a playing node and it switches seamlessly
+- **Loop callback** when the playhead wraps (`onlooped`)
+- **Loop crossfade** built into the source itself
+- **Real-time playhead** get/set access in samples
+- **Sample-accurate fade in / fade out** without wiring extra gain nodes around every source
+
+`ClipNode` is aimed at those missing pieces while staying small enough to drop into a plain browser app.
+
+## Try It Fast
+
+- Open the live playground: https://jadujoel.github.io/web-audio-clip-node/
+- Run all local examples from the repo root with `bun run examples`
+- Try the zero-install example in [examples/cdn-vanilla](examples/cdn-vanilla/)
+
+## Features
+
+- AudioWorklet-based clip playback with explicit transport control
+- **Pause / resume** and **reusable start** — no need to recreate the node after stopping
+- **Buffer hot-swap** — assign `clip.buffer` on a live node and it switches immediately
+- `onlooped` callback support so you can react when the clip wraps
+- Loop start, loop end, and loop crossfade on the node itself
+- Real-time playhead readback and sample-accurate seeking via `clip.playhead`
+- Sample-accurate fade in and fade out without external helper nodes
+- Playback rate from `-2` to `2`, including reverse playback
+- Detune, gain, stereo pan, highpass, and lowpass controls
+- Streaming buffer support for incremental writes
+- Optional React hooks and ready-made controls
+
+## Install
+
+```sh
+npm install @jadujoel/web-audio-clip-node
+```
+
+## Quick Start
+
+```ts
+import { ClipNode, getProcessorBlobUrl } from "@jadujoel/web-audio-clip-node";
+
+const ctx = new AudioContext();
+await ctx.audioWorklet.addModule(getProcessorBlobUrl());
+
+const clip = new ClipNode(ctx);
+clip.connect(ctx.destination);
+
+const response = await fetch("/audio/clip.opus");
+const buffer = await ctx.decodeAudioData(await response.arrayBuffer());
+
+clip.buffer = buffer;
+clip.loop = true;
+clip.loopStart = 0.5;
+clip.loopEnd = 1.75;
+clip.loopCrossfade = 0.04;
+clip.fadeIn = 0.01;
+clip.fadeOut = 0.08;
+clip.onlooped = () => {
+  console.log("looped at sample", clip.playhead);
+};
+
+clip.playbackRate.value = 1;
+clip.playhead = 24_000;
+clip.start();
+```
+
+`clip.playhead` is read and written in samples, so you can scrub to an exact frame position while playback is active.
+
+## React Quick Start
+
+```tsx
+import {
+  GainControl,
+  PlaybackRateControl,
+  TransportButtons,
+  useClipControls,
+  useClipNode,
+} from "@jadujoel/web-audio-clip-node/react";
+import "@jadujoel/web-audio-clip-node/styles.css";
+
+function Player() {
+  const controls = useClipControls();
+  const clip = useClipNode({
+    values: controls.values,
+    enabled: controls.enabled,
+    loop: controls.loop,
+    setValue: controls.setValue,
+  });
+
+  return (
+    <>
+      <TransportButtons
+        nodeState={clip.nodeState}
+        onStart={clip.start}
+        onStop={clip.stop}
+        onPause={clip.pause}
+        onResume={clip.resume}
+        onDispose={clip.dispose}
+        onLog={clip.logState}
+        onLoadSound={clip.loadSound}
+      />
+      <PlaybackRateControl
+        value={controls.values.playbackRate}
+        defaultValue={1}
+        enabled={controls.enabled.playbackRate}
+        onChange={(value) => {
+          controls.setValue("playbackRate", value);
+          clip.applyValue("playbackRate", value);
+        }}
+        onToggle={(enabled) => {
+          controls.setEnabled("playbackRate", enabled);
+          clip.applyToggle("playbackRate", enabled);
+        }}
+      />
+      <GainControl
+        value={controls.values.gain}
+        defaultValue={0}
+        enabled={controls.enabled.gain}
+        onChange={(value) => {
+          controls.setValue("gain", value);
+          clip.applyValue("gain", value);
+        }}
+        onToggle={(enabled) => {
+          controls.setEnabled("gain", enabled);
+          clip.applyToggle("gain", enabled);
+        }}
+      />
+    </>
+  );
+}
+```
+
+## CDN Usage
+
+Use the bundled entry point when you want a single browser import and load the processor from jsDelivr with `getProcessorCdnUrl()`.
+
+```html
+<script type="module">
+  import {
+    ClipNode,
+    getProcessorCdnUrl,
+  } from "https://cdn.jsdelivr.net/npm/@jadujoel/web-audio-clip-node@0.1.6/dist/lib.bundle.js";
+
+  const ctx = new AudioContext();
+  await ctx.audioWorklet.addModule(getProcessorCdnUrl("0.1.6"));
+
+  const clip = new ClipNode(ctx);
+  clip.connect(ctx.destination);
+</script>
+```
+
+The full no-bundler demo lives in [examples/cdn-vanilla](examples/cdn-vanilla/).
+
+That demo foregrounds the non-standard capabilities: pause/resume, restarting without recreating the node, buffer hot-swap, loop count callbacks, loop crossfade, and direct playhead seeking in samples.
+
+## Processor Loading Options
+
+| Method | Function | Use case |
+|--------|----------|----------|
+| Blob URL | `getProcessorBlobUrl()` | Default for package consumers who want zero setup |
+| CDN | `getProcessorCdnUrl("0.1.6")` | Plain browser usage via jsDelivr |
+| Self-hosted | `getProcessorModuleUrl(baseUrl)` | You serve `processor.js` from your own app |
+
+## Entry Points
+
+| Entry point | Import path | Contents |
+|-------------|-------------|----------|
+| Core | `@jadujoel/web-audio-clip-node` | `ClipNode`, types, utilities, controls, processor kernel |
+| Bundle | `@jadujoel/web-audio-clip-node/bundle` | Single-file ESM bundle for CDN or browser module usage |
+| React | `@jadujoel/web-audio-clip-node/react` | Store, hooks, and UI components |
+| Processor | `@jadujoel/web-audio-clip-node/processor` | Standalone worklet script |
+| Styles | `@jadujoel/web-audio-clip-node/styles.css` | CSS for the React components |
+
+## Examples
+
+The [examples](examples/) directory covers the main integration styles.
+
+| Example | Description | Build step? |
+|---------|-------------|-------------|
+| [cdn-vanilla](examples/cdn-vanilla/) | Single HTML file using the CDN bundle and processor URL | No |
+| [esm-bundler](examples/esm-bundler/) | Vite + TypeScript app importing the package directly | Yes |
+| [react](examples/react/) | Vite + React with the included hooks and controls | Yes |
+| [self-hosted](examples/self-hosted/) | Vite app serving `processor.js` locally via `getProcessorModuleUrl()` | Yes |
+
+## License
+
+MIT

package/examples/playground/node_modules/@jadujoel/web-audio-clip-node/dist/App.d.ts

@@ -0,0 +1,6 @@
+import { useClipNode } from "./hooks/useClipNode";
+interface AppProps {
+    useClipNodeImpl?: typeof useClipNode;
+}
+export declare function App({ useClipNodeImpl }?: AppProps): import("react/jsx-runtime").JSX.Element;
+export {};