react-audio-wavekit 0.1.0

package/dist/recorder/live-streaming/recorder/recorder-compound.js

@@ -0,0 +1,244 @@
+import { jsx } from "react/jsx-runtime";
+import { useOverlayScrollbars } from "overlayscrollbars-react";
+import { forwardRef, useRef, useId, useEffect, useCallback } from "react";
+import { DEFAULT_SCROLLBAR_APPEARANCE, DEFAULT_WAVEFORM_APPEARANCE } from "../../../constants.js";
+import { LiveStreamingRecorderProvider, useLiveStreamingRecorderContext } from "./recorder-context.js";
+const LiveStreamingRecorderRoot = forwardRef(
+  function LiveStreamingRecorderRoot2({
+    children,
+    className = "",
+    style,
+    mediaRecorder,
+    fftSize,
+    smoothingTimeConstant,
+    sampleInterval,
+    appearance,
+    ...props
+  }, ref) {
+    const containerRef = useRef(null);
+    const uniqueId = useId().replace(/:/g, "");
+    const themeClassName = `os-theme-lsr-${uniqueId}`;
+    const scrollbar = appearance?.scrollbar;
+    const thumbColor = scrollbar?.thumbColor ?? DEFAULT_SCROLLBAR_APPEARANCE.thumbColor;
+    const hidden = scrollbar?.hidden ?? DEFAULT_SCROLLBAR_APPEARANCE.hidden;
+    const [initializeOS, osInstance] = useOverlayScrollbars({
+      options: {
+        overflow: { x: "scroll", y: "hidden" },
+        scrollbars: {
+          theme: themeClassName,
+          visibility: hidden ? "hidden" : "auto",
+          autoHide: "leave",
+          // 마우스가 영역을 벗어나면 숨김 (가장 대중적인 UX)
+          autoHideDelay: 400,
+          dragScroll: true,
+          clickScroll: true
+        }
+      },
+      defer: true
+    });
+    useEffect(() => {
+      if (containerRef.current) {
+        initializeOS(containerRef.current);
+      }
+    }, [initializeOS]);
+    useEffect(() => {
+      const instance = osInstance();
+      if (instance) {
+        instance.options({
+          scrollbars: {
+            visibility: hidden ? "hidden" : "auto"
+          }
+        });
+      }
+    }, [osInstance, hidden]);
+    useEffect(() => {
+      const styleId = `lsr-os-theme-${uniqueId}`;
+      document.getElementById(styleId)?.remove();
+      const styleElement = document.createElement("style");
+      styleElement.id = styleId;
+      styleElement.textContent = `
+        .${themeClassName} {
+          --os-size: 8px;
+          --os-padding-perpendicular: 2px;
+          --os-padding-axis: 2px;
+          --os-track-border-radius: 4px;
+          --os-track-bg: transparent;
+          --os-track-bg-hover: transparent;
+          --os-handle-border-radius: 4px;
+          --os-handle-bg: ${thumbColor};
+          --os-handle-bg-hover: ${thumbColor};
+          --os-handle-bg-active: ${thumbColor};
+          --os-handle-min-size: 30px;
+        }
+      `;
+      document.head.appendChild(styleElement);
+      return () => {
+        document.getElementById(styleId)?.remove();
+      };
+    }, [uniqueId, themeClassName, thumbColor]);
+    useEffect(() => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(containerRef.current);
+        } else {
+          ref.current = containerRef.current;
+        }
+      }
+    }, [ref]);
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style, ...props, children: /* @__PURE__ */ jsx(
+      LiveStreamingRecorderProvider,
+      {
+        mediaRecorder,
+        fftSize,
+        smoothingTimeConstant,
+        sampleInterval,
+        children
+      }
+    ) });
+  }
+);
+const LiveStreamingRecorderCanvas = forwardRef(
+  function LiveStreamingRecorderCanvas2({ className = "", style, appearance, growWidth = true, ...props }, ref) {
+    const { amplitudes, isRecording, isPaused } = useLiveStreamingRecorderContext();
+    const canvasRef = useRef(null);
+    const animationRef = useRef(null);
+    const containerSizeRef = useRef({ width: 0, height: 0 });
+    const containerRef = useRef(null);
+    const prevCanvasWidthRef = useRef(0);
+    useEffect(() => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(canvasRef.current);
+        } else {
+          ref.current = canvasRef.current;
+        }
+      }
+    }, [ref]);
+    useEffect(() => {
+      if (amplitudes.length === 0) {
+        prevCanvasWidthRef.current = 0;
+      }
+    }, [amplitudes.length]);
+    const drawWaveform = useCallback(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      const container = canvas.parentElement;
+      const containerWidth = container?.clientWidth || canvas.clientWidth;
+      const containerHeight = container?.clientHeight || canvas.clientHeight;
+      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;
+      if (isRecording || amplitudes.length > 0) {
+        let canvasWidth;
+        if (growWidth) {
+          const requiredWidth = amplitudes.length * totalBarWidth;
+          const calculatedWidth = amplitudes.length > 0 ? requiredWidth : containerWidth;
+          canvasWidth = Math.max(calculatedWidth, prevCanvasWidthRef.current);
+          prevCanvasWidthRef.current = canvasWidth;
+          canvas.style.width = `${canvasWidth}px`;
+        } else {
+          canvasWidth = containerWidth;
+          canvas.style.width = "100%";
+        }
+        canvas.width = canvasWidth * dpr;
+        canvas.height = containerHeight * dpr;
+        ctx.scale(dpr, dpr);
+        ctx.clearRect(0, 0, canvasWidth, containerHeight);
+        ctx.fillStyle = barColor;
+        const minBarHeight = 2;
+        ctx.beginPath();
+        if (growWidth) {
+          for (let i = 0; i < amplitudes.length; i++) {
+            const amplitude = amplitudes[i];
+            const barHeight = Math.max(minBarHeight, amplitude * containerHeight * barHeightScale);
+            const x = i * totalBarWidth;
+            const y = (containerHeight - barHeight) / 2;
+            ctx.roundRect(x, y, barWidth, barHeight, barRadius);
+          }
+        } else {
+          const barsCount = Math.floor(canvasWidth / totalBarWidth);
+          const step = amplitudes.length / barsCount;
+          for (let i = 0; i < barsCount; i++) {
+            const amplitudeIndex = Math.min(Math.floor(i * step), amplitudes.length - 1);
+            const amplitude = amplitudes[amplitudeIndex] || 0;
+            const barHeight = Math.max(minBarHeight, amplitude * containerHeight * barHeightScale);
+            const x = i * totalBarWidth;
+            const y = (containerHeight - barHeight) / 2;
+            ctx.roundRect(x, y, barWidth, barHeight, barRadius);
+          }
+        }
+        ctx.fill();
+      }
+    }, [amplitudes, isRecording, appearance, growWidth]);
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const osContent = canvas.parentElement;
+      const osViewport = osContent?.parentElement;
+      if (osViewport?.classList.contains("os-viewport")) {
+        containerRef.current = osViewport;
+      } else {
+        containerRef.current = canvas.parentElement;
+      }
+      const resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        const { width, height } = entry.contentRect;
+        containerSizeRef.current = { width, height };
+        if (!isRecording) {
+          drawWaveform();
+        }
+      });
+      resizeObserver.observe(canvas);
+      return () => resizeObserver.disconnect();
+    }, [isRecording, drawWaveform]);
+    useEffect(() => {
+      if (isRecording && !isPaused) {
+        const draw = () => {
+          drawWaveform();
+          if (growWidth && containerRef.current) {
+            containerRef.current.scrollLeft = containerRef.current.scrollWidth;
+          }
+          animationRef.current = requestAnimationFrame(draw);
+        };
+        draw();
+        return () => {
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+          }
+        };
+      }
+      drawWaveform();
+    }, [isRecording, isPaused, drawWaveform, growWidth]);
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        className,
+        style: {
+          // Set to block in growWidth mode to allow self-determined width
+          display: growWidth ? "block" : void 0,
+          height: "100%",
+          ...style
+        },
+        "aria-hidden": "true",
+        tabIndex: -1,
+        ...props
+      }
+    );
+  }
+);
+const LiveStreamingRecorder = Object.assign(LiveStreamingRecorderRoot, {
+  Root: LiveStreamingRecorderRoot,
+  Canvas: LiveStreamingRecorderCanvas
+});
+export {
+  LiveStreamingRecorder
+};

