react-audio-wavekit 0.1.4 → 0.1.5

package/README.md

@@ -113,6 +113,7 @@ Scrolling timeline waveform (Voice Memos style). Canvas grows horizontally as re
 | `fftSize` | `number` | `2048` | FFT size for frequency analysis |
 | `smoothingTimeConstant` | `number` | `0.8` | Smoothing constant (0-1) |
 | `sampleInterval` | `number` | `50` | Sample interval in ms |
+| `amplitudeScale` | `number` | `1.5` | Amplitude multiplier (lower = quieter waveform) |
 | `appearance` | `LiveStreamingRecorderAppearance` | - | See [Appearance Options](#appearance-options) |
 
 **Canvas Props:**
@@ -143,6 +144,7 @@ Fixed-width waveform where bars compress as recording grows.
 | `fftSize` | `number` | `2048` | FFT size for frequency analysis |
 | `smoothingTimeConstant` | `number` | `0.8` | Smoothing constant (0-1) |
 | `sampleInterval` | `number` | `50` | Sample interval in ms |
+| `amplitudeScale` | `number` | `1.5` | Amplitude multiplier (lower = quieter waveform) |
 | `appearance` | `WaveformAppearance` | - | See [Appearance Options](#appearance-options) |
 
 ### LiveRecorder
@@ -163,6 +165,7 @@ Real-time frequency bars visualization.
 | `fftSize` | `number` | `2048` | FFT size for frequency analysis |
 | `smoothingTimeConstant` | `number` | `0.8` | Smoothing constant (0-1) |
 | `showIdleState` | `boolean` | `true` | Show minimal bars when not recording |
+| `amplitudeScale` | `number` | `1.5` | Amplitude multiplier (lower = quieter waveform) |
 | `appearance` | `WaveformAppearance` | - | See [Appearance Options](#appearance-options) |
 
 ---

package/dist/index.d.ts

@@ -65,6 +65,11 @@ declare interface LiveRecorderProps extends React.CanvasHTMLAttributes<HTMLCanva
      * @default true
      */
     showIdleState?: boolean;
+    /**
+     * Amplitude multiplier - lower values produce quieter waveforms
+     * @default 1.5
+     */
+    amplitudeScale?: number;
 }
 
 declare interface LiveRecorderRef {
@@ -191,6 +196,11 @@ declare interface UseRecordingAmplitudesOptions {
     smoothingTimeConstant?: number;
     /** Interval in ms for sampling amplitude data */
     sampleInterval?: number;
+    /**
+     * Amplitude multiplier - lower values produce quieter waveforms
+     * @default 1.5
+     */
+    amplitudeScale?: number;
 }
 
 declare interface UseRecordingAmplitudesReturn {

package/dist/recorder/live-recorder/index.cjs

@@ -11,6 +11,7 @@ const LiveRecorder = react.forwardRef(
     fftSize = 2048,
     smoothingTimeConstant = 0.8,
     showIdleState = true,
+    amplitudeScale = 1.5,
     ...props
   }, ref) => {
     const canvasRef = react.useRef(null);
@@ -60,7 +61,7 @@ const LiveRecorder = react.forwardRef(
         for (let i = 0; i < numBars; i++) {
           const dataIndex = Math.floor(i / numBars * bufferLength);
           const value = dataArray[dataIndex] || 0;
-          const amplitude = Math.abs(value - 128) / 128;
+          const amplitude = Math.min(1, Math.abs(value - 128) / 128 * amplitudeScale);
           const barHeight = Math.max(2, amplitude * height * barHeightScale);
           const x = i * totalBarWidth;
           const y = (height - barHeight) / 2;
@@ -90,7 +91,7 @@ const LiveRecorder = react.forwardRef(
           animationRef.current = null;
         }
       };
-    }, [mediaRecorder, appearance, analyserRef, dataArrayRef, bufferLengthRef]);
+    }, [mediaRecorder, appearance, amplitudeScale, analyserRef, dataArrayRef, bufferLengthRef]);
     react.useEffect(() => {
       if (mediaRecorder || !showIdleState || !canvasRef.current) return;
       const canvas = canvasRef.current;

package/dist/recorder/live-recorder/index.js

@@ -9,6 +9,7 @@ const LiveRecorder = forwardRef(
     fftSize = 2048,
     smoothingTimeConstant = 0.8,
     showIdleState = true,
+    amplitudeScale = 1.5,
     ...props
   }, ref) => {
     const canvasRef = useRef(null);
@@ -58,7 +59,7 @@ const LiveRecorder = forwardRef(
         for (let i = 0; i < numBars; i++) {
           const dataIndex = Math.floor(i / numBars * bufferLength);
           const value = dataArray[dataIndex] || 0;
-          const amplitude = Math.abs(value - 128) / 128;
+          const amplitude = Math.min(1, Math.abs(value - 128) / 128 * amplitudeScale);
           const barHeight = Math.max(2, amplitude * height * barHeightScale);
           const x = i * totalBarWidth;
           const y = (height - barHeight) / 2;
@@ -88,7 +89,7 @@ const LiveRecorder = forwardRef(
           animationRef.current = null;
         }
       };
-    }, [mediaRecorder, appearance, analyserRef, dataArrayRef, bufferLengthRef]);
+    }, [mediaRecorder, appearance, amplitudeScale, analyserRef, dataArrayRef, bufferLengthRef]);
     useEffect(() => {
       if (mediaRecorder || !showIdleState || !canvasRef.current) return;
       const canvas = canvasRef.current;

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

@@ -3,7 +3,13 @@ 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 {
+    mediaRecorder,
+    fftSize = 2048,
+    smoothingTimeConstant = 0.4,
+    sampleInterval = 50,
+    amplitudeScale = 1.5
+  } = options;
   const amplitudeDataRef = react.useRef([]);
   const listenersRef = react.useRef(/* @__PURE__ */ new Set());
   const samplingIntervalRef = react.useRef(null);
@@ -51,7 +57,7 @@ function useRecordingAmplitudes(options) {
         sum += normalized * normalized;
       }
       const rms = Math.sqrt(sum / bufferLength);
-      const amplitude = Math.min(1, rms * 2);
+      const amplitude = Math.min(1, rms * amplitudeScale);
       amplitudeDataRef.current.push(amplitude);
       notifyListeners();
     };
@@ -79,7 +85,7 @@ function useRecordingAmplitudes(options) {
       mediaRecorder.removeEventListener("resume", handleResume);
       stopSampling();
     };
-  }, [mediaRecorder, sampleInterval, analyserRef, dataArrayRef, bufferLengthRef, notifyListeners]);
+  }, [mediaRecorder, sampleInterval, amplitudeScale, analyserRef, dataArrayRef, bufferLengthRef, notifyListeners]);
   return {
     amplitudes,
     audioContext: audioContextRef.current,

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

@@ -1,7 +1,13 @@
 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 {
+    mediaRecorder,
+    fftSize = 2048,
+    smoothingTimeConstant = 0.4,
+    sampleInterval = 50,
+    amplitudeScale = 1.5
+  } = options;
   const amplitudeDataRef = useRef([]);
   const listenersRef = useRef(/* @__PURE__ */ new Set());
   const samplingIntervalRef = useRef(null);
@@ -49,7 +55,7 @@ function useRecordingAmplitudes(options) {
         sum += normalized * normalized;
       }
       const rms = Math.sqrt(sum / bufferLength);
-      const amplitude = Math.min(1, rms * 2);
+      const amplitude = Math.min(1, rms * amplitudeScale);
       amplitudeDataRef.current.push(amplitude);
       notifyListeners();
     };
