npm - @jadujoel/web-audio-clip-node - Versions diffs - 0.1.0 → 0.1.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (346) hide show

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/README.md ADDED Viewed

@@ -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/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/cdn-vanilla/README.md ADDED Viewed

@@ -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/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/cdn-vanilla/index.html ADDED Viewed

@@ -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/node_modules/@jadujoel/web-audio-clip-node/examples/esm-bundler/README.md ADDED Viewed

@@ -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/node_modules/@jadujoel/web-audio-clip-node/examples/esm-bundler/index.html ADDED Viewed

@@ -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/node_modules/@jadujoel/web-audio-clip-node/examples/esm-bundler/package.json ADDED Viewed

@@ -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"
+  }
+}

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/esm-bundler/src/main.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import { ClipNode, getProcessorBlobUrl } from "@jadujoel/web-audio-clip-node";
+const app = document.getElementById("app")!;
+app.innerHTML = `
+  <h1>ClipNode – Vite + TypeScript</h1>
+  <button id="play">▶ Play</button>
+  <button id="stop">■ Stop</button>
+  <p id="status">Click Play to start.</p>
+`;
+function createToneBuffer(ctx: AudioContext, freq = 440, duration = 2) {
+  const length = ctx.sampleRate * duration;
+  const buf = ctx.createBuffer(1, length, ctx.sampleRate);
+  const data = buf.getChannelData(0);
+  for (let i = 0; i < length; i++) {
+    data[i] = Math.sin((2 * Math.PI * freq * i) / ctx.sampleRate);
+  }
+  return buf;
+}
+let ctx: AudioContext;
+let clip: ClipNode;
+document.getElementById("play")!.addEventListener("click", async () => {
+  if (!ctx) {
+    ctx = new AudioContext();
+    await ctx.audioWorklet.addModule(getProcessorBlobUrl());
+    clip = new ClipNode(ctx, {
+      processorOptions: { sampleRate: ctx.sampleRate },
+    });
+    clip.connect(ctx.destination);
+    clip.buffer = createToneBuffer(ctx);
+  }
+  clip.start();
+  document.getElementById("status")!.textContent = "Playing…";
+});
+document.getElementById("stop")!.addEventListener("click", () => {
+  if (clip) {
+    clip.stop();
+    document.getElementById("status")!.textContent = "Stopped.";
+  }
+});

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/react/README.md ADDED Viewed

@@ -0,0 +1,10 @@
+# React Example
+Minimal React app using the built-in hooks and UI components.
+```sh
+npm install
+npm run dev
+```
+Uses `useClipNode` + `useClipControls` to wire everything up, and renders `<TransportButtons />` and `<AudioControl />` out of the box.

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/react/index.html ADDED Viewed

@@ -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 – React Example</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/main.tsx"></script>
+</body>
+</html>

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

@@ -0,0 +1,21 @@
+{
+  "name": "react-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@jadujoel/web-audio-clip-node": "^0.1.1",
+    "react": "^19",
+    "react-dom": "^19",
+    "zustand": "^5"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^4",
+    "vite": "^6"
+  }
+}

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/react/src/App.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import {
+  AudioControl,
+  TransportButtons,
+  useClipControls,
+  useClipNode,
+} from "@jadujoel/web-audio-clip-node/react";
+import "@jadujoel/web-audio-clip-node/styles.css";
+export function App() {
+  const controls = useClipControls();
+  useClipNode({ ...controls });
+  return (
+    <div style={{ maxWidth: 480, margin: "2rem auto", fontFamily: "system-ui, sans-serif" }}>
+      <h1>ClipNode – React</h1>
+      <TransportButtons />
+      <AudioControl />
+    </div>
+  );
+}

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/react/src/main.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/react/vite.config.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+export default defineConfig({
+  plugins: [react()],
+});

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/self-hosted/README.md ADDED Viewed

@@ -0,0 +1,11 @@
+# Self-Hosted Processor Example
+Demonstrates serving `processor.js` from your own origin instead of using the embedded blob URL or CDN.
+```sh
+npm install
+npm run setup   # copies processor.js into public/
+npm run dev
+```
+The `setup` script copies the worklet file from the installed package into `public/`, where Vite serves it as a static asset. `getProcessorModuleUrl()` resolves it relative to the page URL.

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/self-hosted/index.html ADDED Viewed