package/dist/recorder/live-streaming/recorder/recorder-context.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const useRecordingAmplitudes = require("../use-recording-amplitudes.cjs");
+const LiveStreamingRecorderContext = react.createContext(null);
+function LiveStreamingRecorderProvider({ children, ...options }) {
+  const value = useRecordingAmplitudes.useRecordingAmplitudes(options);
+  const content = typeof children === "function" ? children(value) : children;
+  return /* @__PURE__ */ jsxRuntime.jsx(LiveStreamingRecorderContext.Provider, { value, children: content });
+}
+function useLiveStreamingRecorderContext() {
+  const context = react.useContext(LiveStreamingRecorderContext);
+  if (!context) {
+    throw new Error("useLiveStreamingRecorderContext must be used within LiveStreamingRecorder.Root");
+  }
+  return context;
+}
+exports.LiveStreamingRecorderProvider = LiveStreamingRecorderProvider;
+exports.useLiveStreamingRecorderContext = useLiveStreamingRecorderContext;

package/dist/recorder/live-streaming/recorder/recorder-context.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { useRecordingAmplitudes } from "../use-recording-amplitudes.js";
+const LiveStreamingRecorderContext = createContext(null);
+function LiveStreamingRecorderProvider({ children, ...options }) {
+  const value = useRecordingAmplitudes(options);
+  const content = typeof children === "function" ? children(value) : children;
+  return /* @__PURE__ */ jsx(LiveStreamingRecorderContext.Provider, { value, children: content });
+}
+function useLiveStreamingRecorderContext() {
+  const context = useContext(LiveStreamingRecorderContext);
+  if (!context) {
+    throw new Error("useLiveStreamingRecorderContext must be used within LiveStreamingRecorder.Root");
+  }
+  return context;
+}
+export {
+  LiveStreamingRecorderProvider,
+  useLiveStreamingRecorderContext
+};

