react-audio-wavekit 0.1.0

package/dist/waveform/util-audio-decoder.cjs

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+async function decodeAudioBlob(blob, sampleCount) {
+  const audioContext = new AudioContext();
+  const arrayBuffer = await blob.arrayBuffer();
+  if (arrayBuffer.byteLength === 0) {
+    await audioContext.close();
+    throw new Error("Audio blob is empty");
+  }
+  let audioBuffer;
+  try {
+    audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+  } catch {
+    await audioContext.close();
+    throw new Error(
+      `Unable to decode audio data (type: ${blob.type}, size: ${blob.size} bytes). This may be due to an unsupported audio format or corrupted data.`
+    );
+  }
+  const channelData = audioBuffer.getChannelData(0);
+  const blockSize = Math.floor(channelData.length / sampleCount);
+  const peaks = [];
+  for (let i = 0; i < sampleCount; i++) {
+    const start = i * blockSize;
+    let sum = 0;
+    for (let j = 0; j < blockSize; j++) {
+      sum += Math.abs(channelData[start + j] || 0);
+    }
+    peaks.push(sum / blockSize);
+  }
+  const maxPeak = Math.max(...peaks);
+  const normalizedPeaks = maxPeak > 0 ? peaks.map((p) => p / maxPeak) : peaks;
+  await audioContext.close();
+  return normalizedPeaks;
+}
+const audioDataCache = /* @__PURE__ */ new WeakMap();
+function getAudioData(blob, sampleCount) {
+  let promise = audioDataCache.get(blob);
+  if (!promise) {
+    promise = decodeAudioBlob(blob, sampleCount);
+    audioDataCache.set(blob, promise);
+  }
+  return promise;
+}
+exports.decodeAudioBlob = decodeAudioBlob;
+exports.getAudioData = getAudioData;

package/dist/waveform/util-audio-decoder.js

@@ -0,0 +1,45 @@
+async function decodeAudioBlob(blob, sampleCount) {
+  const audioContext = new AudioContext();
+  const arrayBuffer = await blob.arrayBuffer();
+  if (arrayBuffer.byteLength === 0) {
+    await audioContext.close();
+    throw new Error("Audio blob is empty");
+  }
+  let audioBuffer;
+  try {
+    audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+  } catch {
+    await audioContext.close();
+    throw new Error(
+      `Unable to decode audio data (type: ${blob.type}, size: ${blob.size} bytes). This may be due to an unsupported audio format or corrupted data.`
+    );
+  }
+  const channelData = audioBuffer.getChannelData(0);
+  const blockSize = Math.floor(channelData.length / sampleCount);
+  const peaks = [];
+  for (let i = 0; i < sampleCount; i++) {
+    const start = i * blockSize;
+    let sum = 0;
+    for (let j = 0; j < blockSize; j++) {
+      sum += Math.abs(channelData[start + j] || 0);
+    }
+    peaks.push(sum / blockSize);
+  }
+  const maxPeak = Math.max(...peaks);
+  const normalizedPeaks = maxPeak > 0 ? peaks.map((p) => p / maxPeak) : peaks;
+  await audioContext.close();
+  return normalizedPeaks;
+}
+const audioDataCache = /* @__PURE__ */ new WeakMap();
+function getAudioData(blob, sampleCount) {
+  let promise = audioDataCache.get(blob);
+  if (!promise) {
+    promise = decodeAudioBlob(blob, sampleCount);
+    audioDataCache.set(blob, promise);
+  }
+  return promise;
+}
+export {
+  decodeAudioBlob,
+  getAudioData
+};

package/dist/waveform/util-suspense.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function unwrapPromise(promise) {
+  const cached = promise;
+  if (!cached._status) {
+    cached._status = "pending";
+    cached._value = void 0;
+    cached._error = void 0;
+    cached.then(
+      (value) => {
+        cached._status = "fulfilled";
+        cached._value = value;
+      },
+      (error) => {
+        cached._status = "rejected";
+        cached._error = error;
+      }
+    );
+  }
+  if (cached._status === "rejected") throw cached._error;
+  if (cached._status === "pending") throw promise;
+  return cached._value;
+}
+exports.unwrapPromise = unwrapPromise;

package/dist/waveform/util-suspense.js

@@ -0,0 +1,24 @@
+function unwrapPromise(promise) {
+  const cached = promise;
+  if (!cached._status) {
+    cached._status = "pending";
+    cached._value = void 0;
+    cached._error = void 0;
+    cached.then(
+      (value) => {
+        cached._status = "fulfilled";
+        cached._value = value;
+      },
+      (error) => {
+        cached._status = "rejected";
+        cached._error = error;
+      }
+    );
+  }
+  if (cached._status === "rejected") throw cached._error;
+  if (cached._status === "pending") throw promise;
+  return cached._value;
+}
+export {
+  unwrapPromise
+};

