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/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/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/react/README.md ADDED Viewed

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

package/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/react/package.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "react-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "bun index.html"
+  },
+  "dependencies": {
+    "@jadujoel/web-audio-clip-node": "^0.1.1",
+    "react": "^19",
+    "react-dom": "^19",
+    "zustand": "^5"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  }
+}

package/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/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/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/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/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/self-hosted/public/.gitkeep ADDED Viewed

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

package/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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@jadujoel/web-audio-clip-node",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"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": [
@@ -24,6 +24,7 @@
 			"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"
@@ -36,7 +37,8 @@
 	"files": [
 		"dist",
 		"README.md",
-		"LICENSE"
+		"LICENSE",
+		"examples"
 	],
 	"sideEffects": false,
 	"scripts": {

package/dist/lib-react.js.map DELETED Viewed

@@ -1,9 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [
-  ],
-  "mappings": "",
-  "debugId": "030B87E04A0B95F064756E2164756E21",
-  "names": []
-}

package/dist/lib.js.map DELETED Viewed

@@ -1,9 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [
-  ],
-  "mappings": "",
-  "debugId": "9B64F311A83C9C3D64756E2164756E21",
-  "names": []
-}