package/dist/recorder/live-streaming/stack-recorder/stack-recorder-compound.cjs

@@ -0,0 +1,126 @@
+"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 useRecordingAmplitudes = require("../use-recording-amplitudes.cjs");
+const LiveStreamingStackRecorder = react.forwardRef(
+  function LiveStreamingStackRecorder2({ mediaRecorder, fftSize, smoothingTimeConstant, sampleInterval, appearance, className = "", style, ...props }, ref) {
+    const { amplitudes, isRecording, isPaused } = useRecordingAmplitudes.useRecordingAmplitudes({
+      mediaRecorder,
+      fftSize,
+      smoothingTimeConstant,
+      sampleInterval
+    });
+    const canvasRef = react.useRef(null);
+    const animationRef = react.useRef(null);
+    const sizeRef = react.useRef({ width: 0, height: 0 });
+    react.useEffect(() => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(canvasRef.current);
+        } else {
+          ref.current = canvasRef.current;
+        }
+      }
+    }, [ref]);
+    const drawWaveform = react.useCallback(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      const containerWidth = sizeRef.current.width;
+      const containerHeight = sizeRef.current.height;
+      if (containerWidth === 0 || containerHeight === 0) return;
+      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;
+      if (isRecording || amplitudes.length > 0) {
+        const canvasWidth = containerWidth;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, canvasWidth, containerHeight);
+        ctx.fillStyle = barColor;
+        const minBarHeight = 2;
+        const maxBarsCount = Math.floor(canvasWidth / totalBarWidth);
+        const barsCount = Math.min(amplitudes.length, maxBarsCount);
+        const needsDownsample = amplitudes.length > maxBarsCount;
+        ctx.beginPath();
+        for (let i = 0; i < barsCount; i++) {
+          let amplitude;
+          if (needsDownsample) {
+            const startIdx = Math.floor(i * amplitudes.length / barsCount);
+            const endIdx = Math.floor((i + 1) * amplitudes.length / barsCount);
+            let maxAmplitude = 0;
+            for (let j = startIdx; j < endIdx; j++) {
+              maxAmplitude = Math.max(maxAmplitude, amplitudes[j] || 0);
+            }
+            amplitude = maxAmplitude;
+          } else {
+            amplitude = amplitudes[i] || 0;
+          }
+          const barHeight = Math.max(minBarHeight, amplitude * containerHeight * barHeightScale);
+          const x = Math.round(i * totalBarWidth);
+          const y = Math.round((containerHeight - barHeight) / 2);
+          const roundedBarHeight = Math.round(barHeight);
+          ctx.roundRect(x, y, barWidth, roundedBarHeight, barRadius);
+        }
+        ctx.fill();
+      }
+    }, [amplitudes, isRecording, appearance]);
+    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 };
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        if (!isRecording) {
+          drawWaveform();
+        }
+      });
+      resizeObserver.observe(canvas);
+      return () => resizeObserver.disconnect();
+    }, [isRecording, drawWaveform]);
+    react.useEffect(() => {
+      if (isRecording && !isPaused) {
+        const draw = () => {
+          drawWaveform();
+          animationRef.current = requestAnimationFrame(draw);
+        };
+        draw();
+        return () => {
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+          }
+        };
+      }
+      drawWaveform();
+    }, [isRecording, isPaused, drawWaveform]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        className,
+        style: {
+          width: "100%",
+          height: "100%",
+          ...style
+        },
+        "aria-hidden": "true",
+        tabIndex: -1,
+        ...props
+      }
+    );
+  }
+);
+exports.LiveStreamingStackRecorder = LiveStreamingStackRecorder;