package/dist/waveform/waveform-renderer.cjs

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const constants = require("../constants.cjs");
+const WaveformRenderer = react.forwardRef(function WaveformRenderer2({ peaks, appearance, currentTime, duration, onSeek, onClick, style, ...props }, ref) {
+  const canvasRef = react.useRef(null);
+  const sizeRef = react.useRef({ width: 0, height: 0 });
+  const rafRef = react.useRef(0);
+  react.useImperativeHandle(ref, () => ({
+    canvas: canvasRef.current
+  }));
+  const drawWaveform = react.useCallback(() => {
+    const canvas = canvasRef.current;
+    const { width, height } = sizeRef.current;
+    if (!canvas || !peaks || width === 0 || height === 0) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    const targetWidth = width * dpr;
+    const targetHeight = height * dpr;
+    if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
+      canvas.width = targetWidth;
+      canvas.height = targetHeight;
+    }
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    const barColor = appearance?.barColor ?? constants.DEFAULT_WAVEFORM_APPEARANCE.barColor;
+    const barWidth = appearance?.barWidth ?? constants.DEFAULT_WAVEFORM_APPEARANCE.barWidth;
+    const barGap = appearance?.barGap ?? constants.DEFAULT_WAVEFORM_APPEARANCE.barGap;
+    const barRadius = appearance?.barRadius ?? constants.DEFAULT_WAVEFORM_APPEARANCE.barRadius;
+    const barHeightScale = appearance?.barHeightScale ?? constants.DEFAULT_WAVEFORM_APPEARANCE.barHeightScale;
+    const totalBarWidth = barWidth + barGap;
+    const barsCount = Math.floor(width / totalBarWidth);
+    const step = peaks.length / barsCount;
+    ctx.fillStyle = barColor;
+    for (let i = 0; i < barsCount; i++) {
+      const peakIndex = Math.min(Math.floor(i * step), peaks.length - 1);
+      const peak = peaks[peakIndex];
+      const barHeight = Math.max(peak * height * barHeightScale, 2);
+      const x = i * totalBarWidth;
+      const y = (height - barHeight) / 2;
+      if (barRadius > 0) {
+        ctx.beginPath();
+        ctx.roundRect(x, y, barWidth, barHeight, barRadius);
+        ctx.fill();
+      } else {
+        ctx.fillRect(x, y, barWidth, barHeight);
+      }
+    }
+    if (currentTime !== void 0 && duration !== void 0 && duration > 0) {
+      const playheadX = currentTime / duration * width;
+      const playheadColor = appearance?.playheadColor ?? constants.DEFAULT_PLAYHEAD_APPEARANCE.playheadColor;
+      const playheadWidth = appearance?.playheadWidth ?? constants.DEFAULT_PLAYHEAD_APPEARANCE.playheadWidth;
+      ctx.fillStyle = playheadColor;
+      ctx.fillRect(playheadX - playheadWidth / 2, 0, playheadWidth, height);
+    }
+  }, [peaks, appearance, currentTime, duration]);
+  react.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      if (sizeRef.current.width === width && sizeRef.current.height === height) return;
+      sizeRef.current = { width, height };
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(drawWaveform);
+    });
+    resizeObserver.observe(canvas);
+    return () => {
+      resizeObserver.disconnect();
+      cancelAnimationFrame(rafRef.current);
+    };
+  }, [drawWaveform]);
+  react.useEffect(() => {
+    drawWaveform();
+  }, [drawWaveform]);
+  const handleClick = react.useCallback(
+    (e) => {
+      if (!onSeek || !duration || duration <= 0) return;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const clickRatio = x / rect.width;
+      const newTime = Math.max(0, Math.min(clickRatio * duration, duration));
+      onSeek(newTime);
+    },
+    [onSeek, duration]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      role: "img",
+      "aria-label": "Audio waveform",
+      onClick: handleClick,
+      style: { cursor: onSeek ? "pointer" : void 0, ...style },
+      ...props
+    }
+  );
+});
+exports.WaveformRenderer = WaveformRenderer;

package/dist/waveform/waveform-renderer.js

