react-audio-wavekit 0.1.0

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

@@ -0,0 +1,92 @@
+import { useRef, useCallback, useSyncExternalStore, useEffect } from "react";
+import { useAudioAnalyser } from "../use-audio-analyser.js";
+function useRecordingAmplitudes(options) {
+  const { mediaRecorder, fftSize = 2048, smoothingTimeConstant = 0.4, sampleInterval = 50 } = options;
+  const amplitudeDataRef = useRef([]);
+  const listenersRef = useRef(/* @__PURE__ */ new Set());
+  const samplingIntervalRef = useRef(null);
+  const subscribe = useCallback((onStoreChange) => {
+    listenersRef.current.add(onStoreChange);
+    return () => listenersRef.current.delete(onStoreChange);
+  }, []);
+  const getSnapshot = useCallback(() => amplitudeDataRef.current, []);
+  const notifyListeners = useCallback(() => {
+    for (const listener of listenersRef.current) {
+      listener();
+    }
+  }, []);
+  const amplitudes = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const { audioContextRef, analyserRef, dataArrayRef, bufferLengthRef } = useAudioAnalyser({
+    mediaRecorder,
+    fftSize,
+    smoothingTimeConstant
+  });
+  const clearAmplitudes = useCallback(() => {
+    amplitudeDataRef.current = [];
+    notifyListeners();
+  }, [notifyListeners]);
+  const prevMediaRecorderRef = useRef(null);
+  useEffect(() => {
+    if (mediaRecorder !== prevMediaRecorderRef.current) {
+      amplitudeDataRef.current = [];
+      notifyListeners();
+      prevMediaRecorderRef.current = mediaRecorder;
+    }
+  }, [mediaRecorder, notifyListeners]);
+  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
+  };
+}
+export {
+  useRecordingAmplitudes
+};

package/dist/recorder/use-audio-analyser.cjs

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function useAudioAnalyser({
+  mediaRecorder,
+  fftSize = 2048,
+  smoothingTimeConstant = 0.8
+}) {
+  const audioContextRef = react.useRef(null);
+  const analyserRef = react.useRef(null);
+  const sourceRef = react.useRef(null);
+  const dataArrayRef = react.useRef(null);
+  const bufferLengthRef = react.useRef(0);
+  react.useEffect(() => {
+    if (!mediaRecorder) {
+      return;
+    }
+    let audioContext = null;
+    let analyser = null;
+    let source = null;
+    try {
+      audioContext = new AudioContext();
+      analyser = audioContext.createAnalyser();
+      analyser.fftSize = fftSize;
+      analyser.smoothingTimeConstant = smoothingTimeConstant;
+      audioContextRef.current = audioContext;
+      analyserRef.current = analyser;
+      const stream = mediaRecorder.stream;
+      source = audioContext.createMediaStreamSource(stream);
+      source.connect(analyser);
+      sourceRef.current = source;
+      const bufferLength = analyser.frequencyBinCount;
+      bufferLengthRef.current = bufferLength;
+      dataArrayRef.current = new Uint8Array(bufferLength);
+    } catch (error) {
+      console.error("Failed to setup audio analyser:", error);
+    }
+    return () => {
+      if (sourceRef.current) {
+        sourceRef.current.disconnect();
+        sourceRef.current = null;
+      }
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close();
+      }
+      audioContextRef.current = null;
+      analyserRef.current = null;
+      dataArrayRef.current = null;
+      bufferLengthRef.current = 0;
+    };
+  }, [mediaRecorder, fftSize, smoothingTimeConstant]);
+  return {
+    audioContextRef,
+    analyserRef,
+    dataArrayRef,
+    bufferLengthRef
+  };
+}
+exports.useAudioAnalyser = useAudioAnalyser;

package/dist/recorder/use-audio-analyser.js