package/dist/recorder/live-streaming/stack-recorder/stack-recorder-compound.js

@@ -0,0 +1,126 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect, useCallback } from "react";
+import { DEFAULT_WAVEFORM_APPEARANCE } from "../../../constants.js";
+import { useRecordingAmplitudes } from "../use-recording-amplitudes.js";
+const LiveStreamingStackRecorder = forwardRef(
+  function LiveStreamingStackRecorder2({ mediaRecorder, fftSize, smoothingTimeConstant, sampleInterval, appearance, className = "", style, ...props }, ref) {
+    const { amplitudes, isRecording, isPaused } = useRecordingAmplitudes({
+      mediaRecorder,
+      fftSize,
+      smoothingTimeConstant,
+      sampleInterval
+    });
+    const canvasRef = useRef(null);
+    const animationRef = useRef(null);
+    const sizeRef = useRef({ width: 0, height: 0 });
+    useEffect(() => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(canvasRef.current);
+        } else {
+          ref.current = canvasRef.current;
+        }
+      }
+    }, [ref]);
+    const drawWaveform = useCallback(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      const containerWidth = sizeRef.current.width;
+      const containerHeight = sizeRef.current.height;
+      if (containerWidth === 0 || containerHeight === 0) return;
+      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;
+      if (isRecording || amplitudes.length > 0) {
+        const canvasWidth = containerWidth;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, canvasWidth, containerHeight);
+        ctx.fillStyle = barColor;
+        const minBarHeight = 2;
+        const maxBarsCount = Math.floor(canvasWidth / totalBarWidth);
+        const barsCount = Math.min(amplitudes.length, maxBarsCount);
+        const needsDownsample = amplitudes.length > maxBarsCount;
+        ctx.beginPath();
+        for (let i = 0; i < barsCount; i++) {
+          let amplitude;
+          if (needsDownsample) {
+            const startIdx = Math.floor(i * amplitudes.length / barsCount);
+            const endIdx = Math.floor((i + 1) * amplitudes.length / barsCount);
+            let maxAmplitude = 0;
+            for (let j = startIdx; j < endIdx; j++) {
+              maxAmplitude = Math.max(maxAmplitude, amplitudes[j] || 0);
+            }
+            amplitude = maxAmplitude;
+          } else {
+            amplitude = amplitudes[i] || 0;
+          }
+          const barHeight = Math.max(minBarHeight, amplitude * containerHeight * barHeightScale);
+          const x = Math.round(i * totalBarWidth);
+          const y = Math.round((containerHeight - barHeight) / 2);
+          const roundedBarHeight = Math.round(barHeight);
+          ctx.roundRect(x, y, barWidth, roundedBarHeight, barRadius);
+        }
+        ctx.fill();
+      }
+    }, [amplitudes, isRecording, appearance]);
+    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 };
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        if (!isRecording) {
+          drawWaveform();
+        }
+      });
+      resizeObserver.observe(canvas);
+      return () => resizeObserver.disconnect();
+    }, [isRecording, drawWaveform]);
+    useEffect(() => {
+      if (isRecording && !isPaused) {
+        const draw = () => {
+          drawWaveform();
+          animationRef.current = requestAnimationFrame(draw);
+        };
+        draw();
+        return () => {
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+            animationRef.current = null;
+          }
+        };
+      }
+      drawWaveform();
+    }, [isRecording, isPaused, drawWaveform]);
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        className,
+        style: {
+          width: "100%",
+          height: "100%",
+          ...style
+        },
+        "aria-hidden": "true",
+        tabIndex: -1,
+        ...props
+      }
+    );
+  }
+);
+export {
+  LiveStreamingStackRecorder
+};