@@ -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 – Self-Hosted Processor</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./src/main.ts"></script>
+</body>
+</html>

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/self-hosted/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "name": "self-hosted-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "setup": "cp node_modules/@jadujoel/web-audio-clip-node/dist/processor.js public/processor.js",
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@jadujoel/web-audio-clip-node": "^0.1.1"
+  },
+  "devDependencies": {
+    "vite": "^6"
+  }
+}

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/self-hosted/public/.gitkeep ADDED Viewed

	@@ -0,0 +1 @@
1	+ .gitkeep

package/examples/esm-bundler/node_modules/@jadujoel/web-audio-clip-node/examples/self-hosted/src/main.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { ClipNode, getProcessorModuleUrl } from "@jadujoel/web-audio-clip-node";
+const app = document.getElementById("app")!;
+app.innerHTML = `
+  <h1>ClipNode – Self-Hosted Processor</h1>
+  <p>The <code>processor.js</code> file is served from <code>/processor.js</code> on your own server.</p>
+  <button id="play">▶ Play</button>
+  <button id="stop">■ Stop</button>
+  <p id="status">Click Play to start.</p>
+`;
+function createToneBuffer(ctx: AudioContext, freq = 440, duration = 2) {
+  const length = ctx.sampleRate * duration;
+  const buf = ctx.createBuffer(1, length, ctx.sampleRate);
+  const data = buf.getChannelData(0);
+  for (let i = 0; i < length; i++) {
+    data[i] = Math.sin((2 * Math.PI * freq * i) / ctx.sampleRate);
+  }
+  return buf;
+}
+let ctx: AudioContext;
+let clip: ClipNode;
+document.getElementById("play")!.addEventListener("click", async () => {
+  if (!ctx) {
+    ctx = new AudioContext();
+    // Load the processor from your own server (public/processor.js)
+    const processorUrl = getProcessorModuleUrl(window.location.href);
+    await ctx.audioWorklet.addModule(processorUrl);
+    clip = new ClipNode(ctx, {
+      processorOptions: { sampleRate: ctx.sampleRate },
+    });
+    clip.connect(ctx.destination);
+    clip.buffer = createToneBuffer(ctx);
+  }
+  clip.start();
+  document.getElementById("status")!.textContent = "Playing…";
+});
+document.getElementById("stop")!.addEventListener("click", () => {
+  if (clip) {
+    clip.stop();
+    document.getElementById("status")!.textContent = "Stopped.";
+  }
+});

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

@@ -0,0 +1,88 @@
+{
+	"name": "@jadujoel/web-audio-clip-node",
+	"version": "0.1.1",
+	"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"
+		},
+		"./react": {
+			"types": "./dist/lib-react.d.ts",
+			"import": "./dist/lib-react.js"
+		},
+		"./processor": "./dist/processor.js",
+		"./styles.css": "./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",
+		"dev": "bun serve.ts",
+		"lint": "biome check",
+		"test": "bun test",
+		"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",
+		"@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/esm-bundler/node_modules/@rollup/rollup-darwin-arm64/README.md ADDED Viewed

@@ -0,0 +1,3 @@
+# `@rollup/rollup-darwin-arm64`
+This is the **aarch64-apple-darwin** binary for `rollup`

package/examples/esm-bundler/node_modules/@rollup/rollup-darwin-arm64/package.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "name": "@rollup/rollup-darwin-arm64",
+  "version": "4.60.1",
+  "os": [
+    "darwin"
+  ],
+  "cpu": [
+    "arm64"
+  ],
+  "files": [
+    "rollup.darwin-arm64.node"
+  ],
+  "description": "Native bindings for Rollup",
+  "author": "Lukas Taegert-Atkinson",
+  "homepage": "https://rollupjs.org/",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rollup/rollup.git"
+  },
+  "main": "./rollup.darwin-arm64.node"
+}

package/examples/esm-bundler/node_modules/@rollup/rollup-darwin-arm64/rollup.darwin-arm64.node ADDED Viewed

Binary file

package/examples/esm-bundler/node_modules/@types/estree/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+    MIT License
+    Copyright (c) Microsoft Corporation.
+    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/esm-bundler/node_modules/@types/estree/README.md ADDED Viewed

@@ -0,0 +1,15 @@
+# Installation
+> `npm install --save @types/estree`
+# Summary
+This package contains type definitions for estree (https://github.com/estree/estree).
+# Details
+Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/estree.
+### Additional Details
+ * Last updated: Fri, 06 Jun 2025 00:04:33 GMT
+ * Dependencies: none
+# Credits
+These definitions were written by [RReverser](https://github.com/RReverser).