@@ -0,0 +1,59 @@
+import { useRef, useEffect } from "react";
+function useAudioAnalyser({
+  mediaRecorder,
+  fftSize = 2048,
+  smoothingTimeConstant = 0.8
+}) {
+  const audioContextRef = useRef(null);
+  const analyserRef = useRef(null);
+  const sourceRef = useRef(null);
+  const dataArrayRef = useRef(null);
+  const bufferLengthRef = useRef(0);
+  useEffect(() => {
+    if (!mediaRecorder) {
+      return;
+    }
+    let audioContext = null;
+    let analyser = null;
+    let source = null;
+    try {
+      audioContext = new AudioContext();
+      analyser = audioContext.createAnalyser();
+      analyser.fftSize = fftSize;
+      analyser.smoothingTimeConstant = smoothingTimeConstant;
+      audioContextRef.current = audioContext;
+      analyserRef.current = analyser;
+      const stream = mediaRecorder.stream;
+      source = audioContext.createMediaStreamSource(stream);
+      source.connect(analyser);
+      sourceRef.current = source;
+      const bufferLength = analyser.frequencyBinCount;
+      bufferLengthRef.current = bufferLength;
+      dataArrayRef.current = new Uint8Array(bufferLength);
+    } catch (error) {
+      console.error("Failed to setup audio analyser:", error);
+    }
+    return () => {
+      if (sourceRef.current) {
+        sourceRef.current.disconnect();
+        sourceRef.current = null;
+      }
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close();
+      }
+      audioContextRef.current = null;
+      analyserRef.current = null;
+      dataArrayRef.current = null;
+      bufferLengthRef.current = 0;
+    };
+  }, [mediaRecorder, fftSize, smoothingTimeConstant]);
+  return {
+    audioContextRef,
+    analyserRef,
+    dataArrayRef,
+    bufferLengthRef
+  };
+}
+export {
+  useAudioAnalyser
+};

package/dist/recorder/use-audio-recorder.cjs

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const utilMimeType = require("./util-mime-type.cjs");
+const useAudioRecorder = (config = {}) => {
+  const { mimeType, audioConstraints = true, onRecordingComplete } = config;
+  const resolvedMimeType = typeof mimeType === "function" ? mimeType() : mimeType !== void 0 ? mimeType : utilMimeType.getDefaultMimeType();
+  const [mediaRecorder, setMediaRecorder] = react.useState(null);
+  const [recordingBlob, setRecordingBlob] = react.useState(null);
+  const [recordingTime, setRecordingTime] = react.useState(0);
+  const [isRecording, setIsRecording] = react.useState(false);
+  const [isPaused, setIsPaused] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const audioChunksRef = react.useRef([]);
+  const timerRef = react.useRef(null);
+  const streamRef = react.useRef(null);
+  const mediaRecorderRef = react.useRef(null);
+  const isRecordingRef = react.useRef(false);
+  const isPausedRef = react.useRef(false);
+  react.useEffect(() => {
+    mediaRecorderRef.current = mediaRecorder;
+    isRecordingRef.current = isRecording;
+    isPausedRef.current = isPaused;
+  }, [mediaRecorder, isRecording, isPaused]);
+  react.useEffect(() => {
+    if (isRecording && !isPaused) {
+      timerRef.current = window.setInterval(() => {
+        setRecordingTime((prev) => prev + 1);
+      }, 1e3);
+    } else if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, [isRecording, isPaused]);
+  const startRecording = react.useCallback(async () => {
+    try {
+      setError(null);
+      audioChunksRef.current = [];
+      setRecordingBlob(null);
+      setRecordingTime(0);
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: audioConstraints
+      });
+      streamRef.current = stream;
+      const recorder = new MediaRecorder(stream, {
+        mimeType: MediaRecorder.isTypeSupported(resolvedMimeType) ? resolvedMimeType : utilMimeType.getDefaultMimeType()
+      });
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+      recorder.onstop = () => {
+        const blob = new Blob(audioChunksRef.current, { type: recorder.mimeType });
+        setRecordingBlob(blob);
+        onRecordingComplete?.(blob);
+        setIsRecording(false);
+        setIsPaused(false);
+        setMediaRecorder(null);
+        if (streamRef.current) {
+          for (const track of streamRef.current.getTracks()) {
+            track.stop();
+          }
+          streamRef.current = null;
+        }
+      };
+      recorder.onerror = (event) => {
+        setError(new Error(`Recording error: ${event}`));
+        setIsRecording(false);
+        setIsPaused(false);
+      };
+      setMediaRecorder(recorder);
+      recorder.start(100);
+      setIsRecording(true);
+      setIsPaused(false);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      setError(error2);
+      console.error("Failed to start recording:", error2);
+    }
+  }, [resolvedMimeType, audioConstraints, onRecordingComplete]);
+  const stopRecording = react.useCallback(() => {
+    if (mediaRecorderRef.current && isRecordingRef.current) {
+      mediaRecorderRef.current.stop();
+    }
+  }, []);
+  const pauseRecording = react.useCallback(() => {
+    if (mediaRecorderRef.current && isRecordingRef.current && !isPausedRef.current) {
+      mediaRecorderRef.current.pause();
+      setIsPaused(true);
+    }
+  }, []);
+  const resumeRecording = react.useCallback(() => {
+    if (mediaRecorderRef.current && isRecordingRef.current && isPausedRef.current) {
+      mediaRecorderRef.current.resume();
+      setIsPaused(false);
+    }
+  }, []);
+  const clearRecording = react.useCallback(() => {
+    if (mediaRecorderRef.current && isRecordingRef.current) {
+      mediaRecorderRef.current.stop();
+    }
+    audioChunksRef.current = [];
+    setRecordingBlob(null);
+    setRecordingTime(0);
+    setError(null);
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      if (streamRef.current) {
+        for (const track of streamRef.current.getTracks()) {
+          track.stop();
+        }
+      }
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, []);
+  return {
+    startRecording,
+    stopRecording,
+    pauseRecording,
+    resumeRecording,
+    clearRecording,
+    mediaRecorder,
+    recordingBlob,
+    recordingTime,
+    isRecording,
+    isPaused,
+    error
+  };
+};
+exports.useAudioRecorder = useAudioRecorder;