package/dist/recorder/live-streaming/use-recording-amplitudes.cjs

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useAudioAnalyser = require("../use-audio-analyser.cjs");
+function useRecordingAmplitudes(options) {
+  const { mediaRecorder, fftSize = 2048, smoothingTimeConstant = 0.4, sampleInterval = 50 } = options;
+  const amplitudeDataRef = react.useRef([]);
+  const listenersRef = react.useRef(/* @__PURE__ */ new Set());
+  const samplingIntervalRef = react.useRef(null);
+  const subscribe = react.useCallback((onStoreChange) => {
+    listenersRef.current.add(onStoreChange);
+    return () => listenersRef.current.delete(onStoreChange);
+  }, []);
+  const getSnapshot = react.useCallback(() => amplitudeDataRef.current, []);
+  const notifyListeners = react.useCallback(() => {
+    for (const listener of listenersRef.current) {
+      listener();
+    }
+  }, []);
+  const amplitudes = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const { audioContextRef, analyserRef, dataArrayRef, bufferLengthRef } = useAudioAnalyser.useAudioAnalyser({
+    mediaRecorder,
+    fftSize,
+    smoothingTimeConstant
+  });
+  const clearAmplitudes = react.useCallback(() => {
+    amplitudeDataRef.current = [];
+    notifyListeners();
+  }, [notifyListeners]);
+  const prevMediaRecorderRef = react.useRef(null);
+  react.useEffect(() => {
+    if (mediaRecorder !== prevMediaRecorderRef.current) {
+      amplitudeDataRef.current = [];
+      notifyListeners();
+      prevMediaRecorderRef.current = mediaRecorder;
+    }
+  }, [mediaRecorder, notifyListeners]);
+  react.useEffect(() => {
+    if (!mediaRecorder) {
+      return;
+    }
+    const sampleAmplitude = () => {
+      const analyser = analyserRef.current;
+      const dataArray = dataArrayRef.current;
+      const bufferLength = bufferLengthRef.current;
+      if (!analyser || !dataArray) return;
+      analyser.getByteTimeDomainData(dataArray);
+      let sum = 0;
+      for (let i = 0; i < bufferLength; i++) {
+        const normalized = (dataArray[i] - 128) / 128;
+        sum += normalized * normalized;
+      }
+      const rms = Math.sqrt(sum / bufferLength);
+      const amplitude = Math.min(1, rms * 2);
+      amplitudeDataRef.current.push(amplitude);
+      notifyListeners();
+    };
+    const startSampling = () => {
+      if (!samplingIntervalRef.current) {
+        samplingIntervalRef.current = window.setInterval(sampleAmplitude, sampleInterval);
+      }
+    };
+    const stopSampling = () => {
+      if (samplingIntervalRef.current) {
+        clearInterval(samplingIntervalRef.current);
+        samplingIntervalRef.current = null;
+      }
+    };
+    const handlePause = () => stopSampling();
+    const handleResume = () => startSampling();
+    mediaRecorder.addEventListener("pause", handlePause);
+    mediaRecorder.addEventListener("resume", handleResume);
+    const timeoutId = setTimeout(() => {
+      startSampling();
+    }, 50);
+    return () => {
+      clearTimeout(timeoutId);
+      mediaRecorder.removeEventListener("pause", handlePause);
+      mediaRecorder.removeEventListener("resume", handleResume);
+      stopSampling();
+    };
+  }, [mediaRecorder, sampleInterval, analyserRef, dataArrayRef, bufferLengthRef, notifyListeners]);
+  return {
+    amplitudes,
+    audioContext: audioContextRef.current,
+    analyser: analyserRef.current,
+    isRecording: mediaRecorder?.state === "recording",
+    isPaused: mediaRecorder?.state === "paused",
+    clearAmplitudes
+  };
+}
+exports.useRecordingAmplitudes = useRecordingAmplitudes;