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

package/examples/playground/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/playground/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/playground/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/playground/package.json

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

package/examples/playground/src/App.tsx

@@ -0,0 +1,442 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+	type ControlKey,
+	controlDefs,
+	getActiveLinkedControls,
+	getLinkedControlPairForControl,
+	getLinkedControlUpdates,
+	isTempoRelativeSnap,
+	loopControlDefs,
+	loopLinkedControlPairs,
+	remapTempoRelativeValue,
+	transportLinkedControlPairs,
+} from "@jadujoel/web-audio-clip-node";
+import {
+	ControlSection,
+	DetuneControl,
+	DisplayPanel,
+	FilterControl,
+	GainControl,
+	PanControl,
+	PlaybackRateControl,
+	PlayheadSlider,
+	TransportButtons,
+	useClipControls,
+	useClipNode,
+} from "@jadujoel/web-audio-clip-node/react";
+import "@jadujoel/web-audio-clip-node/styles.css";
+
+function buildControlUpdates<T>(
+	keys: readonly ControlKey[],
+	value: T,
+): Partial<Record<ControlKey, T>> {
+	return Object.fromEntries(
+		keys.map((key) => [key, value] satisfies [ControlKey, T]),
+	) as Partial<Record<ControlKey, T>>;
+}
+
+export function App() {
+	const controls = useClipControls();
+	const node = useClipNode({
+		values: controls.values,
+		enabled: controls.enabled,
+		loop: controls.loop,
+		setValue: controls.setValue,
+	});
+	const [tempoDraft, setTempoDraft] = useState(() => String(controls.tempo));
+	const [isEditingTempo, setIsEditingTempo] = useState(false);
+
+	useEffect(() => {
+		if (node.audioDuration == null) return;
+		for (const key of Object.keys(controls.maxLocked) as ControlKey[]) {
+			if (controls.maxLocked[key]) {
+				controls.setMax(key, node.audioDuration);
+			}
+		}
+	}, [node.audioDuration, controls.maxLocked, controls.setMax]);
+
+	useEffect(() => {
+		if (isEditingTempo) return;
+		setTempoDraft(String(controls.tempo));
+	}, [controls.tempo, isEditingTempo]);
+
+	const handleValueChange = useCallback(
+		(key: ControlKey, val: number) => {
+			const linkedPair = getLinkedControlPairForControl(key);
+			if (linkedPair && controls.linkedPairs[linkedPair.key]) {
+				const effectiveMaxs = { ...controls.maxs };
+				for (const linkedKey of linkedPair.controls) {
+					if (controls.maxLocked[linkedKey] && node.audioDuration != null) {
+						effectiveMaxs[linkedKey] = node.audioDuration;
+					}
+				}
+
+				const nextValues = getLinkedControlUpdates({
+					pair: linkedPair,
+					changedKey: key,
+					nextValue: val,
+					values: controls.values,
+					mins: controls.mins,
+					maxs: effectiveMaxs,
+				});
+
+				controls.setValuesPartial(nextValues);
+				node.applyValues(nextValues);
+				return;
+			}
+
+			node.applyValue(key, val);
+		},
+		[
+			controls.linkedPairs,
+			controls.maxLocked,
+			controls.maxs,
+			controls.mins,
+			controls.setValuesPartial,
+			controls.values,
+			node.applyValue,
+			node.applyValues,
+			node.audioDuration,
+		],
+	);
+
+	const handleTempoChange = useCallback(
+		(nextTempo: number) => {
+			if (!Number.isFinite(nextTempo) || nextTempo <= 0) return;
+
+			const previousTempo = controls.tempo;
+			if (nextTempo === previousTempo) return;
+
+			const changedValues: Partial<Record<ControlKey, number>> = {};
+			for (const key of Object.keys(controls.values) as ControlKey[]) {
+				const snap = controls.snaps[key];
+				if (!isTempoRelativeSnap(snap)) continue;
+
+				const effectiveMax =
+					controls.maxLocked[key] && node.audioDuration != null
+						? node.audioDuration
+						: controls.maxs[key];
+				const nextValue = remapTempoRelativeValue(
+					controls.values[key],
+					snap,
+					previousTempo,
+					nextTempo,
+					controls.mins[key],
+					effectiveMax,
+				);
+
+				if (nextValue !== controls.values[key]) {
+					changedValues[key] = nextValue;
+				}
+			}
+
+			controls.setTempoAndValues(nextTempo, changedValues);
+			node.applyValues(changedValues);
+		},
+		[
+			controls.maxLocked,
+			controls.maxs,
+			controls.mins,
+			controls.setTempoAndValues,
+			controls.snaps,
+			controls.tempo,
+			controls.values,
+			node.applyValues,
+			node.audioDuration,
+		],
+	);
+
+	const commitTempoDraft = useCallback(() => {
+		const nextTempo = Number(tempoDraft.trim());
+		setIsEditingTempo(false);
+
+		if (!Number.isFinite(nextTempo) || nextTempo <= 0) {
+			setTempoDraft(String(controls.tempo));
+			return;
+		}
+
+		handleTempoChange(nextTempo);
+		setTempoDraft(String(nextTempo));
+	}, [controls.tempo, handleTempoChange, tempoDraft]);
+
+	const handleSnapChange = useCallback(
+		(key: ControlKey, snap: string) => {
+			const linkedKeys = getActiveLinkedControls(key, controls.linkedPairs);
+			controls.setSnapsPartial(buildControlUpdates(linkedKeys, snap));
+		},
+		[controls.linkedPairs, controls.setSnapsPartial],
+	);
+
+	const handleToggle = useCallback(
+		(key: ControlKey, on: boolean) => {
+			const linkedKeys = getActiveLinkedControls(key, controls.linkedPairs);
+			controls.setEnabledPartial(buildControlUpdates(linkedKeys, on));
+			for (const linkedKey of linkedKeys) {
+				node.applyToggle(linkedKey, on);
+			}
+		},
+		[controls.linkedPairs, controls.setEnabledPartial, node.applyToggle],
+	);
+
+	const handleMinChange = useCallback(
+		(key: ControlKey, val: number) => {
+			const linkedKeys = getActiveLinkedControls(key, controls.linkedPairs);
+			controls.setMinsPartial(buildControlUpdates(linkedKeys, val));
+		},
+		[controls.linkedPairs, controls.setMinsPartial],
+	);
+
+	const handleMaxChange = useCallback(
+		(key: ControlKey, val: number) => {
+			const linkedKeys = getActiveLinkedControls(key, controls.linkedPairs);
+			controls.setMaxsPartial(buildControlUpdates(linkedKeys, val));
+		},
+		[controls.linkedPairs, controls.setMaxsPartial],
+	);
+
+	const handleLoopChange = useCallback(
+		(checked: boolean) => {
+			controls.setLoop(checked);
+			node.setLoopOnNode(checked);
+		},
+		[controls.setLoop, node.setLoopOnNode],
+	);
+
+	const handleMaxLockedChange = useCallback(
+		(key: ControlKey, locked: boolean) => {
+			const linkedKeys = getActiveLinkedControls(key, controls.linkedPairs);
+			controls.setMaxLockedPartial(buildControlUpdates(linkedKeys, locked));
+			if (locked && node.audioDuration != null) {
+				controls.setMaxsPartial(
+					buildControlUpdates(linkedKeys, node.audioDuration),
+				);
+			}
+		},
+		[
+			controls.linkedPairs,
+			controls.setMaxLockedPartial,
+			controls.setMaxsPartial,
+			node.audioDuration,
+		],
+	);
+
+	const handlePlayheadChange = useCallback(
+		(v: number) => handleValueChange("playhead", v),
+		[handleValueChange],
+	);
+	const handlePlaybackRateChange = useCallback(
+		(v: number) => handleValueChange("playbackRate", v),
+		[handleValueChange],
+	);
+	const handlePlaybackRateToggle = useCallback(
+		(on: boolean) => handleToggle("playbackRate", on),
+		[handleToggle],
+	);
+	const handleDetuneChange = useCallback(
+		(v: number) => handleValueChange("detune", v),
+		[handleValueChange],
+	);
+	const handleDetuneToggle = useCallback(
+		(on: boolean) => handleToggle("detune", on),
+		[handleToggle],
+	);
+	const handleGainChange = useCallback(
+		(v: number) => handleValueChange("gain", v),
+		[handleValueChange],
+	);
+	const handleGainToggle = useCallback(
+		(on: boolean) => handleToggle("gain", on),
+		[handleToggle],
+	);
+	const handlePanChange = useCallback(
+		(v: number) => handleValueChange("pan", v),
+		[handleValueChange],
+	);
+	const handlePanToggle = useCallback(
+		(on: boolean) => handleToggle("pan", on),
+		[handleToggle],
+	);
+	const handleLowpassChange = useCallback(
+		(v: number) => handleValueChange("lowpass", v),
+		[handleValueChange],
+	);
+	const handleLowpassToggle = useCallback(
+		(on: boolean) => handleToggle("lowpass", on),
+		[handleToggle],
+	);
+	const handleHighpassChange = useCallback(
+		(v: number) => handleValueChange("highpass", v),
+		[handleValueChange],
+	);
+	const handleHighpassToggle = useCallback(
+		(on: boolean) => handleToggle("highpass", on),
+		[handleToggle],
+	);
+
+	return (
+		<main>
+			<DisplayPanel
+				nodeState={node.nodeState}
+				statusMessage={node.statusMessage}
+				soundName={node.soundName}
+				currentTime={node.infoCurrentTime}
+				currentFrame={node.infoCurrentFrame}
+				timesLooped={node.infoTimesLooped}
+				latency={node.infoLatency}
+				timeTaken={node.infoTimeTaken}
+			/>
+			<TransportButtons
+				nodeState={node.nodeState}
+				onStart={node.start}
+				onStop={node.stop}
+				onPause={node.pause}
+				onResume={node.resume}
+				onDispose={node.dispose}
+				onLog={node.logState}
+				onLoadSound={node.loadSound}
+			/>
+			<fieldset className="control-group tempo-group">
+				<legend>Tempo</legend>
+				<label htmlFor="tempo" className="tempo-label">
+					BPM
+				</label>
+				<input
+					id="tempo"
+					type="number"
+					min={20}
+					max={999}
+					step={1}
+					value={tempoDraft}
+					onFocus={() => setIsEditingTempo(true)}
+					onChange={(e) => setTempoDraft(e.target.value)}
+					onBlur={commitTempoDraft}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") {
+							commitTempoDraft();
+							e.currentTarget.blur();
+						}
+						if (e.key === "Escape") {
+							setIsEditingTempo(false);
+							setTempoDraft(String(controls.tempo));
+							e.currentTarget.blur();
+						}
+					}}
+					style={{ width: 70 }}
+				/>
+			</fieldset>
+			<PlayheadSlider
+				value={controls.values.playhead}
+				audioDuration={node.audioDuration}
+				disabled={node.nodeState === "initial" || node.nodeState === "disposed"}
+				onChange={handlePlayheadChange}
+			/>
+			<section id="controls">
+				<ControlSection
+					legend="Transport"
+					defs={controlDefs}
+					values={controls.values}
+					snaps={controls.snaps}
+					enabled={controls.enabled}
+					mins={controls.mins}
+					maxs={controls.maxs}
+					maxLocked={controls.maxLocked}
+					linked={controls.linkedPairs}
+					linkedPairs={transportLinkedControlPairs}
+					tempo={controls.tempo}
+					audioDuration={node.audioDuration}
+					onValueChange={handleValueChange}
+					onToggle={handleToggle}
+					onLinkedChange={controls.setLinkedPair}
+					onSnapChange={handleSnapChange}
+					onMinChange={handleMinChange}
+					onMaxChange={handleMaxChange}
+					onMaxLockedChange={handleMaxLockedChange}
+				/>
+				<fieldset className="control-group">
+					<legend>Loop</legend>
+					<div className="loop-row">
+						<label htmlFor="loop">Loop</label>
+						<input
+							type="checkbox"
+							id="loop"
+							checked={controls.loop}
+							onChange={(e) => handleLoopChange(e.target.checked)}
+						/>
+					</div>
+					{controls.loop && (
+						<ControlSection
+							legend="Controls"
+							defs={loopControlDefs}
+							values={controls.values}
+							snaps={controls.snaps}
+							enabled={controls.enabled}
+							mins={controls.mins}
+							maxs={controls.maxs}
+							maxLocked={controls.maxLocked}
+							linked={controls.linkedPairs}
+							linkedPairs={loopLinkedControlPairs}
+							tempo={controls.tempo}
+							audioDuration={node.audioDuration}
+							onValueChange={handleValueChange}
+							onToggle={handleToggle}
+							onLinkedChange={controls.setLinkedPair}
+							onSnapChange={handleSnapChange}
+							onMinChange={handleMinChange}
+							onMaxChange={handleMaxChange}
+							onMaxLockedChange={handleMaxLockedChange}
+						/>
+					)}
+				</fieldset>
+				<fieldset className="control-group">
+					<legend>Parameters</legend>
+					<PlaybackRateControl
+						value={controls.values.playbackRate}
+						defaultValue={1}
+						enabled={controls.enabled.playbackRate}
+						onChange={handlePlaybackRateChange}
+						onToggle={handlePlaybackRateToggle}
+					/>
+					<DetuneControl
+						value={controls.values.detune}
+						defaultValue={0}
+						enabled={controls.enabled.detune}
+						onChange={handleDetuneChange}
+						onToggle={handleDetuneToggle}
+					/>
+					<GainControl
+						value={controls.values.gain}
+						defaultValue={0}
+						enabled={controls.enabled.gain}
+						onChange={handleGainChange}
+						onToggle={handleGainToggle}
+					/>
+					<PanControl
+						value={controls.values.pan}
+						defaultValue={0}
+						enabled={controls.enabled.pan}
+						onChange={handlePanChange}
+						onToggle={handlePanToggle}
+					/>
+					<FilterControl
+						label="Lowpass"
+						controlKey="lowpass"
+						value={controls.values.lowpass}
+						defaultValue={16384}
+						enabled={controls.enabled.lowpass}
+						onChange={handleLowpassChange}
+						onToggle={handleLowpassToggle}
+					/>
+					<FilterControl
+						label="Highpass"
+						controlKey="highpass"
+						value={controls.values.highpass}
+						defaultValue={32}
+						enabled={controls.enabled.highpass}
+						onChange={handleHighpassChange}
+						onToggle={handleHighpassToggle}
+					/>
+				</fieldset>
+			</section>
+		</main>
+	);
+}

package/examples/playground/src/main.tsx

@@ -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/react/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.