@@ -77,7 +83,7 @@ function useRecordingAmplitudes(options) {
       mediaRecorder.removeEventListener("resume", handleResume);
       stopSampling();
     };
-  }, [mediaRecorder, sampleInterval, analyserRef, dataArrayRef, bufferLengthRef, notifyListeners]);
+  }, [mediaRecorder, sampleInterval, amplitudeScale, analyserRef, dataArrayRef, bufferLengthRef, notifyListeners]);
   return {
     amplitudes,
     audioContext: audioContextRef.current,

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

@@ -1,17 +1,15 @@
 "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");
   }
+  const offlineContext = new OfflineAudioContext(1, 1, 44100);
   let audioBuffer;
   try {
-    audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    audioBuffer = await offlineContext.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.`
     );
@@ -29,7 +27,6 @@ async function decodeAudioBlob(blob, sampleCount) {
   }
   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();

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

@@ -1,15 +1,13 @@
 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");
   }
+  const offlineContext = new OfflineAudioContext(1, 1, 44100);
   let audioBuffer;
   try {
-    audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    audioBuffer = await offlineContext.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.`
     );
@@ -27,7 +25,6 @@ async function decodeAudioBlob(blob, sampleCount) {
   }
   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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-audio-wavekit",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "license": "CC0-1.0",
   "type": "module",
   "main": "dist/index.cjs",