package/dist/recorder/use-audio-recorder.js

@@ -0,0 +1,139 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { getDefaultMimeType } from "./util-mime-type.js";
+const useAudioRecorder = (config = {}) => {
+  const { mimeType, audioConstraints = true, onRecordingComplete } = config;
+  const resolvedMimeType = typeof mimeType === "function" ? mimeType() : mimeType !== void 0 ? mimeType : getDefaultMimeType();
+  const [mediaRecorder, setMediaRecorder] = useState(null);
+  const [recordingBlob, setRecordingBlob] = useState(null);
+  const [recordingTime, setRecordingTime] = useState(0);
+  const [isRecording, setIsRecording] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const [error, setError] = useState(null);
+  const audioChunksRef = useRef([]);
+  const timerRef = useRef(null);
+  const streamRef = useRef(null);
+  const mediaRecorderRef = useRef(null);
+  const isRecordingRef = useRef(false);
+  const isPausedRef = useRef(false);
+  useEffect(() => {
+    mediaRecorderRef.current = mediaRecorder;
+    isRecordingRef.current = isRecording;
+    isPausedRef.current = isPaused;
+  }, [mediaRecorder, isRecording, isPaused]);
+  useEffect(() => {
+    if (isRecording && !isPaused) {
+      timerRef.current = window.setInterval(() => {
+        setRecordingTime((prev) => prev + 1);
+      }, 1e3);
+    } else if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, [isRecording, isPaused]);
+  const startRecording = useCallback(async () => {
+    try {
+      setError(null);
+      audioChunksRef.current = [];
+      setRecordingBlob(null);
+      setRecordingTime(0);
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: audioConstraints
+      });
+      streamRef.current = stream;
+      const recorder = new MediaRecorder(stream, {
+        mimeType: MediaRecorder.isTypeSupported(resolvedMimeType) ? resolvedMimeType : getDefaultMimeType()
+      });
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+      recorder.onstop = () => {
+        const blob = new Blob(audioChunksRef.current, { type: recorder.mimeType });
+        setRecordingBlob(blob);
+        onRecordingComplete?.(blob);
+        setIsRecording(false);
+        setIsPaused(false);
+        setMediaRecorder(null);
+        if (streamRef.current) {
+          for (const track of streamRef.current.getTracks()) {
+            track.stop();
+          }
+          streamRef.current = null;
+        }
+      };
+      recorder.onerror = (event) => {
+        setError(new Error(`Recording error: ${event}`));
+        setIsRecording(false);
+        setIsPaused(false);
+      };
+      setMediaRecorder(recorder);
+      recorder.start(100);
+      setIsRecording(true);
+      setIsPaused(false);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      setError(error2);
+      console.error("Failed to start recording:", error2);
+    }
+  }, [resolvedMimeType, audioConstraints, onRecordingComplete]);
+  const stopRecording = useCallback(() => {
+    if (mediaRecorderRef.current && isRecordingRef.current) {
+      mediaRecorderRef.current.stop();
+    }
+  }, []);
+  const pauseRecording = useCallback(() => {
+    if (mediaRecorderRef.current && isRecordingRef.current && !isPausedRef.current) {
+      mediaRecorderRef.current.pause();
+      setIsPaused(true);
+    }
+  }, []);
+  const resumeRecording = useCallback(() => {
+    if (mediaRecorderRef.current && isRecordingRef.current && isPausedRef.current) {
+      mediaRecorderRef.current.resume();
+      setIsPaused(false);
+    }
+  }, []);
+  const clearRecording = useCallback(() => {
+    if (mediaRecorderRef.current && isRecordingRef.current) {
+      mediaRecorderRef.current.stop();
+    }
+    audioChunksRef.current = [];
+    setRecordingBlob(null);
+    setRecordingTime(0);
+    setError(null);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (streamRef.current) {
+        for (const track of streamRef.current.getTracks()) {
+          track.stop();
+        }
+      }
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, []);
+  return {
+    startRecording,
+    stopRecording,
+    pauseRecording,
+    resumeRecording,
+    clearRecording,
+    mediaRecorder,
+    recordingBlob,
+    recordingTime,
+    isRecording,
+    isPaused,
+    error
+  };
+};
+export {
+  useAudioRecorder
+};