@@ -0,0 +1,105 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect } from "react";
+import { DEFAULT_WAVEFORM_APPEARANCE, DEFAULT_PLAYHEAD_APPEARANCE } from "../constants.js";
+const WaveformRenderer = forwardRef(function WaveformRenderer2({ peaks, appearance, currentTime, duration, onSeek, onClick, style, ...props }, ref) {
+  const canvasRef = useRef(null);
+  const sizeRef = useRef({ width: 0, height: 0 });
+  const rafRef = useRef(0);
+  useImperativeHandle(ref, () => ({
+    canvas: canvasRef.current
+  }));
+  const drawWaveform = useCallback(() => {
+    const canvas = canvasRef.current;
+    const { width, height } = sizeRef.current;
+    if (!canvas || !peaks || width === 0 || height === 0) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    const targetWidth = width * dpr;
+    const targetHeight = height * dpr;
+    if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
+      canvas.width = targetWidth;
+      canvas.height = targetHeight;
+    }
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    const barColor = appearance?.barColor ?? DEFAULT_WAVEFORM_APPEARANCE.barColor;
+    const barWidth = appearance?.barWidth ?? DEFAULT_WAVEFORM_APPEARANCE.barWidth;
+    const barGap = appearance?.barGap ?? DEFAULT_WAVEFORM_APPEARANCE.barGap;
+    const barRadius = appearance?.barRadius ?? DEFAULT_WAVEFORM_APPEARANCE.barRadius;
+    const barHeightScale = appearance?.barHeightScale ?? DEFAULT_WAVEFORM_APPEARANCE.barHeightScale;
+    const totalBarWidth = barWidth + barGap;
+    const barsCount = Math.floor(width / totalBarWidth);
+    const step = peaks.length / barsCount;
+    ctx.fillStyle = barColor;
+    for (let i = 0; i < barsCount; i++) {
+      const peakIndex = Math.min(Math.floor(i * step), peaks.length - 1);
+      const peak = peaks[peakIndex];
+      const barHeight = Math.max(peak * height * barHeightScale, 2);
+      const x = i * totalBarWidth;
+      const y = (height - barHeight) / 2;
+      if (barRadius > 0) {
+        ctx.beginPath();
+        ctx.roundRect(x, y, barWidth, barHeight, barRadius);
+        ctx.fill();
+      } else {
+        ctx.fillRect(x, y, barWidth, barHeight);
+      }
+    }
+    if (currentTime !== void 0 && duration !== void 0 && duration > 0) {
+      const playheadX = currentTime / duration * width;
+      const playheadColor = appearance?.playheadColor ?? DEFAULT_PLAYHEAD_APPEARANCE.playheadColor;
+      const playheadWidth = appearance?.playheadWidth ?? DEFAULT_PLAYHEAD_APPEARANCE.playheadWidth;
+      ctx.fillStyle = playheadColor;
+      ctx.fillRect(playheadX - playheadWidth / 2, 0, playheadWidth, height);
+    }
+  }, [peaks, appearance, currentTime, duration]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      if (sizeRef.current.width === width && sizeRef.current.height === height) return;
+      sizeRef.current = { width, height };
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(drawWaveform);
+    });
+    resizeObserver.observe(canvas);
+    return () => {
+      resizeObserver.disconnect();
+      cancelAnimationFrame(rafRef.current);
+    };
+  }, [drawWaveform]);
+  useEffect(() => {
+    drawWaveform();
+  }, [drawWaveform]);
+  const handleClick = useCallback(
+    (e) => {
+      if (!onSeek || !duration || duration <= 0) return;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const clickRatio = x / rect.width;
+      const newTime = Math.max(0, Math.min(clickRatio * duration, duration));
+      onSeek(newTime);
+    },
+    [onSeek, duration]
+  );
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      role: "img",
+      "aria-label": "Audio waveform",
+      onClick: handleClick,
+      style: { cursor: onSeek ? "pointer" : void 0, ...style },
+      ...props
+    }
+  );
+});
+export {
+  WaveformRenderer
+};

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "react-audio-wavekit",
+  "version": "0.1.0",
+  "license": "CC0-1.0",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "deploy-storybook": "storybook build && netlify deploy --dir=storybook-static --prod --site 9971038c-e3a3-4338-acb5-d593e65775a8",
+    "check": "biome check . && tsgo --noEmit",
+    "fix": "biome check --write .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "bun run check && bun run build",
+    "release": "npm publish --access public"
+  },
+  "engines": {
+    "node": ">=20.19.0 || >=22.12.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.8",
+    "@storybook/addon-docs": "10.1.4",
+    "@storybook/react": "10.1.4",
+    "@storybook/react-vite": "10.1.4",
+    "@tailwindcss/vite": "4.1.17",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "24.10.1",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "@typescript/native-preview": "7.0.0-dev.20251205.1",
+    "@vitejs/plugin-react": "5.1.1",
+    "jsdom": "^27.2.0",
+    "lucide-react": "0.555.0",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "storybook": "10.1.4",
+    "tailwindcss": "4.1.17",
+    "typescript": "5.9.3",
+    "vite": "7.2.6",
+    "vite-plugin-dts": "4.5.4",
+    "vitest": "^4.0.15"
+  },
+  "dependencies": {
+    "overlayscrollbars": "^2.13.0",
+    "overlayscrollbars-react": "^0.5.6"
+  }
+}