package/dist/recorder/util-mime-type.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getDefaultMimeType() {
+  if (MediaRecorder.isTypeSupported("audio/mp4")) {
+    return "audio/mp4";
+  }
+  if (MediaRecorder.isTypeSupported("audio/webm;codecs=opus")) {
+    return "audio/webm;codecs=opus";
+  }
+  if (MediaRecorder.isTypeSupported("audio/webm")) {
+    return "audio/webm";
+  }
+  return "audio/webm";
+}
+exports.getDefaultMimeType = getDefaultMimeType;

package/dist/recorder/util-mime-type.js

@@ -0,0 +1,15 @@
+function getDefaultMimeType() {
+  if (MediaRecorder.isTypeSupported("audio/mp4")) {
+    return "audio/mp4";
+  }
+  if (MediaRecorder.isTypeSupported("audio/webm;codecs=opus")) {
+    return "audio/webm;codecs=opus";
+  }
+  if (MediaRecorder.isTypeSupported("audio/webm")) {
+    return "audio/webm";
+  }
+  return "audio/webm";
+}
+export {
+  getDefaultMimeType
+};

package/dist/waveform/index.cjs

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utilAudioDecoder = require("./util-audio-decoder.cjs");
+const utilSuspense = require("./util-suspense.cjs");
+const waveformRenderer = require("./waveform-renderer.cjs");
+const DEFAULT_SAMPLE_COUNT = 500;
+const AudioWaveform = react.forwardRef(function AudioWaveform2({ blob, appearance, suspense = false, currentTime, duration, onSeek, ...props }, ref) {
+  const [peaks, setPeaks] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const [sampleCount, setSampleCount] = react.useState(DEFAULT_SAMPLE_COUNT);
+  const sampleCountInitializedRef = react.useRef(false);
+  const blobRef = react.useRef(null);
+  const rendererRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!sampleCountInitializedRef.current) {
+      setSampleCount(Math.max(500, Math.ceil(window.innerWidth)));
+      sampleCountInitializedRef.current = true;
+    }
+  }, []);
+  react.useEffect(() => {
+    if (ref && typeof ref === "function") {
+      ref({ canvas: rendererRef.current?.canvas || null });
+    } else if (ref) {
+      ref.current = { canvas: rendererRef.current?.canvas || null };
+    }
+  }, [ref]);
+  const suspensePeaks = blob && suspense ? utilSuspense.unwrapPromise(utilAudioDecoder.getAudioData(blob, sampleCount)) : null;
+  react.useEffect(() => {
+    if (suspense) return;
+    if (!blob) {
+      setPeaks(null);
+      setError(null);
+      blobRef.current = null;
+      return;
+    }
+    if (blobRef.current === blob) return;
+    blobRef.current = blob;
+    let cancelled = false;
+    setError(null);
+    utilAudioDecoder.decodeAudioBlob(blob, sampleCount).then((data) => {
+      if (!cancelled) {
+        setPeaks(data);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err instanceof Error ? err : new Error(err?.message || "Failed to decode audio"));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [blob, sampleCount, suspense]);
+  if (!suspense && error) {
+    throw error;
+  }
+  const finalPeaks = suspense ? suspensePeaks : peaks;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    waveformRenderer.WaveformRenderer,
+    {
+      ref: rendererRef,
+      peaks: finalPeaks,
+      appearance,
+      currentTime,
+      duration,
+      onSeek,
+      ...props
+    }
+  );
+});
+exports.AudioWaveform = AudioWaveform;
+exports.default = AudioWaveform;

package/dist/waveform/index.js

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { getAudioData, decodeAudioBlob } from "./util-audio-decoder.js";
+import { unwrapPromise } from "./util-suspense.js";
+import { WaveformRenderer } from "./waveform-renderer.js";
+const DEFAULT_SAMPLE_COUNT = 500;
+const AudioWaveform = forwardRef(function AudioWaveform2({ blob, appearance, suspense = false, currentTime, duration, onSeek, ...props }, ref) {
+  const [peaks, setPeaks] = useState(null);
+  const [error, setError] = useState(null);
+  const [sampleCount, setSampleCount] = useState(DEFAULT_SAMPLE_COUNT);
+  const sampleCountInitializedRef = useRef(false);
+  const blobRef = useRef(null);
+  const rendererRef = useRef(null);
+  useEffect(() => {
+    if (!sampleCountInitializedRef.current) {
+      setSampleCount(Math.max(500, Math.ceil(window.innerWidth)));
+      sampleCountInitializedRef.current = true;
+    }
+  }, []);
+  useEffect(() => {
+    if (ref && typeof ref === "function") {
+      ref({ canvas: rendererRef.current?.canvas || null });
+    } else if (ref) {
+      ref.current = { canvas: rendererRef.current?.canvas || null };
+    }
+  }, [ref]);
+  const suspensePeaks = blob && suspense ? unwrapPromise(getAudioData(blob, sampleCount)) : null;
+  useEffect(() => {
+    if (suspense) return;
+    if (!blob) {
+      setPeaks(null);
+      setError(null);
+      blobRef.current = null;
+      return;
+    }
+    if (blobRef.current === blob) return;
+    blobRef.current = blob;
+    let cancelled = false;
+    setError(null);
+    decodeAudioBlob(blob, sampleCount).then((data) => {
+      if (!cancelled) {
+        setPeaks(data);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err instanceof Error ? err : new Error(err?.message || "Failed to decode audio"));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [blob, sampleCount, suspense]);
+  if (!suspense && error) {
+    throw error;
+  }
+  const finalPeaks = suspense ? suspensePeaks : peaks;
+  return /* @__PURE__ */ jsx(
+    WaveformRenderer,
+    {
+      ref: rendererRef,
+      peaks: finalPeaks,
+      appearance,
+      currentTime,
+      duration,
+      onSeek,
+      ...props
+    }
+  );
+});
+export {
+  AudioWaveform,
+  AudioWaveform as default
+};